Migrating from Create React App to Vite: A Developer's Guide
Hey there, fellow developers! 👋
Recently, I took on the challenge of migrating a production React application from Create React App (CRA) to Vite. The results? Our build times plummeted from 3+ minutes to just 20 seconds! 🚀
In this guide, I'll walk you through the entire migration process, including a crucial tip about handling JSX in JavaScript files that could save you hours of debugging.
🎯 Why Switch to Vite?
Before diving into the technical details, let's look at why you might want to make this switch. Our team saw some impressive improvements:
| Metric | Before (CRA) | After (Vite) |
|---|---|---|
| Dev Server Startup | 30s | 2s |
| Hot Module Replacement | 2-3s | <100ms |
| Production Build | 3+ min | 20s |
| Bundle Size | 100% | 85% |
Plus, you get these awesome features:
- ⚡️ Lightning-fast HMR
- 📦 No bundling in development
- 🔧 Simpler configuration
- 🛠 Better error messages
- 💪 Native TypeScript support
🚀 Migration Steps
1. Prepare Your Project
First, create a new branch:
git checkout -b feature/migrate-to-vite
2. Update Dependencies
Remove CRA and add Vite:
# Remove CRA dependencies
npm uninstall react-scripts @craco/craco
# Install Vite and related dependencies
npm install -D vite @vitejs/plugin-react
3. Configure Vite
Create vite.config.js in your project root:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [
react({
// 🔑 Key configuration for .js files with JSX
include: "**/*.{jsx,js}",
}),
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
server: {
port: 3000,
open: true,
},
build: {
outDir: 'build',
sourcemap: true,
},
});
Important: The
include: "**/*.{jsx,js}"configuration is crucial! Without this, Vite only processes JSX in.jsxfiles.
4. Environment Variables
Vite handles environment variables differently:
- Keep your
.envfiles - Rename variables from
REACT_APP_toVITE_
- Update references:
// Before (CRA)
process.env.REACT_APP_API_URL
// After (Vite)
import.meta.env.VITE_API_URL
5. Update Package Scripts
Replace scripts in package.json:
{
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "vite preview",
"test": "vitest",
"lint": "eslint src --ext .js,.jsx"
}
}
6. Move index.html
- Move
public/index.htmlto root - Update it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your App Name</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>
🚧 Common Challenges and Solutions
1. JSX in .js Files
This is usually the first hurdle. You have two options:
Option 1: Configure Vite (Recommended)
Add the include option as shown in the config above.
Option 2: Rename Files
# Unix/Linux command to rename files
find src -name "*.js" -exec sh -c 'mv "$1" "${1%.js}.jsx"' _ {} \;
2. Absolute Imports
Update vite.config.js:
resolve: {
alias: {
'@components': '/src/components',
'@assets': '/src/assets',
'@utils': '/src/utils'
}
}
3. SVG Support
Install and configure vite-plugin-svgr:
npm install -D vite-plugin-svgr
import svgr from 'vite-plugin-svgr';
export default defineConfig({
plugins: [react(), svgr()],
// ...
});
✅ Migration Checklist
Before committing:
- [ ] Development server starts
- [ ] Hot Module Replacement works
- [ ] Environment variables are accessible
- [ ] Build process succeeds
- [ ] Import paths resolve correctly
- [ ] SVG and assets load
- [ ] CSS modules work
🎉 Conclusion
While migrating from CRA to Vite might seem daunting, the performance gains make it worthwhile. Remember:
- Configure JSX processing for
.jsfiles early - Update environment variables
- Verify import paths
- Test thoroughly
Have you migrated your React app to Vite? What challenges did you face? Share your experiences in the comments!
Found this helpful? Follow me for more React and JavaScript tips!
I'll be actively responding to comments and questions. Let me know if you need any clarification on the migration process!
SOCIAL SHARE CARD GENERATOR