Introduction

Building desktop apps use to be difficult, first, you would need to know quite a number of languages like Java or C++ and get buried to quite a number of setups which can be wearing. Thankfully as technology progressed, frameworks like ElectronJS came into the picture and simplified the process.
In this article, I’ll introduce you to Tauri, A toolchain for building native desktop apps using any HTML and JavaScript-based front-end framework, such as React, Vue.js, or Angular.

This article will be useful to you if:

• you’ve been building a web or mobile application and want to see how you could create a desktop app with React.Js.
• you have been building applications on the web with HTML, CSS, and JavaScript, and you want to use the same technologies to create apps targeted at Windows, macOS, or Linux platforms.
• you are already building cross-platform desktop apps with technologies like Electron, and you want to check out alternatives.
• you are a Rust enthusiast, and you’d like to apply it to build native cross-platform applications.

We will look at how to build a native cross-platform application from an existing web project. Let’s get to it!
Note: This article assumes you’re comfortable with HTML, CSS, and React.Js.

What is Tauri.js?

The Official Tauri site describes it as;

• A framework for building tiny, blazing-fast binaries for all major desktop platforms.
• It allows a rust-sourced binary with an API that the front-end can interact with.
• Built with Rust and the CLI leverages Node.js, hence making Tauri a genuinely polyglot approach to creating and maintaining great apps. Polyglot in this context means that Tauri uses multiple programming languages such as Rust, JavaScript, and TypeScript.
• A Framework-agnostic toolchain for building highly secure native apps that have tiny binaries (i.e. file size) and that are very fast (i.e. minimal RAM usage).

Simply put, Tauri makes you utilize web technologies to create smaller and secured native desktop apps.

Electron Vs Tauri: Their differences

Electron Js has been around for a while now and as even made mass adoption amongst developers and great companies like Atom, Vscode, and more. In this section, we would compare some features that make Tauri distinct from Electron Js.
This table is from it’s Github page.

We see from the above table that despite the fact that Tauri is pretty new it has some amazing features and even more, while others are in the pipeline.

Benefits of Tauri

The following are the reason you might want to consider using Tauri in your next Desktop app.

• It’s compatible with any JavaScript framework, hence you don’t have to change your stack.
• Its variety of design patterns makes it possible to get started with implementing features with easy configurations.
• Like you saw from the above table, the size of a Tauri app is just 0.60 MB (600 KB).
• Also, the memory consumption of a Tauri app is less than half of an Electron-based app. From the table, it is usually about 13 MB.
• Unlike Electron, relicensing is made possible with Tauri. Apps built with Tauri can be officially shipped into PureOS.
• The flexibility and framework agnostic ability of Tauri makes it possible to turn a web-based code-base into a native desktop app, without altering anything.

Tauri in Action!

Tauri uses Node.js under the hood to scaffold an HTML, CSS, and JavaScript rendering window as a user interface (UI), majorly bootstrapped by Rust.
The outcome is a monolithic binary that can be distributed as common file types for macOS (app/dmg), Windows (exe/MSI), and Linux (deb/app image).

How Tauri Apps Are Made

A Tauri app is created via the following steps:

• First, make an interface in your GUI framework, and prepare the HTML, CSS, and JavaScript for consumption.
• The Tauri CLI takes it and rigs the underlying native code(Rust runner) according to your configuration.
• In development mode, it creates a WebView window, with debugging and Hot Module Reloading.
• In build mode, it rigs the bundler and creates a final application(native installers) according to your settings.

Check out more of its operation on Its site.

Setting Up Your Environment

Now that you know what Tauri is and how it works, let’s do the setups.
We will not be covering environment setups for any OS in this tutorials, but you can check the setup for Windows, macOS, and Linus are also available,
For those using the Windows Subsystem for Linux (WSL) please refer to it’s Linux specific instructions instead.

Implementing Tauri With React.JS

