Learn How to Set Up Your React App with Vite Today

If you have ever used Create React App (CRA), you are aware that it can be a slow process. It takes a while to start, and it reloads slowly after you make changes.

Vite is not like that. It’s incredibly quick. The browser instantly updates when you make changes to your code. This is known as Hot Module Replacement, or HMR.

Consider it this way: Vite is like teleporting to work instantly, whereas CRA is like walking slowly!

What Do You Need?

Make sure you have Node.js installed before beginning (v16 or higher is ideal). A code editor such as Visual Studio Code, and a fundamental understanding of using the terminal to run commands

That’s it! Nothing more is required of you.

Step 1 – Create Your Project

Open your terminal and type:

# Create a new React Vite app
npm create vite@latest my-react-app

It will ask you a few questions:

1. Project name – pick any name, like my-react-app
2. Framework – choose React
3. Variant – pick JavaScript or TypeScript

This sets up a fresh React project using Vite.

Step 2 – Install and Explore

Go into your project folder and install the packages:

# Navigate to the project folder
cd my-react-app

# Install project dependencies
npm install

Here’s what your project looks like:

my-react-app/
├─ index.html       <- Main HTML file
├─ package.json    <- Project info and dependencies
├─ vite.config.js   <- Vite settings
└─ src/
   ├─ main.jsx     <- React starting point
   └─ App.jsx      <- Main React component

These are the files you’ll mostly work with at the start.

Step 3 – Run Your App

Start the app with:

# Start the development server
npm run dev

Open the URL, it shows (usually http://localhost:5173).

Modify something in App.jsx, and the browser will update immediately. You will save a great deal of waiting time with Vite’s lightning-fast HMR.

Step 4 – Vite Configuration (Optional)

Vite comes with a simple config file: vite.config.js.

Here’s an example:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
  base: './',
})

You can use it to:

• Change the port your app runs on
• Add extra plugins
• Set a base path for production

Most of the time, you don’t need to change anything at the start.

Step 5 – Build for Production

When your app is ready to go live, run:

# Build the project for production
npm run build

This generates a dist/ folder containing all the files required for your application to function. It’s similar to organizing your app for the web.

Summary

Using Vite instead of CRA makes React development:

• Much faster
• Easier to set up
• Fun because you see changes instantly

With Vite, you can now begin your React journey and benefit from a lean project structure, quicker workflow, and instant feedback.

Also Read

Django vs Flask: Which Python Framework Should You Choose?

Complete Guide to Joi Database: Features, Security, and FAQs

How to Create Tables in MySQL: Step-by-Step Tutorial

Fix JSONDecodeError: Expecting Value at Line 1 Column 1 (char 0)

FAQs