Rust Tauri (inspired by Electron) 1.3: Getting started to build apps
Tags: rust, tauri, cargo, electron
Published: 2023-05-07 00:31:33

## Summary

[Tauri](https://tauri.app/) is an apps builder "for multi-platform deployment" inspired by [Electron](https://www.electronjs.org/) based on [Node.js](https://nodejs.org/) and Web technology.

It is written in [Rust](https://www.rust-lang.org/) (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](https://archlinux.org/))
- Programming Language: Rust [1.69.0](https://blog.rust-lang.org/2023/04/20/Rust-1.69.0.html)
- App Builder: Tauri [1.3.0](https://tauri.app/blog/2023/05/03/tauri-1-3/)

## Tutorial

### Install Rust

Install [`rustup`](https://rustup.rs/), the toolchain installer, (with `pacman -Sy rustup`) and run:

```console
$ rustup default stable
```

Finally, it printed out as below:

```console
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:

```console
$ cargo install tauri-cli
```

The output was:

```console
    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

```console
$ cargo install create-tauri-app
```

The output was:

```console
    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

```console
$ cargo create-tauri-app tauri-example
```

You will be asked:

```console
? 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:

```console
? 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:

- Vanilla
- [Yew](https://yew.rs/)
- [Laptos](https://github.com/leptos-rs/leptos)
- [Sycamore](https://sycamore-rs.netlify.app/).

I chose Vanilla for simplicity of this tutorial.    
The others are another strong candidates, suitable to [WebAssembly](https://webassembly.org/).

The output was:

```console
Template created! To get started run:
  cd tauri-example
  cargo tauri dev
```

#### Verify preparation

Enter:

```console
$ cd tauri-example
```

##### What are generated

There must be:

```console
$ ls
README.md  src/  src-tauri/
```

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

```console
$ ls src
assets/  index.html  main.js  style.css
```

##### Test run

```console
$ cargo tauri dev
```

The output was:

```console
        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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxf75q8vs7w7zums34x6.png)

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:

```console
$ mkdir ui
```

Now there must be:

```console
$ ls
README.md  src/  src-tauri/  ui/
```

#### Write your first view

```console
$ nvim ui/index.html
```

like:

```html
<!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:

```console
$ cargo tauri init --force
```

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

```console
? What is your app name?
tauri-example
```

```console
? What should the window title be?
Tauri Example
```

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

```console
? 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
```

```console
? 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.

```console
? What is your frontend dev command?

```

```console
? What is your frontend build command?

```

Done.

#### Run to develop

```console
$ cargo tauri dev
```

You will see:

![tauri-dev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w56ohnq3568l6uzmmkf0.png)

### Build as app

Next, let's run `build`:

```console
$ 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:

```console
$ ./src-tauri/target/debug/tauri-example
```

![tauri-build-failure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6y494c3n554zvum9tx8q.png)

Enter Ctrl + c to quit.

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

Finally edit to build successfully:

```console
$ nvim src-tauri/tauri.conf.json
```

like

```diff
-     "identifier": "com.tauri.dev",
+     "identifier": "localhost",
```

Then run

```console
$ cargo tauri build
```

The output was:

```console
   (...)
   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.

```console
$ ./src-tauri/target/release/tauri-example
```

![tauri-build-success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1kt2ud5x29z3zj60s09.png)

In addition, [AppImage](https://appimage.org/) is also available:

```console
$ ./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 !!!