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

1. Open your terminal in your desired project directory.

2. Run the following command to create a Vite React app:

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

3. Install dependencies:

   npm install
   

4. 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:

1. Delete unnecessary CRA files:

   rm -rf node_modules package-lock.json
   

2. Install Vite and dependencies:

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

3. Update the entry point in index.html (remove CRA-specific divs):

   <div id="root"></div>
   

4. Modify your package.json scripts:

   Replace CRA scripts:

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

5. 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.