white screen after build my app ?

[Adamkaram]

i'm newcomer to tauri i love it becauze it using rust

To Reproduce
Steps to reproduce the behavior:
i just type those command

1-npx create-react-app tauri-tutorial
2-yarn add tauri

3-adding this to my package.json
"tauri": "tauri",
"dev": "npm run tauri dev",
"bundle": "tauri build",

4- npm run tauri init
5- npm run build
6- npm run bundle

every thing working fine to me at this point but when i try to open bunde app i see this every time without no change
even i colse it an reopen it again

should open my app with react basics logo as i don't touch any file in my app just simple app !

OS: windows 10
Node: v15.4.0
NPM: 7.0.15
Yarn: 1.22.5
Rustc: rustc 1.49.0 (e1884a8e3 2020-12-29)

is there is any extra work should i do before building my app or some tool are mising ?

[Laegel]

Hey @Adamkaram ,

Would you share your tauri.conf.json file or, at least, let us know if the embeddedServer property is set to true or false?

[Adamkaram]

this what u ask for
"tauri": {
"embeddedServer": {
"active": true
},

whole my file

{
"build": {
"distDir": "../dist",
"devPath": "http://localhost:4000",
"beforeDevCommand": "",
"beforeBuildCommand": ""
},
"ctx": {},
"tauri": {
"embeddedServer": {
"active": true
},
"bundle": {
"active": true,
"targets": "all",
"identifier": "com.tauri.dev",
"icon": [
"icons/32x32.png",
"icons/128x128.png",
"icons/[email protected]",
"icons/icon.icns",
"icons/icon.ico"
],
"resources": [],
"externalBin": [],
"copyright": "",
"category": "DeveloperTool",
"shortDescription": "",
"longDescription": "",
"deb": {
"depends": [],
"useBootstrapper": false
},
"osx": {
"frameworks": [],
"minimumSystemVersion": "",
"useBootstrapper": false
},
"exceptionDomain": ""
},
"allowlist": {
"all": true
},
"window": {
"title": "medical Center",
"width": 800,
"height": 600,
"resizable": true,
"fullscreen": false
},
"security": {
"csp": "default-src blob: data: filesystem: ws: http: https: 'unsafe-eval' 'unsafe-inline'"
},
"inliner": {
"active": true
}
}
}

[Laegel]

Thanks. I asked because we recently had other issues involving blank screens solved by enabling the embeddedServer. But I fear it won't work for you...
Is tauri dev working? If so, would you try to build with the --debug flag (tauri build --debug) and try to see what happens in your dev tools console?

[Adamkaram]

i set it to false and try again it doesn't work too , but No tauri dev won't work for me
that was another problem i was planing to ask u about later

tauri:dev Administrator privileges detected. Tauri doesn't work when running as admin, see Boscop/web-view#96 +0ms

i open vs code under user privilage with
code --user-data-dir="~/.vscode-root"

same issue

[FabianLars]

If you ran create-react-app with default settings and didn't alter them afterwards, you have to change distDir to "../build" (instead of "../dist") and devPath to port :3000 instead of :4000 (both inside tauri.conf.json).

Of course you could also change this on the react side of things, but I don't know how off the top of my head.

[Adamkaram]

If you ran create-react-app with default settings and didn't alter them afterwards, you have to change distDir to "../build" (instead of "../dist") and devPath to port :3000 instead of :4000 (both inside tauri.conf.json).

Of course you could also change this on the react side of things, but I don't know how off the top of my head.

already i've bundel my app and change my build src , but what the point of change my port to 3000 insted of 4000
it doesn't make sence a little bit , but this isn't the problem i guess

[FabianLars]

Did you at least try it out before saying that it doesn't make sense? I had the exact same problem like you when i started with tauri+react.
Changing the port from 4000 to 3000 most likely fixes "npm run tauri dev", because the react dev server is at 3000 but tauri looks for one at 4000.
Without changing distDir to ../build (OR manually moving your react output to the preconfigured ../dist OR changing react's default output dir), tauri just bundles "nothing" == white screen. You need to rerun the bundle step afterwards of course.

But then again, i can just make up my assumptions by looking at your step-by-step instructions and your tauri.conf.js file, so maybe something is missing.

[Laegel]

@Adamkaram , I think you should try what @FabianLars proposed.
Else, you may try to download and build the following example: https://github.com/tauri-apps/examples/tree/dev/node/react/create-react-app

[Adamkaram]

Did you at least try it out before saying that it doesn't make sense? I had the exact same problem like you when i started with tauri+react.
Changing the port from 4000 to 3000 most likely fixes "npm run tauri dev", because the react dev server is at 3000 but tauri looks for one at 4000.
Without changing distDir to ../build (OR manually moving your react output to the preconfigured ../dist OR changing react's default output dir), tauri just bundles "nothing" == white screen. You need to rerun the bundle step afterwards of course.

But then again, i can just make up my assumptions by looking at your step-by-step instructions and your tauri.conf.js file, so maybe something is missing.

first all respect for u i didn't mean to be shameless , but i was asking about the point of that
and i will give it a try now

[Adamkaram]

@Adamkaram , I think you should try what @FabianLars proposed.
Else, you may try to download and build the following example: https://github.com/tauri-apps/examples/tree/dev/node/react/create-react-app

it doesn't work it gives me white screen

and same issue with run dev

[tauri]: running dev
tauri:dev Administrator privileges detected. Tauri doesn't work when running as admin, see Boscop/web-view#96 +0ms
npm ERR! code 1
npm ERR! path C:\Users\Adam\Desktop\lap-app
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c tauri dev

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Adam\AppData\Local\npm-cache_logs\2021-01-09T14_23_22_424Z-debug.log

[FabianLars]

Well, it seems like you're in an admin shell. Try running it inside a normal one (eg. cmd.exe or powershell etc. WITHOUT admin rights)

[Adamkaram]

Well, it seems like you're in an admin shell. Try running it inside a normal one (eg. cmd.exe or powershell etc. WITHOUT admin rights)

yup i run yarn dev and it's working but same thing with white screen
why there is No more specific info about build in thier docs it Need more work i want to stick with tauri seem to be promise
but Not with me at least

[FabianLars]

still a white screen on yarn dev? And you're sure the react server is running at the same time (in a different terminal)? And when we're at it, you also did the loopback thing described here: tauri.studio ?
If this is also not working, would you mind sharing the output of "npm run tauri info"?

And just for the sake of I'll list everything i do everytime i create a new tauri+react app: pastebin.com.

[Adamkaram]

still a white screen on yarn dev? And you're sure the react server is running at the same time (in a different terminal)? And when we're at it, you also did the loopback thing described here: tauri.studio ?
If this is also not working, would you mind sharing the output of "npm run tauri info"?

And just for the sake of I'll list everything i do everytime i create a new tauri+react app: pastebin.com.

they say that WebView2 (Chromium) is Optional so i choose to not download it but anyway it works finally
i don't know how i can thank u

[loyy77]

我的解决办法：把devPath的值由 http://localhost:3000 改为 http://127.0.0.1:3000 或 http://0.0.0.0:3000
My solution: Change the value of devPath from http://localhost:3000 to http://127.0.0.1:3000 or http://0.0.0.0:3000

"distDir": "../build",
  "devPath": "http://127.0.0.1:3000",

[Hustoking]

我的解决办法：把devPath的值由 http://localhost:3000 改为 http://127.0.0.1:3000 或 http://0.0.0.0:3000 My solution: Change the value of devPath from http://localhost:3000 to http://127.0.0.1:3000 or http://0.0.0.0:3000

"distDir": "../build",
  "devPath": "http://127.0.0.1:3000",

????????这是怎么发现的???????
老子找了一宿最后在你这解决了!!!!!!!!!!!!!!!!!!!!

[furkanksl]

I was having same issue with using Tauri with NextJs. I just changed the build folder to dist and it worked!

my package.json :

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export -o dist",
    "start": "next start",
    "tauri": "tauri",
    "lint": "next lint"
  },

I added -o dist command to put the build to the dist folder.

My tauri.conf.json :

"build": {
    "beforeBuildCommand": "npm run build && npm run export",
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:3000",
    "distDir": "../dist"
  },

Updated distDir to ../dist

According to my observation , the cargo build with default option which takes the build in dist folder.

I hope my solution creates an opinion about your problem.

[rapiz1]

My investigation and solution:

1. Check the dev URL from the browser. Works as expected.
2. In the tauri app, right click, inspect to find that the HTML source is blank, which indicates a problem in fetching the page.
3. In the network tab of the inspect tool, the request to the page seems to fail, but no more details. Right click the page, reload. See the new request coming out with details.
4. It turns out the webview is going through my system proxy. And my proxy sends localhost to the remote server instead of my local machine(which should blame the proxy for not filtering localhost).

Solution:
Add localhost to the whitelist in my proxy.

BTW, I use KDE and set system proxy via the KDE system setting. Interesting to see tauri automatically respect that, and wonder what will happen in the release mode. If I have a misconfigured proxy as an end user, will tauri still not work?

[FabianLars]

If I have a misconfigured proxy as an end user, will tauri still not work?

Yes, Tauri serves the frontend without any form of server so it will be unaffected. What may break are other network requests via the webview's fetch or tauri's http module.

[ZeeshanAhmadKhalil]

I am able to run the app in development using

yarn tauri dev

but when i am creating build using

yarn tauri build

getting white screen:

Used yarn tauri info to get the following details:

✔] Environment
    - OS: Mac OS 13.4.0 X64
    ✔ Xcode Command Line Tools: installed
    ✔ rustc: 1.72.0 (5680fa18f 2023-08-23)
    ✔ Cargo: 1.72.0 (103a7ff2e 2023-08-15)
    ✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
    ✔ Rust toolchain: stable-aarch64-apple-darwin (default)
    - node: 16.17.1
    - yarn: 1.22.19
    - npm: 8.15.0

[-] Packages
    - tauri [RUST]: 1.4.1
    - tauri-build [RUST]: 1.4.0
    - wry [RUST]: 0.24.3
    - tao [RUST]: 0.16.2
    - @tauri-apps/api [NPM]: not installed!
    - @tauri-apps/cli [NPM]: 1.4.0

[-] App
    - build-type: bundle
    - CSP: unset
    - distDir: ../out
    - devPath: http://localhost:3000/
    - framework: React (Next.js)
    - bundler: Webpack
✨  Done in 19.68s.

Working on this to resolve the issue for the last 6 hrs but the above solutions didn't work for me.

package.json

"scripts": {
    "dev": "next dev",
    "serve": "next serve",
    "build": "next build",
    "export": "next build && next export",
    "start": "next start",
    "lint": "next lint",
    "tauri": "tauri",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
  },

tauri.conf.json

"build": {
    "beforeBuildCommand": "yarn export",
    "beforeDevCommand": "yarn dev",
    "devPath": "http://localhost:3000",
    "distDir": "../out"
  }

[ZeeshanAhmadKhalil]

In my case issue was on the next.js side. I was not creating the pages/index.html file which becomes the entry file index.html after next build && next export.

Due to this reason was getting a white screen. After adding pages/index.html and redirecting to my main app, the issue got resolved.

[PMLS3]

In my case issue was on the next.js side. I was not creating the pages/index.html file which becomes the entry file index.html after next build && next export.

Due to this reason was getting a white screen. After adding pages/index.html and redirecting to my main app, the issue got resolved.

I am also getting the white screen but only in build and not dev... did you just do a clean index.html file in pages?

[✔] Environment
- OS: Mac OS 14.3.0 X64
✔ Xcode Command Line Tools: installed
✔ rustc: 1.75.0 (82e1608df 2023-12-21)
✔ cargo: 1.75.0 (1d8b05cdd 2023-11-20)
✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
✔ Rust toolchain: stable-aarch64-apple-darwin (default)
- node: 20.5.1
- pnpm: 8.14.1
- yarn: 1.22.19
- npm: 10.2.0

[-] Packages
- tauri [RUST]: 1.5.4
- tauri-build [RUST]: 1.5.1
- wry [RUST]: 0.24.7
- tao [RUST]: 0.16.6
- @tauri-apps/api [NPM]: 1.5.3
- @tauri-apps/cli [NPM]: 1.5.9

[-] App
- build-type: bundle
- CSP: default-src 'self'; img-src 'self' asset: https://asset.localhost
- distDir: ../dist
- devPath: http://127.0.0.1:3000/
- framework: React
- bundler: Webpack

[justingolden21]

I'm getting a white screen in my svelte kit app. When I run pnpm tauri info I see: - @tauri-apps/api : not installed! so I'm not sure if that's the problem.