1. Create React App (CRA) vs Vite
| CRA (Create React App) | Vite | |
|---|---|---|
| Dev Server Speed | Slow, needs to build everything before starting | Very fast, builds only what is needed |
| Production Build Speed | Slower, especially in large projects | Much faster thanks to modern tools |
| Bundler | Webpack | Rollup (for prod) + esbuild (for dev) |
| Config Flexibility | Hidden by default, hard to customize | Easy to configure with vite.config.ts |
| TypeScript Support | Supported, but setup can be tricky | Excellent support, easy to use |
| Plugin Ecosystem | Large (many Webpack plugins available) | Smaller but growing fast, based on Rollup |
| Code Splitting | Available, but setup is more complex | Built-in and easy to use |
| HMR (Hot Module Replace) | Available but slower | Very fast and smooth |
| Community & Docs | Big community, lots of tutorials | Newer but growing quickly |
| Scalability | Works, but can get messy over time | Easy to scale and maintain |
| SSR Support | Not supported out of the box | Supported via plugins/frameworks |
| Stability | Very stable, used in many production apps | Stable, but still evolving |
| React Version Support | May take time to support new React features | Usually quick to adopt new React features |
| Final Bundle Size | Usually larger due to less optimized build | Smaller thanks to better tree-shaking and build tools |
- CRA: Good if you want something simple and stable with no need to change configs.
- Vite: Great for new projects where speed, flexibility, and modern tools are important.
2. Migrate from CRA to Vite 🚀
A simple step-by-step guide to move your React project from CRA to Vite.
Step 1: Backup your project
Before anything, commit your current code or copy the folder to a safe location.
Step 2: Clean up CRA-specific files
Delete CRA-generated files:
bash
rm -rf node_modules build rm public/index.html
⚠️ Don't delete the entire public/ folder yet
You may have images, icons, or manifest.json there.
Step 3: Install Vite and required packages
bash
# Using npm npm install --save-dev vite @vitejs/plugin-react # Using yarn yarn add -D vite @vitejs/plugin-react
If you use TypeScript, also make sure:
bash
# Using npm npm install --save-dev typescript # Using yarn yarn add -D typescript
Step 4: Create Vite config
Create a file vite.config.js (or vite.config.ts for TypeScript):
js
import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react()], });
Step 5: Create a new index.html file
In the root directory (not in public/), create a new file called index.html:
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html>
If your entry file is main.tsx, change the script path accordingly.
Step 6: Update package.json scripts
Remove old CRA scripts and add Vite scripts:
json
{ "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" } }
Step 7: Move static assets (optional)
If you have static files in public/ like:
-
logo.png -
manifest.json -
favicon.ico
Move them to src/assets/ (recommended) and import them:
jsx
import logo from "./assets/logo.png";
Or, you can keep them in public/ — Vite will still serve them as-is under / path.
📌 Note: Vite only supports static serving from public/, not HTML injection. Don't place index.html there.
Step 8: Update environment variables
Update your .env variables like this:
bash
REACT_APP_API_ENDPOINT=https://shibadev.asia REACT_APP_PORT=9999
to
bash
VITE_API_ENDPOINT=https://shibadev.asia VITE_PORT=9999
And update usage in code:
js
import.meta.env.VITE_API_ENDPOINT; import.meta.env.VITE_PORT; // Example const api = import.meta.env.VITE_API_ENDPOINT;
Step 9: Run the app
Start the dev server:
bash
npm run dev
Step 10: Final Checks
-
Check for console errors.
-
Check image imports and environment variables.
-
Test routes if using React Router.
-
Check for TypeScript issues if applicable.
3. Conclusion
You’ve successfully migrated to Vite — enjoy faster builds and a smoother development experience!