Now that we have Tauri installed, let’s bundle an existing web project.
For this application, we would be using a Money Heist Episode Picker I built with React and Typescript. Read how I built it here.

https://codesandbox.io/s/money-heist-episode-picker-react-and-typescript-web-app-px1qe

Go ahead and fork the repository, which will serve as a shell. After forking it, make sure to clone the fork by running this:

git clone https://github.com/[yourUserName]/React-Desktop-App.git

You can install Tauri as both a local and a global dependency, but in this tutorial, we’ll be installing it locally.
After cloning the project, run the following to install the dependencies:

#Using npm
npm install

#using yarn
yarn

After a successful installation of dependencies, start the server with npm start, your app should start on http://localhost:3000.

Defining Tauri

If you decide to use Tauri as a local package with npm, you will have to define a custom script to your package.json:

    {
      // Add Tauri to the script object
      "scripts": {
        "tauri": "tauri",
        "dev": "npm run tauri dev",
        "bundle": "tauri build",
    }

• Tauri command - defines Tauri and tells your OS, you’re about to create a Tauri based app.
• dev - It enables us to start your app on our local machine.
• bundle - Running this command will build our app for production. Initialize Tauri

We will need to add an src-Tauri directory to the root of your app directory. Inside this directory are files and folders used by Tauri to configure your desktop app.
To initialize Tauri in other for us to have this folder, run;

`npm run Tauri init`

While initializing you’ll be asked a few questions, answers them based on your project scope.
Here’s how mine looks

After it’s done initializing, it will create a src-tauri directory, let’s check out the contents:

└── src-tauri
    ├── .gitignore
    ├── Cargo.toml
    ├── rustfmt.toml
    ├── tauri.conf.json
    ├── icons
    │   ├── 128x128.png
    │   ├── 128x128@2x.png
    │   ├── 32x32.png
    │   ├── icon.icns
    │   ├── icon.ico
    │   └── icon.png
    └── src
        ├── build.rs
        ├── cmd.rs
        └── main.rs

Cargo.toml inside src-tauri/Cargo.toml is like the package.json file for Rust.
It contains configurations for our app. The content of this file is beyond the scope of this tutorial.

##Bundling our app

To bundle Money-Heist for your current platform, simply run this:

#builds our react app
npm run build

#builds the Tauri crates
npm run bundle

Note: The first time you run this, it will take some time to collect the Rust crates and build everything, but on subsequent runs, it will only need to rebuild the Tauri crates which is much quicker.
So go grab some chocolates while it’s building 😎

When the above is completed, you should have a binary of money-heist for your current OS.
Because of the way that Cargo builds its targets, the final app is placed in the following folder:
src-Tauri/target/release/money-heist.
Your’s might be src-tauri/target/release/bundle/[your-app].

Conclusion

In this article we have seen how cool it is to build desktop apps with React utilizing Tauri, I’d like to see what you came up with the comment section.
Lemme know what you think about Tauri.
If you enjoyed the article please let’s connect on twitter

Resources

Why You as a Developer Should be Using a CMS
Headless Commerce Explained: Definitions, Use Cases, and Roadblocks | Agility CMS
APIs vs. SDKs: What's the Difference? | Agility CMS
TOP Static Site Generators to Watch in 2021
Difference between Headless CMS and static site generator
What is Netlify and Why Should You Care as an Editor? | Agility CMS
What is a Headless CMS? | Agility CMS
Benefits of Headless CMS vs a Traditional CMS | Agility CMS
Content Architecture: The Key to Organizing and Managing Your Content and Team
WordPress And Its Alternatives: Headless CMS | Agility CMS
Open Source CMS vs. Proprietary CMS: Can You Have the Best of Both? | Agility CMS
Choosing a React CMS: What to Look For? | Agility CMS
Take control of your Content Architecture: Content Modelling
DXP vs Headless CMS: Modern DXP Architecture
Jamstack Development: 10 JAMstack Pioneers You Need To Know About in 2021