Hello Tauri

To initialize a new tauri app use the create-tauri-app cli

npm create @tauri-app/latest

Walk through the prompts, then cd into the directory.

cd example

Tauri has a typical modern JavaScript setup, but also has src-tauri directory, let's take a look in there

• src-tauri/
  • src/ contains our Rust code
  • capabilities/ config files to define what the webviews are allowed to do
  • icons/ our app's icons
  • tauri.conf.json main tauri configuration file.
  • Cargo.toml rust dependencies

Commands

Commands are the main way to communicate from the frontend to the backend, over ICP, and expect a response back.

Let's look at the greet command. First Here's how it's used from the frontend.

async function greet() {
  greetMsg.value = await invoke("greet", { name: name.value });
}

invoke() first takes the name of the command, followed by an object of arguments. in this case 'greet' accepts a name field.

Then we can look at the backend in src-tauri/src/lib.rs

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}
 
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Commands are defined using the #[tauri::command] macro, they can take parameters, and return values. In this case it accepts a name as a string slice. And returns a String using the format! macro.
Then the command is registered to our app inside of run() in invoke_handler() making it available to use in the frontend.

Now that we've taken a tour, let's run the app. First install JavaScript dependencies using npm, then run the tauri dev command to start up our app.

npm install
npm run tauri dev

The dev command will both start vite, and build then run the core of our app with cargo. Any changes to the JavaScript code will be reloaded with vite, any changes to rust code or configuration files will rebuild the whole app.