Create a react application using cra(create-react-app) and then include a tauri(Change cra to tauri app).

Prepare

  1. Install webview2(on windows), rust and node
  2. Install package manager cargo and yarn

Create react app

Create a normal cra with ts template.

1
yarn create react-app <app name> --template typescript

Add tauri dependencies

  1. yarn install @tauri-apps/cli
  2. yarn install -D @tauri-apps/api

Init tauri project

You can select all options as default.

1
yarn tauri init

Set tauri config

Startup react before running tauri, and build react before build tauri application.

  1. Open src-tauri/src/tauri.conf.json
  2. Set build.beforeDevCommand to yarn start or other command to start react dev server.
  3. Set build.beforeBuildCommand to yarn.build or other command to build react to distdir.

Start tauri in node

Set scripts to start tauri in react app.

  1. Open package.json and add scripts.

    1
    yarn tauri dev

  2. Rust will build your package which defined in Cargo.toml.

    It will download dependencies using cargo first time, take a rest. Set another cargo registry may quickly.