Getting Started with Vite: Create or Migrate Your React Project the Modern Way

davide

Mar 26, 2025 • 2 min read

If you're working with React and still using tools like Create React App (CRA) or Webpack, it's time to explore Vite — the lightning-fast frontend build tool that's changing how we develop modern web applications.

In this post, I’ll walk you through:

✅ What Vite is and why it’s better than CRA
🛠️ How to start a new React project with Vite
🔁 How to migrate an existing CRA/React/Webpack project to Vite

⚡ What is Vite?

Vite (pronounced "veet") is a modern build tool created by Evan You (the creator of Vue.js). It leverages native ES modules in the browser and esbuild for blazing-fast performance during development.

Key Benefits:

Instant dev server start — even in large projects
Lightning-fast HMR (Hot Module Replacement)
Optimized build using Rollup
Simplified configuration

It supports React, Vue, Svelte, Preact, and more — out of the box.

🛠️ Creating a New React Project with Vite

Setting up a new React project with Vite is refreshingly simple.

1. Run the Vite scaffolding command

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

Or with Yarn:

yarn create vite my-app --template react

Or with PNPM:

pnpm create vite my-app --template react

2. Install dependencies

cd my-app
npm install

3. Start the development server

npm run dev

You’ll get a blazing-fast development server running at http://localhost:5173 by default.

4. Build for production

npm run build

The output will be in the dist/ folder, ready for deployment.

🔁 Migrating an Existing React Project to Vite

If you’re using Create React App or Webpack, you can migrate to Vite in a few steps. Here’s a high-level guide:

1. Install Vite and required plugins

Inside your existing project folder:

npm install --save-dev vite @vitejs/plugin-react

2. Create a `vite.config.js`

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

export default defineConfig({
  plugins: [react()],
})

3. Replace CRA/Webpack scripts in `package.json`

Change:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test"
}

To:

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

4. Remove old config files

You can now delete webpack.config.js, .babelrc, or anything CRA-specific.

5. Update paths in `index.html`

Move your public/index.html to the root and update it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

6. Update your entry file if needed

In src/main.jsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

✅ Things to Watch Out For

Environment Variables: Vite uses import.meta.env instead of process.env
Global CSS or Asset imports may need updated paths
Aliases like @ can be configured in vite.config.js via the resolve.alias option

🧪 Bonus: Add TypeScript or TailwindCSS

For TypeScript: use the --template react-ts flag during setup
For TailwindCSS: install via PostCSS, just like you would with CRA

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then configure tailwind.config.js and import the base styles in main.jsx or index.css.

🚀 Conclusion

Vite is an incredibly powerful and fast alternative to traditional build tools like CRA and Webpack. Whether you're starting fresh or migrating an existing project, switching to Vite can dramatically improve your development experience.

Have you tried Vite yet?