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

nabbisen - May 7 '23 - - Dev Community

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

Image
EXPERT STOLEN CRYPTO RECOVERY SERVICES ONLINE ⁚ HIRE DIGITAL HACK RECOVERY COMPANY
Image
How Accurate Are Tax Calculators For Pakistan?

tax, calculator, pakistan, income
Image
EchoAPI vs. Postman: Why EchoAPI is the Superior Choice for API Management

echoapi, postman, uidesign, webdev
Image
Why 90% of 'Software Engineers' Are Actually Just Code Monkeys

programming, discuss, softwareengineering
Image
Exploring T20Exchanges: Your Ultimate Destination for T20 Cricket Betting
Image
Building a Web Search Engine in Go with Elasticsearch

programming, tutorial, go, elasticsearch
Image
Top 10 SED Use Cases Every Linux User Should Know

bash, sed, cli, devops
Image
web-site judi slots online dengan macam kelebihan
Image
Unleashing the Power of ATVS: Your Ultimate Guide to the Best New Disposable Vapes!
Image
HACK SAVVY TECH // BITCOIN RECOVERY EXPERT ONLINE

technology, bitcoin, crypto
Image
Alpine.js Tips & Tricks for and from and entry level Laravel Developers 🚀

javascript, webdev, beginners, laravel
Image
ANOBOTY
Image
Why You'll Want To Find Out More About Accident Lawyer Near Me
Image
J'ai essayé de passer à Vue.js depuis React.js

vue, react, javascript, typescript
Image
Why Is There All This Fuss About Pedestrian Accident Lawyer?
Image
How to Use Git to Manage Daily Tasks and Schedule Effectively

git, tutorial, productivity, opensource
Image
5 Private Mental Health Care Projects That Work For Any Budget
Image
20 Things You Should Know About Bifold Door Repair
Image
Why Assessment In Mental Health Is Fast Becoming The Hot Trend For 2023
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .