So, you just make a simple website using your favorite framework, and now you want to turn it into an app. You think of Electron, but you know that Electron is heavy and can make your app run like a memory hog. So what are the alternatives?

Well, in this post, I will show you an introduction to an alternative to Electron: Tauri, and how to use it to turn your website into a fully functional app.

What is Tauri?

From Tauri's official documentation:

Tauri is a polyglot and generic system that is very composable and allows engineers to make a wide variety of applications. It is used for building applications for Desktop Computers using a combination of Rust tools and HTML rendered in a Webview. Apps built with Tauri can ship with any number of pieces of an optional JS API / Rust API so that webviews can control the system via message passing.

In short, it's a tool that helps you build an app with web technology using Webview (your OS's web rendering engine).

Getting started

Note: At the time this post is writing, Tauri is still in beta and only support major desktop platforms (Windows, Mac, Linux).

Setting up the environment

Note: In this tutorial I will use Linux setup, go to this instead if you are using Windows, or this for Mac users.

1. Install system dependencies

# Debian:
sudo apt update && sudo apt install libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    wget \
    libssl-dev \
    libgtk-3-dev \
    squashfs-tools

# Arch:
sudo pacman -Syy && sudo pacman -S  webkit2gtk \
    base-devel \
    curl \
    wget \
    openssl \
    appmenu-gtk-module \
    gtk3 \
    squashfs-tools

# Fedora:
sudo dnf check-update && sudo dnf install webkit2gtk3-devel.x86_64 \
    openssl-devel \
    curl \
    wget \
    squashfs-tools \
    && sudo dnf group install "C Development Tools and Libraries"

2. Node.js

Install Node.js and npm

You are likely to have Node.js and npm already installed on your computer before reading this post. But if you don't, then you can install it from your package manager.

# Debian (Note that I have not tested this on Debian yet, so you may need
# to change the name 'node' to 'nodejs' or something similiar):
sudo apt update && sudo apt install node npm

# Arch:
sudo pacman -Syy && sudo pacman -S nodejs npm

Alternative to npm

You may want to use an alternative of npm, like yarn or pnpm.

Install Rust and cargo package manager

To install Rust and cargo, you can use rustup:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

In case you are using Linux, then you can install it from your package manager:

# Debian (Have not been tested, you may need to change the name of the package):
sudo apt install rust

# Arch:
sudo pacman -S rustup

# Or:
sudo pacman -S rust

To check out if Rust has been installed successfully, run the following command:

> rustc --version
rustc 1.53.0 (53cb7b09b 2021-06-17)

Integrate Tauri into your project

Now we have installed Tauri, let's integrate it into our project.

Install the CLI package

We will install its CLI package as a dev dependency:

cd your_project

# Not required if the project already have package.json
# npm init
# or:
# yarn init

# Run:
npm install -D @tauri-apps/cli
# or:
yarn add -D @tauri-apps/cli

You can also install it as a global dependency, but it is recommended that you install it locally

If you install the package locally, you will need to add tauri into your scripts part in package.json:

{
  // ...
  "scripts": {
    // ...
    "tauri": "tauri"
    // ...
  }
  // ...
}

Initialize Tauri in your project

Run the following command...

# Yarn:
yarn tauri init

# npm:
npm run tauri init

# Global:
tauri init

...will create a new directory in your working directory, called src-tauri, it will look like this:

└── src-tauri
    ├── .gitignore
    ├── Cargo.toml
    ├── rustfmt.toml
    ├── tauri.conf.json
    ├── icons
    │   ├── 128x128.png
    │   ├── 128x128@2x.png
    │   ├── 32x32.png
    │   ├── Square107x107Logo.png
    │   ├── Square142x142Logo.png
    │   ├── Square150x150Logo.png
    │   ├── Square284x284Logo.png
    │   ├── Square30x30Logo.png
    │   ├── Square310x310Logo.png
    │   ├── Square44x44Logo.png
    │   ├── Square71x71Logo.png
    │   ├── Square89x89Logo.png
    │   ├── StoreLogo.png
    │   ├── icon.icns
    │   ├── icon.ico
    │   └── icon.png
    └── src
        ├── build.rs
        ├── cmd.rs
        └── main.rs

Finally, we will check if everything is set up properly by using command tauri info:

# Yarn:
yarn tauri info

# npm:
npm run tauri info

# Global:
tauri info

Which should return something like:

// Comment: I use Arch Linux, don't know why it returns Oracle lol
Operating System - OracleLinux, version Unknown X64

Node.js environment
  Node.js - 16.5.0
  @tauri-apps/cli - 1.0.0-beta.6
  @tauri-apps/api - 1.0.0-beta.5

Global packages
  npm - 7.20.2
  yarn - Not installed

Rust environment
  rustc - 1.53.0
  cargo - 1.53.0

App directory structure
/node_modules
/.vscode
/src
/src-tauri
/public

App
  tauri.rs - 1.0.0-beta.5
  build-type - bundle
  CSP - default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  distDir - ../public
  devPath - http://localhost:5000
  framework - Svelte
  bundler - Rollup

Start development mode

Start your devserver

Start the devserver of your app. This depends on the bundler/framework that you are using.

Start Tauri development window

# Yarn:
yarn tauri dev

# npm:
npm run tauri dev

# Global:
tauri dev

The time you run this command, it will take several minutes for cargo to install and compile all the packages that it needed. Since they are all cached, subsequent builds will be much faster since it only needs to rebuild your code.

Once Rust has finished building, the webview will open, and it should show your app. You can make changes to your web app. If your tooling has hot reloading, then the webview will reload just like a browser. When you make changes to the Rust files, they will be rebuilt automatically and your app will restart.

Debugging

You may run into a problem that requires debugging, for this part, please visit it the App Debugging part from Tauri's official documentation: tauri.studio/en/docs/usage/development/debu..

Build your app

Run your build command

Now you are ready to package your app, you will need to run your bundler/framework's build command (if you are using one)

Bundle your app with Tauri

# Yarn:
yarn tauri build

# npm:
npm run tauri build

# Global:
tauri build

Like tauri dev, this will take some time for Rust to install packages and build everything. But on subsequent builds, this will be much faster.

When it has done building, the binary will be located at src-tauri/target/release/[app name], and its installers will be located at src-tauri/target/release/bundle.

End!

And that's it! You now have learned how to use Tauri to build an app from your web project!

Goodbye and have a nice day! :D