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
, thesrc/assets
folder and the svg files frompublic
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 thepackage.json
so you don't need to update it in both files.
- Change the
- 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 thealert()
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
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!
Top comments (2)
Very good tutorial, thank you for taking time to share.
Thank you Terry!