Turn almost any React web application into a desktop app using Tauri

Windows setup

Note: It you already have Rust installed, it is a good idea to update it with $ rustup update stable before skipping to step 6. If you have any of the other things alredy installed, you can skip them as needed. Also, run all the commands from an elevated(administrator) Command Promt The only prerequisite to install Taruri on Windows is Node.js with npm.

1. First, you will need to install Visual studio build tools. You can download the installer from here. Once the file is done downloading, run the file as administratior. Once you accept the license agreement, there will be a menu that comes up that allows you to select which build tools you need. From the workloads section, select C++ build tools and click install. This will take some time depending on your internet speed and computer speed. Once it is done installing, close the installer.
2. Next, install Yarn:

   > npm i yarn
   

3. Then, download and install Rust with its Cargo package manager. 64-bit 32-bit
4. And verify the installtaion:

   > rustc --version
   

5. Enable loopback(this is required for the dev server:

   > CheckNetIsolation.exe LoopbackExempt -a -n="Microsoft.Win32WebViewHost_cw5n1h2txyewy"
   

6. Finally, install Tauri Bundler via Cargo:

   > cargo install tauri-bundler --force
   

   Thats it! The setup is complete. You can now jump to the building app section.

Mac setup

Note: It you already have Rust installed, it is a good idea to update it with $ rustup update stable before skipping to step 6. If you have any of the other things alredy installed, you can skip them as needed. The only prerequisite to install Taruri on Mac(besides Node.js with npm) is homebrew. If you don’t have it installed alredy, you can install it by running:

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

1. Once you have homebrew installed, you need to install the Xcode command line tools. That can be done with the following command:

   $ xcode-select --install
   

2. Next, you will need to install gcc:

   $ brew install gcc
   

3. Then, install Yarn:

   $ npm i yarn
   

4. Now, lets install Rust with it’s Cargo Manager:

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

5. And verify the installtaion:

   $ rustc --version
   

6. Finally, lets install the Tauri Bundler via Cargo:

   $ cargo install tauri-bundler --force
   

   Thats it! The setup is complete. You can now jump to the building app section.

Ubuntu/Debian setup

Note: It you already have Rust installed, it is a good idea to update it with $ rustup update stable before skipping to step 6. If you have any of the other things alredy installed, you can skip them as needed. The only prerequisite to install Taruri on Ubuntu/Debian is Node.js with npm.

1. First, install the required dependencies. This can be done with the following command:

   $ sudo apt update && sudo apt install libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    libssl-dev \
    appmenu-gtk3-module \
    libgtk-3-dev
   

2. Next, install Yarn:

   $ npm i yarn
   

3. Then, install Rust with it’s Cargo Manager:

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

4. And verify the installtaion:

   $ rustc --version
   

5. Then, lets install the Tauri Bundler via Cargo:

   $ cargo install tauri-bundler --force
   

6. Finally, install npx:

   $ npm install -g npx
   

   Thats it! The setup is complete. You can now jump to the building app section.

Building and Bundling the app

1. First, create the app:

   $ npx create-react-app tauri-tutorial
   

2. Next, cd into tauri-tutorial and install Tauri to that app:

   $ yarn add tauri
   

3. Add the following to the scripts section of package.json

   "tauri": "tauri",
   "dev": "npm run tauri dev",
   "bundle": "tauri build",
   

4. Now we have to initalize the Tauri app. That can be done with the following:

   $ npm run tauri init
   

5. Then, we have to tell npm to build our app:

   npm run build
   

6. Finallly, we have to build the binary of our Tauri app:

   npm run bundle
   

   The bundle command will take some time to run the first time it is being run. This is becuase it has to download all the Tauri crates. It will be faster on future runs. Once it is done running, you will find the binaries in the format of the specific os in the folder tauri-tutorial/src-tauri/target/release/bundle.