DEV Community

nabbisen
nabbisen

Posted on • Originally published at scqr.net

Rust Tauri (inspired by Electron) 1.3: Getting started to build apps

#rust #tauri #cargo #electron

Summary

Tauri is an apps builder "for multi-platform deployment" inspired by Electron based on Node.js and Web technology.

It is written in Rust (rustlang), a general-purpose programming language, aiming at performance, reliability and productivity.

One of the good aspects of Tauri is its bundle size. "By using the OS's native web renderer", the size of apps can be pretty small when built with optimized.
Moreover, there are additional expectations on security, performance, cross platform and independence from front-end frameworks.

This post shows how to install it and create a first app with it.

Environment

Tutorial

Install Rust

Install rustup, the toolchain installer, (with pacman -Sy rustup) and run:

$ rustup default stable
Enter fullscreen mode Exit fullscreen mode

Finally, it printed out as below:

info: using existing install for 'stable-x86_64-unknown-linux-gnu' info: default toolchain set to 'stable-x86_64-unknown-linux-gnu' stable-x86_64-unknown-linux-gnu unchanged - rustc 1.69.0 (84c898d65 2023-04-16)
Enter fullscreen mode Exit fullscreen mode

Besides, when you have some older version, you may have to update it with rustup update.

Install Tauri client

Run:

$ cargo install tauri-cli
Enter fullscreen mode Exit fullscreen mode

The output was:

 Updating crates.io index Downloaded tauri-cli v1.3.0 Downloaded 1 crate (1.2 MB) in 10.18s Installing tauri-cli v1.3.0 (...) Finished release [optimized] target(s) in 17m 08s Installing /(...)/.cargo/bin/cargo-tauri Installed package `tauri-cli v1.3.0` (executable `cargo-tauri`)
Enter fullscreen mode Exit fullscreen mode

Install executable to create Tauri projects 

$ cargo install create-tauri-app
Enter fullscreen mode Exit fullscreen mode

The output was:

 Updating crates.io index Downloaded create-tauri-app v3.4.0 (...) Compiling create-tauri-app v3.4.0 Finished release [optimized] target(s) in 23.91s Installing /(...)/.cargo/bin/cargo-create-tauri-app Installed package `create-tauri-app v3.4.0` (executable `cargo-create-tauri-app`)
Enter fullscreen mode Exit fullscreen mode

Create a first project 

$ cargo create-tauri-app tauri-example
Enter fullscreen mode Exit fullscreen mode

You will be asked:

? Choose which language to use for your frontend › ❯ TypeScript / JavaScript (pnpm, yarn, npm) ❯ Rust (cargo)
Enter fullscreen mode Exit fullscreen mode

As above, the options are:

  • TypeScript (with pnpm / yarn / npm)
  • Rust (with cargo).

I chose Rust.

Then you will be asked:

