Setup React Vite and Tauri

Introduction

Learn how to setup React, Vite and Tauri

Setup

One of the easiest ways to set up React with Tauri is to use CLI `create-tauri-app`. It will take you through steps and it's awesome.

npm create tauri-app@latest

yarn create tauri-app

There are other ways too, read here React Vite Tauri Apps.

You will see a directory structure something like this. We will cover all these directories in the later part of the blog.

YOUR-APP-FOLDER

public
src
|---|-assets
|---|-App.css
|---|-App.tsx
|---|-.....
|---|-.....
|---|-more files

src-tauri
|---|-icons
|---|-src
      |---|-main.rs  
|---|-target
|---|-Cargo.lock
|---|-Cargo.toml
|---|-tauri.conf.json

package.lock.json
package.json
.......
.......
and more files

If you go inside package.json you will see the following commands

{
  "name": "desktop-app-with-tauri",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "tauri": "tauri"
  },
  "dependencies": {
   .... some deps 
  },
  "devDependencies": {
   .... some dev deps
  }
}

Let's try running npm run dev and you something like this in the console

desktop-app-with-tauri@0.0.0 dev
> vite


  VITE v4.3.9  ready in 925 ms

  ➜  Local:   http://localhost:1420/
  ➜  Network: use --host to expose
  ➜  press h to show help

if you click http://localhost:1420/ it will open up in a new browser Damn !!!. But wait we are creating a desktop application, then why a browser? Well, that's a good question.

In reality, the command should be npm run tauri dev.

Congratulations !!! 😄

In my next blog, we will start building Dashboard Panel

Previous Blog

Setup React, Vite and Tauri on Windows

Learn how to setup React, Vite and Tauri

Introduction

Setup