Create a Simple Desktop App Using Vite, React, and Tauri.js

Update 2024: This post was written in April 2022. While the core concepts may still apply, some details might be outdated. Please refer to the latest Tauri documentation for the most current information.

Hi everyone! In this post, I would like to share how to create a simple desktop app using React, Vite, and Tauri.js. The simple app is a counter (the one that comes with Vite React boilerplate) which we can build into multiple native apps that will run on macOS, Windows, and Linux. But before we get started, I have some things that I want you to note about Tauri:

1. Tauri is relatively new.

   They have just released their first release candidate to the public (v1.0 RC) (2022-Q1). So when you got an issue in development, the perfect place to search or report your issue is their GitHub repository.

2. Tauri uses Rust as their server-side runtime.

   If you need Node.js to be your server-side runtime (like Electron), Tauri is not for you.

Okay, done with all the notes, and let's get started!

Prerequisites

You must have Node.js LTS (> v14.0) installed and got npm / yarn working on your machine. For this post, I will use yarn for installing all the packages we need. Feel free to adapt using your favorite package manager.

Steps

First, create a Vite React app. You can follow the steps from the official documentation or follow my code snippet below:

$ yarn create vite

Fill the project name with your intended project name. Then select react as the framework. For the variant, selects the variant option that you usually use (JavaScript/TypeScript is up to you). I will choose JavaScript for now. Follow the steps that Vite provided for you to install the dependencies and run the app locally.

Setup local environment to install Tauri

Next, we need to set up our local environment to install Tauri in our app. You can see the steps in this official documentation:

• Setting up Tauri for Windows
• Setting up Tauri for macOS
• Setting up Tauri for Linux

Install Tauri to the Vite React app

After that, we can install Tauri dependencies into the app. Follow the steps below:

# first, install Tauri's cli package as devDependencies
$ yarn add -D @tauri-apps/cli

# next, install Tauri's API package as dependencies
$ yarn add @tauri-apps/api

# last, after all of the packages are installed, run Tauri's init command
$ yarn tauri init

Tauri will ask you some questions to configure your app:

• What is your app name?

  Fill the app name with your intended name (or just use the same name as your Vite React app).

• What should the window title be?

  Give the window a title that users can see when they open the app.

• Where are your web assets ... ?

  Change the build location to: ../dist

• What is the URL of your dev server?

  Fill the URL of the dev server with http://localhost:3000

After that, Tauri will automatically create a directory named src-tauri. Inside the directory, we can find many configurations, but we will focus on the tauri.conf.json. Open it and we need to focus on these 2 values:

• build.beforeDevCommand

  The value should be the Vite React app dev command.

• build.beforeBuildCommand

  The value should be the Vite React app build command.

If the key value is the same as this example code below you can proceed to the next steps. If don’t, please modify it according to this example:

{
  "build": {
    "beforeDevCommand": "yarn dev",
    "beforeBuildCommand": "yarn build"
  }
}

After that, we can run the Tauri app in development mode:

$ yarn tauri dev

Wait until the Vite React & Tauri build is finished. After the build is done the Tauri app will automatically appear:

Tara! If this is what you see too, congratulations! You have successfully built a simple native desktop app using Vite, React, and Tauri.js.

You can also debug the production build by running:

$ yarn tauri build

And then there will be a prompt to install the app on your device.

Cross-Platform Builds

Currently, Tauri doesn't support cross-platform builds locally. But thankfully, Tauri has the solution for us. They have created a GitHub action that we can use on our project to do cross-platform builds!

First of all, we need to push the code to a GitHub repository. After that, we can add Tauri’s GitHub action to the project. On the project root directory, create a new folder called .github. Inside it, create a new folder again called workflows. Inside it, you can create your GitHub workflow name. The name is up to you, but the file format must be .yml (e.g release.yml). Then copy this into your workflow file:

name: 'build-and-publish' # name of the workflow
on:
  push:
    branches:
      - main # this workflow is only triggered when there is a new push to the `main` branch.
concurrency:
  group: ${{ github.ref }}
  cancel-in-progress: true

jobs:
  publish-tauri:
    strategy:
      fail-fast: false
      matrix:
        platform: [macos-latest, ubuntu-latest, windows-latest] # the platform you want to build

    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@v2
      - name: setup node
        uses: actions/setup-node@v1
        with:
          node-version: 16
      - name: install Rust stable
        uses: actions-rs/toolchain@v1
        with:
          toolchain: stable
      - name: install dependencies (ubuntu only)
        if: matrix.platform == 'ubuntu-latest'
        run: |
          sudo apt-get update
          sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf
      - name: install app dependencies
        run: yarn
      - uses: tauri-apps/tauri-action@v0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tagName: app-v__VERSION__
          releaseName: 'app v__VERSION__'
          releaseBody: 'See the assets to download this version and install.'
          releaseDraft: true
          prerelease: false

If your main branch is not main, modify the branches value to be your main branch name.

And if you only want to build for some specific platforms you can do that by modifying the platform section. For example, if you only want to build for macOS the value will only be [macos-latest]. Please note that currently there are only 3 platforms that you can build: macos-latest, windows-latest, and ubuntu-latest. After that commit this file and push it to your repository. Check your GitHub repository and wait until the GitHub workflow is finished running.

Navigate to the “Actions” tab on your GitHub repository, and if you see something like the picture above (some lists with a green checkmark icon), it means your build is finished.

After the build is finished, the GitHub workflow will automatically create a draft release that contains our build image and file. To check it, you can navigate to the “Releases” page from your main repository page. And you will see something like this:

That’s it! You have built a simple desktop app that you can download and run it on your local machine. You can now modify the app however you want and just push it to your GitHub repository to build your web app into a native desktop app. You can also see the example repository, here.