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
- OS: Artix Linux (based on Arch Linux)
- Programming Language: Rust 1.69.0
- App Builder: Tauri 1.3.0
Tutorial
Install Rust
Install rustup, the toolchain installer, (with pacman -Sy rustup) and run:
$ rustup default stable
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)
Besides, when you have some older version, you may have to update it with rustup update.
Install Tauri client
Run:
$ cargo install tauri-cli
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`)
Install executable to create Tauri projects
$ cargo install create-tauri-app
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`)
Create a first project
$ cargo create-tauri-app tauri-example
You will be asked:
? Choose which language to use for your frontend ›
❯ TypeScript / JavaScript (pnpm, yarn, npm)
❯ Rust (cargo)
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/)
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
Verify preparation
Enter:
$ cd tauri-example
What are generated
There must be:
$ ls
README.md src/ src-tauri/
Above, src contains front-end ui assets like this:
$ ls src
assets/ index.html main.js style.css
Test run
$ cargo tauri dev
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
Then you will see:
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
Now there must be:
$ ls
README.md src/ src-tauri/ ui/
Write your first view
$ nvim ui/index.html
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>
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
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
? What should the window title be?
Tauri Example
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
? What is the url of your dev server?
../ui
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?
? What is your frontend build command?
Done.
Run to develop
$ cargo tauri dev
You will see:
Build as app
Next, let’s run build:
$ cargo tauri build
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.
You must fail even if you try to run directly the binary:
$ ./src-tauri/target/debug/tauri-example
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
like
- "identifier": "com.tauri.dev",
+ "identifier": "localhost",
Then run
$ cargo tauri build
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
Conclusion
Now you can run your first Tauri app optimized for your platform.
$ ./src-tauri/target/release/tauri-example
In addition, AppImage is also available:
$ ./src-tauri/target/release/bundle/appimage/tauri-example_0.1.0_amd64.AppImage
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 !!!