Blog Post
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.
How to Start a Vite React JavaScript App
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 devYour 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 READMEStep 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 devYour 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.