David Jiménez

Posted on Apr 5, 2023 • Edited on Apr 21, 2023

Creating Your First Tauri App with React: A Beginner's Guide

#tauriapp #react

Hello everyone, I'm excited to share with you a tutorial on how to create your first Tauri app with React. My name is David, and I've been creating multiple apps recently with Tauri (and I love it). Tauri is a lightweight and secure Rust framework for creating cross-platform desktop applications. It allows you to use web technologies such as HTML, CSS, and JavaScript/TypeScript to build desktop apps, and supports multiple platforms, including Windows, macOS, and Linux.

In this tutorial, we'll go through the steps to create a Tauri app with React from scratch. I'll assume that you have some basic knowledge of React, although we are not going to do anything complicated. At the end of this tutorial, you'll have created a desktop app that will look like this:

Prerequisites:

Rust: You can download Rust from https://www.rust-lang.org/tools/install
Node.js: You can download Node.js from https://nodejs.org/en/
pnpm: (or your favourite package manager)

Step 1: Creating the Project Structure with create-tauri-app

Tauri provides a powerful cli tool to create projects from scratch. The first step is to create a new Tauri project using the create-tauri-app command. Open your terminal and run the following command:

$ pnpm create tauri-app

NOTE: You can find the correct command for your package manager here

The tool will ask you about the project technologies that you want to use. In my case:

Now let's follow the steps provided in the output:

$ cd tldrawapp
$ pnpm install

With this commands, we have installed the needed dependencies to work in our project.

You can run pnpm tauri dev to compile your project and see the template app working:

Before continuing, let's delete the generated code that we are not interested in. You can use VSCode and two extensions, tauri-vscode, and rust-analyzer, to do so.

The generated project has two important folders:

src: for the frontend (HTML, JS, CSS)
src-tauri: for the backend (rust)

We'll mainly work in src but let's remove some boilerplate from src-tauri:

Remove some code to make src-tauri/src/main.rs simpler. You don't need to do what we are doing, just remove unnecessary code to make it look like this:

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
    tauri::Builder::default()
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Now let's remove unnecessary code from the frontend: icons, default styles and some react code.

Delete src/styles.css, src/App.css, the src/assets folder and the svg files from public folder.
Remove the imports of the styles in the tsx files.
Delete all the content of the App component

Your file structure should look like this now:

And the content in the files:

App.tsx

function App() {
  return <h1>Welcome to Tauri!</h1>
}

export default App;

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

The app should look like this:

Step 2: Install and Use TLDraw

Next, we'll install the TLDraw library for drawing in our Tauri app. In your terminal, run the following command to install the package in the project:

$ pnpm add @tldraw/tldraw -E

We can now import the editor component in our App.tsx file and use it.

App.tsx

import { Tldraw } from "@tldraw/tldraw"

function App() {
  return <div>
    <Tldraw />
  </div>
}

export default App;

With this simple step we can see we have made a great advance in our app:

But it looks ugly for now. Let's add some styles! Create a new file in src:

styles.css

html,
* {
  box-sizing: border-box;
}

body {
  overscroll-behavior: none;
  margin: 0px;
  padding: 0px;
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
}

And then import it from main.tsx:

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles.css";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

The app now looks ✨ amazing ✨ and ready to publish:

NOTE: The app is missing some important styles, but I wanted to keep this simple and easy

Step 3: Set Up the Project for Creating the Executable

Before we can create the executable for our app, we need to configure the Tauri settings in the tauri.conf.json file. Open the file and modify the following configurations:

In the package entry:
- Change the productName field as you want.
- Change the version field to ../package.json: this will make Tauri use the version of the package.json so you don't need to update it in both files.
In the tauri entry:
- allowList: Tauri is a very secure environment for developing apps and it disables some web APIs by default. We must turn on some features for our app to work fine:
- Set dialog API to enable all features (this will allow our app to use the alert() and other related functions
- Change the bundle entry to customize your app identifier
- Modify the windows entry and change the app window title

The final configuration should look like this:
tauri.conf.json

{
  "build": {
    "beforeDevCommand": "pnpm dev",
    "beforeBuildCommand": "pnpm build",
    "devPath": "http://localhost:1420",
    "distDir": "../dist",
    "withGlobalTauri": false
  },
  "package": {
    "productName": "MyApp",
    "version": "../package.json"
  },
  "tauri": {
    "allowlist": {
      "all": false,
      "shell": {
        "all": false,
        "open": true
      },
      "dialog": {
        "all": true
      }
    },
    "bundle": {
      "active": true,
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "identifier": "my.tauri.app",
      "targets": "all"
    },
    "security": {
      "csp": null
    },
    "updater": {
      "active": false
    },
    "windows": [
      {
        "fullscreen": false,
        "resizable": true,
        "title": "My fisrt Tauri App",
        "width": 800,
        "height": 600
      }
    ]
  }
}

NOTE: keep in mind that if you are using a different package manager the first entries might be different.

Step 4: Build the executable

Now that our app is ready, we can generate the executables with:

pnpm tauri build

This will generate a executable file for your OS that you can share with your friends.

Download the code

All the code is available in this github repo :)

dubisdev / tauri-tutorial-tldraw

The repo containing the project with the TLDraw files

Tauri + React Tutorial

This repo contains the code for my Tauri + React Tutorial

View on GitHub

Outro

Thanks for reading this tutorial on creating your first Tauri app with React! I hope you found it helpful. If you have any questions or comments, feel free to leave them below.

If you enjoyed this tutorial, please consider supporting me by giving it a like, sharing it with your friends, or following me on my social media channels. I'll be sharing more tutorials, tips, and tricks on Tauri, React, and other web technologies that you won't want to miss!