Getting started with Leptos and Tauri

Tauri & Leptos

I recently had to make a linux app that could ideally also be cross-platform. I know Rust, can code in it (if my colleges are to be believed :p) so I decided to look around.

There are a lot of options but nothing comes as battery included as Tauri and I happen to have a bit of use case of leptos at work and what would you know Tauri supports leptos.

So here is my experience to help someone who decides to follow the same path. We are going to try to use tauri v2 and leptos 0.6.

Setting up tauri with leptos

1. cargo install create-tauri-app --locked
2. cargo create-tauri-app

https://v2.tauri.app/start/create-project/

The setup should now prompt you with name, identifier, language and UI template.

✔ Project name · tauri-app
✔ Identifier · com.tauri-app.app
✔ Choose which language to use for your frontend · Rust - (cargo)
✔ Choose your UI template · Leptos - (https://leptos.dev/)

Building

cargo tauri dev

This should be enough to get you started on desktop, it would start a server and a local app.

Output

Project Structure

tauri-app
├── Cargo.toml
├── src
│   ├── main.rs
│   └── app.rs
├── src-tauri
│   ├── Cargo.toml
│   └── src
│       ├── main.rs
│       └── lib.rs
... so on

The above is a rough project structure that you would get. The tauri-app src contains the UI code in app.rs and main.rs kinda just initializes it.

tauri-app -> app.rs

It should have a pretty interesting piece of code:

#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"])]
    async fn invoke(cmd: &str, args: JsValue) -> JsValue;
}

This is the leptos part of the code, it is the bridge between the leptos frontend and the tauri backend. It works alongside #[tauri::command] (you can find more here).

It works something like: let new_msg = invoke("greet", args).await.as_string().unwrap();. Where does "greet" come from?

src-tauri -> lib.rs

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

Here is where the magic happens. #[tauri::command] is a macro that creates a bridge between the leptos frontend or backend.

Note: “greet” has to be unique name here (Command names must be unique).

Releasing/Distribution

The best part of battery included setup is what you see if what you deliver (mostly).

cargo tauri build --verbose

or on linux NO_STRIP=true cargo tauri build --verbose (see issue and remember to clean /target directory beforehand)

Now you can now find your platform specific executables in tauri-app/target/release/bundle/... that you can give to your friends or enemies.

Conclusion

Well this was pretty short but only because Tauri and Leptos have pretty neat documentation. You can find the code here.