Reach frontend from other devices

[grand prism]

I have a SvelteKit app running in Tauri and I want to expose it to other devices in my local network using the IP of the host, e.g. http://192.168.178.56:5173 where 5173 is the post the Svelte frontend should be running at.

Not sure how Tauri actually starts the server but I gues it's this part in taudi.conf.json:

"build": {
   "beforeDevCommand": "npm run dev",
   "devUrl": "http://localhost:5173",
   "beforeBuildCommand": "npm run build",
   "frontendDist": "../build"
},

So I changed my dev command in package.json and added the --host flag:

"scripts": {
   "dev": "vite dev --host",
}

This should let vite expose the server and it works fine in development but not in Tauri.

Do I have to do something extra in Tauri to enable that?

[fiery ridge]

This should let vite expose the server and it works fine in development but not in Tauri.
Just so we're on the same page, with development you mean tauri dev and there it works?

Not sure how Tauri actually starts the server
there's no server outside of development.

You'll either need your own server (for full control) or use the localhost plugin https://v2.tauri.app/plugin/localhost/ (you'll have to use the device ip or 0.0.0.0 instead of localhost).
If you also need tauri apis to work then you need tauri-invoke-http but not sure if or how well that works in v2.

[grand prism]

I meant npm run dev, so just the vite config without Tauri. Okay thanks, I’ll try the localhost plugin and hope it won’t collide with one that we need for Azure AD.

[grand prism]

@fiery ridge How do I set this up correctly? I tried:

// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
use tauri::{webview::WebviewWindowBuilder, WebviewUrl};

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    let port: u16 = 5173;

    tauri::Builder::default()
        .plugin(tauri_plugin_localhost::Builder::new(port).build())
        .setup(move |app| {
            let url = format!("http://0.0.0.0:{}", port).parse().unwrap();
            let window = WebviewWindowBuilder::new(app, "main".to_string(), WebviewUrl::External(url))
                .title("My Title")
                .inner_size(1400.0, 1024.0)
                .build()?;
            Ok(())
        })
        .plugin(tauri_plugin_shell::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

but then the WebView just shows an error "The webpage at http://0.0.0.0:5173 might be having issues, or it may have moved permanently to a new web adress.

I can't enter the local IP (like 192.168.178.42) at compile time because I don't know it yet.

In vite, you simply append --host and it will take care of everything and host on both localhost and the network IP:

npm run dev              

> @my-proj@1.7.1 dev
> vite dev --host

  VITE v6.2.0  ready in 2404 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.178.30:5173/
  ➜  Network: http://192.0.2.42:5173/
  ➜  press h + enter to show help

That's basically what I need in Tauri.

[fiery ridge]

i misremembered how it works. you have to change this rs tauri_plugin_localhost::Builder::new(port).build() to something like this rs tauri_plugin_localhost::Builder::new(port).host("0.0.0.0").build()

[magic marlin]

@fiery ridge is this method help to run the app in local network with shared database (admin and users )

[grand prism]

Sorry, I have no idea what I'm doing in Rust 😄 So how exactly do we set the host on the localhost plugin?

[grand prism]

Fixed it by modifying the plugin which has localhost hardcoded - AI helped me to understand the Rust 👽 code:

• create a src-tauri/plugins/localhost dir with Cargo.toml at the root and src/lib.rs
• copy the original Cargo.toml from the plugin
• copy&paste the original lib.rs and change the line with hardcoded localhost to let server = Server::http(format!("0.0.0.0:{port}")).expect("Unable to spawn server");
• in your main Cargo.toml change tauri-plugin-localhost = {version = "2"} to tauri-plugin-localhost = {path = "./plugins/localhost"} to use the modified local plugin instead