react-tauri-init-macOS.md

HOWTO init a ReactJS-Tauri app in Mac OS

The following instructions have worked for me running Mac OS 11.4.0 X64 with Node.js 16.4.0, Rust 1.53 and Tauri 1.0.0-beta.4.

Init a ReactJS app using npm

First, cd to parent directory where the root directory of the app will be located, ie: /home/me/src. Use the following command to generate the react directory structure:

$ npx create-react-app <app-name>

This will create a directory /home/me/src/app-name with subdirectories node_modules, public and src. The React app source will be in /home/me/src/app-name/src. The package.json will be in /home/me/src/app-name/package.json.

Install Tauri CLI as a dev dependency

Next cd into the app directory (/home/me/src/app-name/src)and run the following command:

$ npm install -D @tauri-apps/cli

Edit package.json to add Tauri hooks when using the npm command

Open package.json and look for the scripts key. From a fresh init using create-react-app it should look like this:

{
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
}

Add the following entries so that it looks like this:

{
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "tauri": "tauri",               // add this line
    "bundle": "tauri build",        // add this line
  },
  ...
}

Init a Tauri inside the React app directory structure

While inside the app directory (/home/me/src/app-name), run the following command:

$ npm run tauri init

This will download some thing and will start an interactive prompt with the following questions (you can change these values later):

1. "What is your app name?" The default value will be the value of name in your package.json. Enter a name or press enter for default.
2. "What should the window title be?" Default value will be your app name. Enter a name or press enter for default.
3. "Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri" folder that will be created?". Default value should be ../build. Enter ../build if this is not the default value.
4. "What is the url of your dev server?" Default value will be http://localhost:3000. Change this to http://0.0.0.0:3000 as recommended in tauri-apps/tauri#1140 (comment).

After answering these questions, it will download a few more things and will install dependencies that are not yet present.

Once finished, a new subdirectory src-tauri should be present inside the app directory, ie. /home/me/src/app-name/src-tauri.

[OPTIONAL] Edit your answers made during npm run tauri init

If you made a mistake or want to change your app name etc. during the previous step, you can change the values by editing the tauri.conf.json file. It should be located inside the src-tauri subdirectory at /home/me/src/app-name/src-tauri/tauri.conf.json.

Edit answers to question number:

1. "What is your app name?" value should be in package -> productName.
2. "What should the window title be?" value should be in tauri -> windows -> title.
3. "Where are your web assets (HTML/CSS/JS) located..." should be in build -> distDir.
4. "What is the url of your dev server?" should be in build -> devPath.

Run a development build of your ReactJS app with Tauri

First, make sure you are not running anything that is using the http://localhost:3000 URL.

Open a terminal window and cd to your React app directory, ie. /home/me/src/app-name. Run your react app with the command:

$ npm start

This will automatically open a browser window pointing to http://localhost:3000 and should show your app. If working from a fresh init from create-react-app, this should show an animated ReactJS logo and the "Edit src/App,js and save to reload" message.

Then, open a different terminal window and cd to your your React app directory again, ie. /home/me/src/app-name. Run a Tauri dev build using the following command:

$ npm run tauri dev

The first time you run npm run tauri dev it'll take a while as it will download and build all of Tauri's Rust dependencies. Subsequent builds should run faster as the dependencies are now built and cached. Once Rust is finished building the dependencies (if running for the first time) and your Rust code, a webview should open displaying your app exactly like what the browser window should previously.

Changes made to the React app will be automatically reflected thanks to the dev server from using create-react-app. Changes made to the Rust code will trigger a rebuild and will restart the app to reflect the changes.

Make a release build of your ReactJS app with Tauri

Open a terminal window and cd to your React app directory, ie. /home/me/src/app-name.

Make a release build your ReactJS app using the following command:

$ npm run build

Then, make a release build of your Tauri app. This will include the release build of the React app you just made. Run the following command:

$ npm run bundle

or

$ npm run tauri build

This will make a release-optimized compilation of the Rust dependencies as well as your Rust code so this will take some time. After compiling, the release build should be located inside /home/me/src/app-name/src-tauri/target/release.

There are a few files of note here.

1. /home/me/src/app-name/src-tauri/target/release/productName where productName was your answer in question 1 during tauri init. This can be launched from the command line.
2. /home/me/src/app-name/src-tauri/target/release/bundle/macos/productName.app will be a Mac OS .app file that you can double-click to launch.
3. /home/me/src/app-name/src-tauri/target/release/bundle/dmg/productName_..._.dmg will be a Mac OS .dmg file that you can double-click to install.

There you have it.