Skip to main content

Transform Your Web App to Desktop App in 10 Minutes

· 5 min read

In desktop applications, Electron has long been strong and successful. GitHub Desktop, VSCode, Figma, Notion, Feishu, CapCut, and Dewu are all based on it. But recently, the rising star Tauri has also attracted attention. It solves one of Electron's major pain points - extremely large bundle sizes.

We know that Electron is built on Google's Chromium core. After packaging, no matter how small the application is, it starts at least at 70MB. Tauri uses the operating system's built-in Webview1, dynamically linking to the webview at runtime. This makes its packaging very fast and the packaged applications much smaller.

Tauri differs from Electron in one aspect: Electron uses JavaScript to write backend services, while Tauri uses Rust. Rust has gained tremendous momentum in recent years - it's safer and performs better. Many applications have started embracing Rust, and it will likely become a frontend essential soon.

This article uses Tauri as the framework for building desktop applications. With just a little time, you can transform a Web application into a desktop application.

1. Open a Web Application​

We'll use FocusTide as our conversion target. It's an open-source timer web application on GitHub:

First, let's clone the repository locally:

$ git clone git@github.com:Hanziness/FocusTide.git

Then install and run it:

# Install dependencies
$ yarn install

# Start service at localhost:3000
$ yarn dev

2. Install Tauri Dependencies​

Using Mac as an example, you need to install CLang and macOS development dependencies:

$ xcode-select --install

Install Tauri:

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

This command will install Rustup, which downloads and installs Rust-related dependencies. When installation succeeds, the console will display:

$ Rust is installed now. Great!

Installing Tauri on other operating systems:

  1. Windows: https://tauri.app/v1/guides/getting-started/prerequisites/#windows
  2. Linux: https://tauri.app/v1/guides/getting-started/prerequisites/#linux

3. Integrate Tauri into the Project​

In the web application, first install Tauri-related npm packages:

$ npm install --save-dev @tauri-apps/cli

Add script command to package.json:

"scripts": {
  "tauri": "tauri"
}

Then run Tauri initialization command:

$ npm run tauri init

After executing this command, it will generate the following Tauri project structure in the current web project:

After execution, there will be some questions to answer:

  1. What is your app name? Application name. This will be the official name of the packaged application.

  2. What should the window title be? Default window title. This will be the window title when opening the application. If we don't need this window later, we can hide it using the hiddenTitle field in tauri.conf.json.

  3. Where are your web assets (HTML/CSS/JS) located relative to the < current dir > /src-tauri/tauri.conf.json file that will be created? Production file path. This is the path of the frontend project after building, relative to /src-tauri/tauri.conf.json. FocusTide's build output is in the project's dist folder, so we enter ../dist.

  4. What is the URL of your dev server? Development server URL. FocusTide's development server URL is http://localhost:3000.

  5. What is your frontend dev command? Frontend development command. FocusTide's development command is yarn dev.

  6. What is your frontend build command? Frontend build command. FocusTide's build command is yarn generate.

After execution, src-tauri is generated, and we can run the project:

$ npm run tauri dev

We can see our application running in a window:

4. Build and Release​

If development is complete, we can package the application:

$ npm run tauri build

After executing the build command, the packaged application will be stored in src-tauri/target/release/bundle. As you can see, the package is very small:

During Tauri packaging, it builds according to the current system platform. For example, on Mac it can only package .dmg and .app files, while on Windows it packages .msi and .exe files.

5. Deployment​

After downloading, if we want to make this application public, we need to deploy it. Here we recommend Laf. We can use its cloud storage file management to upload our application and get a download link:

6. Finally​

The entire conversion process is actually very simple and fast. If you spent more than 10 minutes, we apologize. If you want to dive deeper into desktop backend services, check out the Tauri official website.

Finally, I've uploaded the converted FocusTide project to my personal GitHub and named it "Lai Todo". Currently only available for Mac. Welcome to download it 👏🏻

Footnotes​

  1. Tauri vs. Electron: A comparison, how-to, and migration guide: https://blog.logrocket.com/tauri-electron-comparison-migration-guide/ ↩