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

created
( modified )
@nabbisen

Series


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

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:

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

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:

tauri-dev

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

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

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

tauri-build-success

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 !!!

Series

Rust
  1. Rust on Arch Linux: Getting started
  2. Rust Tauri (inspired by Electron) 1.3: Getting started to build apps

Comments or feedbacks are welcomed and appreciated.