Setup React, Vite and Tauri on Windows

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

OR

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