Introduction

Tauri is a polyglot system for building apps. It uses NodeJS to scaffold an HTML/CSS/JS rendering Window as a User Interface that is bootstrapped and managed by Rust. The final product is a monolithic binary that can be distributed as common file-types for Windows (exe/msi), Linux (deb/appimage) and Macintosh (app/dmg).

How it all works

  1. First you make an interface in your GUI framework and prepare the HTML/CSS/JS for consumption
  2. The tauri.js Node CLI takes it and rigs the rust runner according to your configuration.
  3. In dev mode it creates a webview window with debugging and hot-module-reloading.
  4. In build mode it rigs the bundler and creates a final application according to your settings.

Setting up Your Environment

We are assuming that you know what the command line is, how to install packages on your operating system and generally know your way around the development side of computing. Obviously, you must first make sure that all required languages / compilers are available and in your PATH. Then you globally install the Tauri CLI with your Node package manager.

Initializing an App

The initialization phase creates a folder and places a few template files into your project directory. The most important file that it creates is the src-tauri/tauri.conf.json file, as this is where you manage the configuration of your project.

Developing an App

There are several methods for developing an App and using the built-in development App Window. The most common is to point the Tauri configuration at a localhost port that your front-end framework’s development server provides you with. If your framework doesn’t provide you with this, or you like everything vanilla, then you can instruct Tauri to serve (and transpile if needed) from a relative file path. In both cases you will have HMR (Hot Module Reloading).

Making App Icons

Your app will need icons, and Tauri also provides a command for making all the icons your app will need, no matter which platform you are using. Simply place a 1240x1240 png (with transparency) named app-icon.png in your project folder (where the src-tauri/tauri.conf.json file is to be found) and run tauri icon. The icons will be placed in src-tauri/icons and automatically consumed by Tauri during the build process.

Bundling an App

The basic process of building a Tauri App is very straightforward and unopinionated. In the Tauri configuration file you reference a distribution folder e.g. ../dist/spa where your HTML, CSS, JS and other assets can be found. Then you tell the Tauri CLI to build your app. Tauri prepares your code depending upon your configuration and bundles everything up into a nice and tidy binary.

TIP

The first time you build a project it will take some time to collect the resources that Tauri needs from the relevant Rust Crates, but subsequent builds will be much faster.

Technical Details

CLI

The CLI is node.js based, because it is arguably the most accessible for the majority of the web-development community. Using Tauri requires the latest LTS because we track security patches.

User Interface

The first generation User Interface in Tauri apps leverages Cocoa/WebKit on macOS, gtk-webkit2 on Linux and MSHTML (IE10/11) or Webkit via EdgeHTML / Chakra on Windows. Tauri leverages the MIT licensed prior work known as webview and web-view.

WARNING

We are currently working on enabling the Web APIs and most of them may not be available on your platform.

The Templates

First is the src-tauri/tauri.conf.json file - it is injected into the CWD at tauri init.
Then is the src-tauri folder, which is injected into the CWD and contains the base Rust application that you can extend as you wish.

The node CLI has a bunch of “syntactic” sugar that sets up the dev env or prepares assets for the bundle process (as well as the tauri icon command for making icons.)

The next piece is the actual rust crate that binds web-view, constructs the webview and has the API (file read / write, etc.)
Finallly, the bundler, which takes all the pieces and puts them together in a nice and easy to consume binary for the three 1/2 desktop OS’s

Why Rust

Rust is blazingly fast and memory-efficient: with no runtime or garbage collector, it can power performance-critical services, run on embedded devices, and easily integrate with other languages. Rust’s rich type system and ownership model guarantee memory-safety and thread-safety — and enable you to eliminate many classes of bugs at compile-time. Rust has great documentation, a friendly compiler with useful error messages, and top-notch tooling — an integrated package manager and build tool, smart multi-editor support with auto-completion and type inspections, an auto-formatter, and more. - https://www.rust-lang.org/

This combination of power, safety and usability are why we chose Rust to be the default binding for Proton. It is our intention to provide the most safe and performant native app experience (for devs and app consumers), out of the box.

If you want a deep and rather nerdy look into Rust, check out what insider Tony Arcieri has to say in his article, Rust in 2019. Security, maturity, stability

Learning Rust 🦀❤️

You don’t need to know Rust at all to use (most of) Tauri - but as with all things, the rabbit hole goes as deep as you are willing to fall into it. If you are new to Rust, then we recommend first watching this amazing playlist of tutorials from Team Member @tensor:

But if you are like us, just watching awesome people do stuff isn’t enough. That’s why we absolutely MUST recommend that you immediately curlbash Rustlings:

curl -L https://git.io/rustlings | bash

Why? Because it is an interactive leap into coding with Rust that forces you to solve compiler errors in order to progress in your understanding. It is addictive, so block a few hours and just do it!

At some point, learning about Rust will require a visit to the manual. Check it out:

And finally, there are a couple Rust communities on Discord that you can always fall back on if you need estra support:


CONTACT
NETWORK