How to Start a Vite React JavaScript App

Feb 2025

How to Start a Vite React JavaScript App

Vite is the modern, faster alternative to Create React App (CRA), which is now considered legacy code. This guide walks you through setting up a React JavaScript project using Vite and explains how to migrate an existing CRA project.

Why Use Vite Instead of Create React App?

⚛️ Faster Startup: CRA uses Webpack, which slows down the dev server, while Vite uses ES modules and Rollup-based bundling for near-instant hot reloading.
⚛️ Fewer Dependencies: CRA installs unnecessary dependencies, whereas Vite provides a lightweight setup with just what you need.
⚛️ Built-in Hot Module Replacement (HMR): Instant updates without a full page reload.
⚛️ Optimized Production Builds: Vite uses advanced optimizations for smaller and faster production builds.
⚛️ Better DX (Developer Experience): Simpler configuration and easier integration with modern frameworks.

Step 1: Create a New Vite React Project

Open your terminal in your desired project directory.

Run the following command to create a Vite React app:

npm create vite@latest my-vite-app -- --template react
cd my-vite-app

Install dependencies:
```
npm install
```

Start the development server:
```
npm run dev
```
Your React app will now be running at http://localhost:5173/.

Step 2: Understanding the Vite Project Structure

When you open your my-vite-app folder, you'll see the following structure:

my-vite-app/
├── node_modules/
├── public/
├── src/
│   ├── App.jsx  # Main React component
│   ├── main.jsx  # Entry file for the app
│   ├── index.css  # Global styles
│   └── assets/  # Static assets
├── .gitignore  # Git ignore file
├── index.html  # Root HTML file
├── package.json  # Project dependencies & scripts
├── vite.config.js  # Vite configuration file
└── README.md  # Project README

Step 3: Migrating a CRA Project to Vite

If you have an existing Create React App (CRA) project and want to switch to Vite, follow these steps:

Delete unnecessary CRA files:
```
rm -rf node_modules package-lock.json
```

Install Vite and dependencies:

npm create vite@latest . -- --template react
npm install

Update the entry point in index.html (remove CRA-specific divs):
```
<div id="root"></div>
```

Modify your package.json scripts:

Replace CRA scripts:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

Start your Vite server:
```
npm run dev
```

Your project has now been successfully migrated from CRA to Vite!

Conclusion

Vite is a great replacement for Create React App, offering faster build times, a better developer experience, and optimized production output. Whether you're starting a new project or migrating an old CRA setup, switching to Vite is an easy way to improve your workflow.

← Back to posts