How to Migrate Create React App (CRA) Project to Vite (Plain JavaScript)

Niranjan SinghNiranjan Singh
3 min read

Table of contents

If you're planning to migrate your existing React project made with Create React App (CRA) and you're using plain JavaScript, you're in the right place. In this guide, we’ll walk through the exact steps to move your CRA project to Vite — quickly and smoothly.

🧭 Why Vite?

Vite offers:

  • ⚡️ Lightning-fast dev server

  • ✨ Instant module hot reloading (HMR)

  • 🛠️ Simpler config and better build performance

📁 Step 1: Navigate to Your Project Directory

Open your terminal (e.g., Git Bash) and go to the root of your CRA project:

cd ~/ReactChat/chat-app

🧹 Step 2: Clean Up CRA Artifacts

Delete existing CRA-generated files:

rm -rf node_modules build package-lock.json

Uninstall CRA-related packages:

npm uninstall react-scripts

✅ Optionally, remove CRA-specific testing packages:

npm uninstall @testing-library/* jest

⚙️ Step 3: Install Vite & React Plugin

Install the Vite dev server and React plugin:

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

📝 Step 4: Update package.json Scripts

Replace the CRA scripts with Vite scripts:

npm pkg set scripts.dev="vite"
npm pkg set scripts.build="vite build"
npm pkg set scripts.preview="vite preview"

Then remove CRA-specific scripts like:

"start": "react-scripts start",
"test": "react-scripts test",
"eject": "react-scripts eject"

⚒️ Step 5: Create vite.config.js

Create and open the config file:

touch vite.config.js
code vite.config.js

Paste the following content in the file:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
});

🧩 Step 6: Rename Entry File

Rename the CRA entry point from index.js to main.jsx:

mv src/index.js src/main.jsx

🔁 Don't forget to update any import paths pointing to index.js.

📄 Step 7: Create Vite-Compatible index.html

Vite expects index.html at the root (not in public/).

Create and edit it:

touch index.html
code index.html

Paste the following in the same file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chat App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

✅ Make sure the main.jsx path is correct!

Now remove the CRA index.html:

rm public/index.html

📦 Step 8: Reinstall Dependencies

Reinstall project dependencies:

npm install

🚀 Step 9: Start the Dev Server

Start your app with:

npm run dev

Visit: http://localhost:3000

⚠️ Step 10: Convert .js Files to .jsx

Vite handles JSX better when files are explicitly .jsx.

🔍 Preview all .js files:

find src -type f -name "*.js"

🔄 Batch rename .js → .jsx:

find src -type f -name "*.js" -exec bash -c 'mv "$0" "${0%.js}.jsx"' {} \;

Also, update all import paths referencing the renamed files.

✅ Done!

You’ve now successfully migrated your CRA project to Vite 🎉

Enjoy:

  • Blazing-fast hot reloads ⚡️

  • Smaller and optimized builds 📦

  • Simpler config and better DX 🛠️

0
Subscribe to my newsletter

Read articles from Niranjan Singh directly inside your inbox. Subscribe to the newsletter, and don't miss out.

migrationReactvitecreate-react-app

Written by

Niranjan Singh
Niranjan Singh