Creating Your First Tauri App with React: A Beginner's Guide
Tags: tauriapp, react
Published: 2023-04-05 14:44:03

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3g8i3krkddm8inpgnd6q.png)



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

```bash
$ pnpm create tauri-app
```

> NOTE: You can find the correct command for your package manager [here](https://tauri.app/v1/guides/getting-started/setup/)

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


![create-tauri-app cli options choosed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmj9788b7yyiavj5sge4.png)

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

```bash
$ cd tldrawapp
$ pnpm install
```

![bash commands to install the needed dependencies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74sax3m70uec1oi1d9cy.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdupz0mb7hprxkeo546p.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqwmmqwffg8et8jdxs4x.png)

![rust-analyzer screencapture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxpqksvk902oc77co9nx.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tflkb7xzxpdrziz70uy1.png)

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:

```rs
// 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:

![src file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ao3xsf5m66feu5bl9dsn.png)

And the content in the files:

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

export default App;
```

`main.tsx`
```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:

![empty app screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w37hkb4o0t7pim9s0j5b.png)

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

```bash
$ pnpm add @tldraw/tldraw -E
```

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

`App.tsx`
```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:

![first version os the app with the tldraw editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te16q6m0egvlql3cbbj6.png)

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

`styles.css`
```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`
```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:

![app screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2zrq39922uew6a3yg51j.png)

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

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

{% embed https://github.com/dubisdev/tauri-tutorial-tldraw %}

## 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!

{% embed https://github.com/dubisdev %}

{% embed https://dubis.dev %}

{% embed https://twitter.com/@dubisdotdev %}