? Choose your UI template › ❯ Vanilla ❯ Yew (https://yew.rs/) ❯ Leptos (https://github.com/leptosrs/leptos) ❯ Sycamore (https://sycamorers.netlify.app/)
Enter fullscreen mode Exit fullscreen mode

As above, the options are:

I chose Vanilla for simplicity of this tutorial.

The others are another strong candidates, suitable to WebAssembly.

The output was:

Template created! To get started run: cd tauri-example cargo tauri dev
Enter fullscreen mode Exit fullscreen mode

Verify preparation

Enter:

$ cd tauri-example
Enter fullscreen mode Exit fullscreen mode
What are generated

There must be:

$ ls README.md src/ src-tauri/
Enter fullscreen mode Exit fullscreen mode

Above, src contains front-end ui assets like this:

$ ls src assets/ index.html main.js style.css
Enter fullscreen mode Exit fullscreen mode
Test run 
$ cargo tauri dev
Enter fullscreen mode Exit fullscreen mode

The output was:

 Info Watching /(...)/tauri-example/src-tauri for changes... Updating crates.io index (...) Compiling webkit2gtk v0.18.2 Finished dev [unoptimized + debuginfo] target(s) in 1m 57s
Enter fullscreen mode Exit fullscreen mode

Then you will see:

tauri-first-view

It looks nice. Well, it is not enough, because what is shown is nothing more than the Tauri default minimum view.

Click "x" at the right top in the window (or enter Ctrl + c) to quit.

Create custom UI assets

Prepare directory

Run to make the directory for your custom UI:

$ mkdir ui
Enter fullscreen mode Exit fullscreen mode

Now there must be:

$ ls README.md src/ src-tauri/ ui/
Enter fullscreen mode Exit fullscreen mode

Write your first view 

$ nvim ui/index.html
Enter fullscreen mode Exit fullscreen mode

like:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h1>Welcome from Tauri!</h1> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Of course, you may write in your own way comfortably here.

Overwrite Tauri template

We will overwrite src-tauri, especially src-tauri/tauri.conf.json.
Run:

$ cargo tauri init --force
Enter fullscreen mode Exit fullscreen mode

You will be asked as below.
The first two questions are about your app name and its title.

? What is your app name? tauri-example
Enter fullscreen mode Exit fullscreen mode 
? What should the window title be? Tauri Example
Enter fullscreen mode Exit fullscreen mode

Then, you have to specify ../ui at the following questions:

? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf ? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? ../ui
Enter fullscreen mode Exit fullscreen mode 
? What is the url of your dev server? ../ui
Enter fullscreen mode Exit fullscreen mode

The goal is coming !
Set empty at the last two questions, because we don't use TypeScript this moment.

? What is your frontend dev command?
Enter fullscreen mode Exit fullscreen mode 
? What is your frontend build command?
Enter fullscreen mode Exit fullscreen mode

Done.

Run to develop 

$ cargo tauri dev
Enter fullscreen mode Exit fullscreen mode

You will see:

tauri-dev

Build as app

Next, let's run build:

$ cargo tauri build
Enter fullscreen mode Exit fullscreen mode

You will perhaps fail first time as below:

 Error You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`. The default value `com.tauri.dev` is not allowed as it must be unique across applications.
Enter fullscreen mode Exit fullscreen mode

You must fail even if you try to run directly the binary:

$ ./src-tauri/target/debug/tauri-example
Enter fullscreen mode Exit fullscreen mode

tauri-build-failure

Enter Ctrl + c to quit.

Well, why? It's because of the identifier aka domain.

Finally edit to build successfully:

$ nvim src-tauri/tauri.conf.json
Enter fullscreen mode Exit fullscreen mode

like

- "identifier": "com.tauri.dev", + "identifier": "localhost",
Enter fullscreen mode Exit fullscreen mode

Then run

$ cargo tauri build
Enter fullscreen mode Exit fullscreen mode

The output was:

 (...) Compiling webkit2gtk v0.18.2 Finished release [optimized] target(s) in 2m 06s Bundling tauri-example_0.1.0_amd64.deb (/(...)/tauri-example/src-tauri/target/release/bundle/deb/tauri-example_0.1.0_amd64.deb) Bundling tauri-example_0.1.0_amd64.AppImage (/(...)/tauri-example/src-tauri/target/release/bundle/appimage/tauri-example_0.1.0_amd64.AppImage) Finished 2 bundles at: /(...)/tauri-example/src-tauri/target/release/bundle/deb/tauri-example_0.1.0_amd64.deb /(...)/tauri-example/src-tauri/target/release/bundle/appimage/tauri-example_0.1.0_amd64.AppImage
Enter fullscreen mode Exit fullscreen mode

Conclusion

Now you can run your first Tauri app optimized for your platform.

$ ./src-tauri/target/release/tauri-example
Enter fullscreen mode Exit fullscreen mode

tauri-build-success

In addition, AppImage is also available:

$ ./src-tauri/target/release/bundle/appimage/tauri-example_0.1.0_amd64.AppImage
Enter fullscreen mode Exit fullscreen mode

The size of the executable, tauri-example (in src-tauri/target/release/), is just 9.1 MB. 'S wonderful :)

That of the AppImage bundle, tauri-example_0.1.0_amd64.AppImage (in src-tauri/target/release/bundle/appimage/) - "Linux apps that run anywhere", is 120.4 MB.

Happy building apps !!!

Top comments (0)