Tauri app shows white screen when I run the app

Question

When running a Tauri app it just shows a white screen like this:

I did not make any changes to the app

Here is how I created the app:

npx create-tauri-app

Then I chose React as my frontend framework

Then it created the app and I just cd'd into the folder and ran npm run tauri dev

here is my Tauri config json file:

{
  "$schema": "..\\node_modules/@tauri-apps/cli\\schema.json",
  "build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run start",
    "devPath": "http://localhost:3000",
    "distDir": "../build"
  },
  "package": {
    "productName": "test",
    "version": "0.1.0"
  },
  "tauri": {
    "allowlist": {
      "all": true
    },
    "bundle": {
      "active": true,
      "category": "DeveloperTool",
      "copyright": "",
      "deb": {
        "depends": []
      },
      "externalBin": [],
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "identifier": "com.tauri.dev",
      "longDescription": "",
      "macOS": {
        "entitlements": null,
        "exceptionDomain": "",
        "frameworks": [],
        "providerShortName": null,
        "signingIdentity": null
      },
      "resources": [],
      "shortDescription": "",
      "targets": "all",
      "windows": {
        "certificateThumbprint": null,
        "digestAlgorithm": "sha256",
        "timestampUrl": ""
      }
    },
    "security": {
      "csp": null
    },
    "updater": {
      "active": false
    },
    "windows": [
      {
        "fullscreen": false,
        "height": 600,
        "resizable": true,
        "title": "test",
        "width": 800
      }
    ]
  }
}

score 1 · Answer 1 · answered Jun 14 '22 at 11:29

In case you are still having this issue (or if anyone else has this issue) I had the same issue and it turned out that port 3000 was already being used on my system.

To find what is using the port:

Windows: netstat -ab

OSX: lsof -nP -iTCP -sTCP:LISTEN | grep 3000

If you want to change the port (eg. 4000), update your src-tauri/tauri.conf.json to have the following:

...
"build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run dev -- --port 4000",
    "devPath": "http://localhost:4000",
    "distDir": "../dist"
},
...

Hope this helps.

Tauri app shows white screen when I run the app

1 Answers1