[bug] android dev - "Waiting for your frontend dev server to start on..."

[happybeing]

Describe the bug

I've been working on a Tauri v1 project, and then decided to try v2 beta, so I also created a Tauri v2 project and had the hello world example working there (showing the 'greet' UI).

I then made a copy of my Tauri v1 project and have migrated it to v2 beta and have it working for desktop.

I then decided to try the cargo tauri android dev on the migrated project. I had some issues with it complaining about the app identifier because it contains '-' but eventually cleared those by deleting src-tauri/gen and re-doing cargo tauri android init.

Now, when I do cargo tauri android dev, I get a strange result. Firstly, the emulator starts as normal, but shows the 'greet' example, not my app. And in the console I get the following:

VITE v5.2.6  ready in 722 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
    Warn Waiting for your frontend dev server to start on http://192.168.43.141:5173/...
    Warn Waiting for your frontend dev server to start on http://192.168.43.141:5173/...
    Warn Waiting for your frontend dev server to start on http://192.168.43.141:5173/...
    Warn Waiting for your frontend dev server to start on http://192.168.43.141:5173/...
    Warn Waiting for your frontend dev server to start on http://192.168.43.141:5173/...
    Warn Waiting for your frontend dev server to start on http://192.168.43.141:5173/...
    Warn Waiting for your frontend dev server to start on http://192.168.43.141:5173/...

I don't understand why it is showing the 'greet' example. http://192.168.43.141:5173/ is kindof correct in that this is the local IP of my machine, but I would expect it to us 'localhost'. But anyway, why is the dev server not starting?

I have my app working on desktop, and it feels like I'm very close to having it working on android, but I'm not sure what is going on here. I haven't done android development before so not sure what might cause this.

Reproduction

No response

Expected behavior

My app loads into the Android emulator.

Full tauri info output

cargo tauri info

[✔] Environment
    - OS: Ubuntu 24.4.0 X64
    ✔ webkit2gtk-4.1: 2.44.0
    ✔ rsvg2: 2.58.0
    ✔ rustc: 1.78.0 (9b00956e5 2024-04-29)
    ✔ cargo: 1.78.0 (54d8815d0 2024-03-26)
    ✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
    ✔ Rust toolchain: stable-x86_64-unknown-linux-gnu (environment override by RUSTUP_TOOLCHAIN)
    - node: 22.1.0
    - yarn: 1.22.5
    - npm: 10.7.0

[-] Packages
    - tauri [RUST]: 2.0.0-beta.19
    - tauri-build [RUST]: 2.0.0-beta.15
    - wry [RUST]: 0.39.5
    - tao [RUST]: 0.28.0
    - tauri-cli [RUST]: 2.0.0-beta.12
    - @tauri-apps/api [NPM]: 2.0.0-beta.11
    - @tauri-apps/cli [NPM]: 2.0.0-beta.12

[-] App
    - build-type: bundle
    - CSP: unset
    - frontendDist: ../build
    - devUrl: http://localhost:5173/
    - framework: Svelte
    - bundler: Vite

Stack trace

No response

Additional context

No response

[amrbashir]

From the logs, it seems that Vite is only started on localhost and not on internal IPs, and that's why mobile dev server can't be found. You need something like this https://github.com/tauri-apps/create-tauri-app/blob/2e35db4af381a7955bd56fef8ad27ecc76b16151/templates/template-svelte/vite.config.js.lte#L19-L26

that this is the local IP of my machine, but I would expect it to us 'localhost'.

localhost is local to your computer which is different from the localhost of the android device, so it won't be accessible, this is why you need to expose your vite dev server on internal IPs so the android device can use on of these IPs to connect.

I know the documentation is lacking on this atm but will be available on https://beta.tauri.app/start/frontend-configuration/vite/ before v2 hits stable.

[happybeing]

@amrbashir Thanks for the hints.

There seem to be things used there that aren't in place with my installation. Firstly the {% if mobile %} seem to be conditionals for a pre-processor, but cause errors, so I removed them and just left the mobile settings in that section which now looks like this:

	server: {
		port: 1420,
		strictPort: true,
		host: "0.0.0.0",
		hmr: {
			protocol: "ws",
			host: await internalIpV4(),
			port: 1421,
		},
		watch: {
			// 3. tell vite to ignore watching `src-tauri`
			ignored: ["**/src-tauri/**"],
		},
	},

That gets a little further but vite complains that internalIpV4 is not defined so the server start fails.

I think this issue is due to migration from Tauri v1 because looking in a clean Tauri v2 app the vite.config.js is indeed like the one you suggested, whereas my migrated v1 app just loads the svelte plugin.

So I guess there are a few things missing in the migrated project:

• something that will handle {% if mobile %} in the vite.config.js
• whatever provides interalIpV4

And possibly some other things. Can you suggest the further migration steps that might solve the above?

I can't find an issue that covers this for migration so perhaps it should be re-opened or referenced in a new issue?

[amrbashir]

• something that will handle {% if mobile %} in the vite.config.js

you can ignore that, it is a template pre-processor in create-tauri-app, the snippet you showed above is correct

• whatever provides interalIpV4

You will just need to install internal-ip npm package, make sure to use 7.0.0 as later versions had problems.

Then you can import it import { interalIpV4 } from "internal-ip"

[happybeing]

you can ignore that, it is a template pre-processor in create-tauri-app, the snippet you showed above is correct

I want to build for non-mobile too, so if I hard-code for mobile that won't work. I'd like to migrate my v1 app fully to v2 beta, and some steps are incomplete. So while your suggestions may fix the Android problem I assume they will break my desktop builds.

[amrbashir]

I see, you can just copy this vite config which handles both desktop and mobile

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { internalIpV4 } from "internal-ip";

// @ts-expect-error process is a nodejs global
const mobile = !!/android|ios/.exec(process.env.TAURI_ENV_PLATFORM);

// https://vitejs.dev/config/
export default defineConfig(async () => ({
  plugins: [svelte()],

  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
  //
  // 1. prevent vite from obscuring rust errors
  clearScreen: false,
  // 2. tauri expects a fixed port, fail if that port is not available
  server: {
    port: 1420,
    strictPort: true,
    host: mobile ? "0.0.0.0" : false,
    hmr: mobile
      ? {
          protocol: "ws",
          host: await internalIpV4(),
          port: 1421,
        }
      : undefined,
    watch: {
      // 3. tell vite to ignore watching `src-tauri`
      ignored: ["**/src-tauri/**"],
    },
  },
}));

[happybeing]

Thanks for your help with this but I'm still getting the same error having pasted the above as it is in to vite.config.json:

VITE v5.2.6  ready in 424 ms

  ➜  Local:   http://localhost:1420/
  ➜  Network: http://192.168.43.141:1420/
    Warn Waiting for your frontend dev server to start on http://192.168.43.141:5173/...
    Warn Waiting for your frontend dev server to start on http://192.168.43.141:5173/...
    Warn Waiting for your frontend dev server to start on http://192.168.43.141:5173/...
    Warn Waiting for your frontend dev server to start on http://192.168.43.141:5173/...

[amrbashir]

the above vite example uses port 1420 while your tauri.conf.json has 5173, just change one of them

[Super1Windcloud]

port problem

[Smankusors]

hmm I wonder why on physical devices we can't use localhost/127.0.0.1?

I saw that if we are using emulator, the CLI will automatically "adb reverse", but not the case if we are using physical device.

Why is that?

(My dev PC and my phone are connected to the different networks)