DEV Community

Cover image for Creating Your First Tauri App with React: A Beginner's Guide
David Jiménez
David Jiménez

Posted on • Updated on

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

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:

app screenshot

Prerequisites:

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
Enter fullscreen mode Exit fullscreen mode

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:

create-tauri-app cli options choosed

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

$ cd tldrawapp
$ pnpm install
Enter fullscreen mode Exit fullscreen mode

bash commands to install the needed dependencies

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:

capture of the boilerplate 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.

tauri-vscode screencapture

rust-analyzer screencapture

The generated project has two important folders:

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

folder structure of the project

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");
}
Enter fullscreen mode Exit fullscreen mode

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:

src file structure

And the content in the files:

App.tsx

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

export default App;
Enter fullscreen mode Exit fullscreen mode

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>
);

Enter fullscreen mode Exit fullscreen mode

The app should look like this:

empty app screenshot

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

first version os the app with the tldraw editor

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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

app screenshot

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
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 :)

GitHub logo dubisdev / tauri-tutorial-tldraw

The repo containing the project with the TLDraw files

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!

dubisdev (David Jiménez) · GitHub

Creating apps :) 📚 SSME Student at URJC 🔧 JavaScript & TypeScript developer 🧠 @AddTodoist - dubisdev

favicon github.com

Top comments (2)

Collapse
 
codinginbarn profile image
Terry

Very good tutorial, thank you for taking time to share.

Collapse
 
dubisdev profile image
David Jiménez

Thank you Terry!