Tauri with ng-app uses local ip instead localhost for accessing dev server

Question

I´m expermenting with Tauri beta app development and have a problem to start my angular project with...

npm run tauri ios dev

In my tauri.conf.json I have the following config section

"build": {
    "frontendDist": "../dist",
    "devUrl": "http://localhost:4200",
    "beforeDevCommand": "npm run start",
    "beforeBuildCommand": "npm run build"
  }

and the output is the following after selecting the simulator device:

Info Starting simulator iPhone 15
Info Using 192.168.0.36 to access the development server.
Running BeforeDevCommand (`npm run start`)

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.
    Warn Waiting for your frontend dev server to start on http://192.168.0.36:4200/...
    Warn Waiting for your frontend dev server to start on http://192.168.0.36:4200/...
    ... and so on

Why does it want to access the dev server via my local ip as I defined my local ip nowhere in the whole source code, because it´s just reachable via localhost?

I also tried to replace my tauri config like this:

"build": {
    "frontendDist": "../dist",
    "devUrl": "http://192.168.0.36:4200",
    "beforeDevCommand": "ng serve --host=192.168.0.36 --port=4200 --disable-host-check=true",
    "beforeBuildCommand": "npm run build"
  }

Then it starts, but always shows a white in-app-screen. So my question is how to avoid local ip to be used for accessing the dev server.

Answer 1

You'd want to configure a dynamic IP address:

import { internalIpV4 } from "internal-ip";

...

const mobile =
  ["android","ios"].indexOf(process.env.TAURI_ENV_PLATFORM) != -1;

...

server: {
    // host: mobile ? "0.0.0.0" : false,
    host: mobile ? await internalIpV4() : false,
    port: 1420,
    hmr: mobile
      ? {
          protocol: "ws",
          host: await internalIpV4(),
          port: 1421,
        }
      : undefined,
    strictPort: true,
  },
...