Learn to Code via Tutorials on Repl.it!

← Back to all posts
Convert your web project to a desktop app with Tauri.
Wumi4

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

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.

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:

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

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

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:

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:

Initialize Tauri in your project

Run the following command...

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

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

Which should return something like:

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

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: https://tauri.studio/en/docs/usage/development/debugging

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

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

Voters
365DaysOfCode
DillonB07
Wumi4