How to create Mulitwindows in tauri (rust + react + typescript + html + css)?

Question

I am quite new to tauri and its backend, rust. I started developing in visual studio and the development thus far has gone smoothly, until I needed to created physical windows when the user needs to be directed to other sections of the application such as the settings or accessing an AI model from the frontend of the application.

From my understanding in this setup of tauri, Frontend is being handled by Typescript, CSS, HTMl, and React. Backend is being handled by rust.

According to Tauri's official documentation, a window can be opened through three approaches (refer to the Tauri documentation https://tauri.app/v1/guides/features/multiwindow#accessing-a-window-at-runtime) :

1. Statically

The window can be statically added by means of adding an entry in the "windows:" section or block of the tauri.conf.json file provided by the create-tauri-app command when initially creating the tauri project.

tauri.conf.json:

{
  "tauri": {
    "windows": [
      {
        "label": "external",
        "title": "Tauri Docs",
        "url": "https://tauri.app"
      },
      {
        "label": "local",
        "title": "Tauri",
        "url": "index.html"
      }
    ]
  }
}

Runtime approaches

2. Frontend: Javascript/Typescript

A window can be opened by creating a webview instance in the frontend.

Javascript:

import { WebviewWindow } from '@tauri-apps/api/window'
const webview = new WebviewWindow('theUniqueLabel', {
  url: 'path/to/page.html',
})
// since the webview window is created asynchronously,
// Tauri emits the `tauri://created` and `tauri://error` to notify you of the creation response
webview.once('tauri://created', function () {
  // webview window successfully created
})
webview.once('tauri://error', function (e) {
  // an error occurred during webview window creation
})

Typescript:

import { WebviewWindow } from '@tauri-apps/api/window';

const webview = new WebviewWindow('theUniqueLabel', {
  url: 'path/to/page.html',
});

// since the webview window is created asynchronously,
// Tauri emits the `tauri://created` and `tauri://error` to notify you of the creation response
webview.once('tauri://created', () => {
  // webview window successfully created
  console.log('Webview window successfully created');
});

webview.once('tauri://error', (e) => {
  // an error occurred during webview window creation
  console.error('Error creating webview window:', e);
});

3. Backend: Rust

Creating a window using the AppBuilder:: struct either through an App instance, App handle, or tauri command:

App instance:

tauri::Builder::default()
  .setup(|app| {
    let docs_window = tauri::WindowBuilder::new(
      app,
      "external", /* the unique window label */
      tauri::WindowUrl::External("https://tauri.app/".parse().unwrap())
    ).build()?;
    let local_window = tauri::WindowBuilder::new(
      app,
      "local",
      tauri::WindowUrl::App("index.html".into())
    ).build()?;
    Ok(())
  })
  .run(tauri::generate_context!())
  .expect("error while running app");

App handle:

tauri::Builder::default()
  .setup(|app| {
    let handle = app.handle();
    std::thread::spawn(move || {
      let local_window = tauri::WindowBuilder::new(
        &handle,
        "local",
        tauri::WindowUrl::App("index.html".into())
      ).build()?;
    });
    Ok(())
  })

tauri commands:

\#$$tauri::command$$
async fn open_specific_window(handle: tauri::AppHandle) {
let specific_window = tauri::WindowBuilder::new(
&handle,
"external", /\* the unique window label \*/
tauri::WindowUrl::External("https://tauri.app/".parse().unwrap())
).build().unwrap();
}

Note: The command function needs to be an async function to avoid a deadlock on windows. (Refer to this stack to see how this gent solved it: (I am trying to create a new window using Tauri 1.2, Rust, React, and Typescript. I am facing some issues)

My approach

I used the third approach as, intuitively, it looked like the easiest approach to me and it optimize performance in a straight-forward manner. The other two methods worked excellently but the third required extra steps which I will highlight as an answer to this stack. Again, I wanted to use the third approach as I believed that it should have optimized performance and easy implementation. Anyone have a solution other than the one that I will post to this stack?

Also, this is my first stack on stack overflow. I wanted to open this question to aid other in not wasting their time like I did. Any suggestions are welcomed.

I tried the third approach as stipulated in my details of the problem.

Rust command

I created the rust command that creates the window:

#[tauri::command]
async fn open_settings_window(app: tauri::AppHandle) {
    
    let file_path = "src-tauri/src/Views/settings.html";
    
    let _settings_window = tauri::WindowBuilder::new(
        &app,
        "Settings", /* the unique window label */
        tauri::WindowUrl::App(file_path.into()),
    )
    .title("Settings")
    .build()
    .unwrap();

}

Note: It took me ages to figure out that the tauri::WindowUrl::App() only loads html. Please use html files for this.

Calling the rust command from frontend

I called the rust command when the user click on the button (id = settings-button):

Here is the App.tsx file:

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/tauri";
import "./App.css";

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function open_settings() {
    await invoke("open_settings_window") ; 
    console.log("Window was opened") ; 
  }
  async function greet() {
    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
    setGreetMsg(await invoke("greet", { name }));
  }

  async function TerminateApplication() {
    await invoke("terminate_application") ; 
  }

  return (
    
      Welcome to SSLT!

      
       
        
         
        
       
      

       {
          e.preventDefault();
          greet();
        }}
      >
         setName(e.currentTarget.value)}
          placeholder="Enter a name..."
        />
        
      

      {greetMsg}

      
        
        
        
      
    
  );
}

export default App;

Which correctly invoked the rust command and created a file as programmed in the rust command. The only problem is that it does not actually display the contents of the connected typescript in the html file specified.

Contents of the html file:



  
    
    
    
    Tauri + React + TS
  

  
    Hello

If anyone has this problem, please aid. I eventually got the solution...

How to create Mulitwindows in tauri (rust + react + typescript + html + css)?

1. Statically

Runtime approaches

2. Frontend: Javascript/Typescript

3. Backend: Rust

My approach

Rust command

Calling the rust command from frontend

Answers (1)

I eventually found the solution...

Conclusion

Short guide using approach 3

Building the App

Resolving the build issue

Vite additions

In general

Thank you

Related Questions