DEV Community

Cover image for Migrating from Create React App to Vite: A Developer's Guide
Snehasis Debbarman
Snehasis Debbarman

Posted on

Migrating from Create React App to Vite: A Developer's Guide

#react #javascript #webdev #performance

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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,
  },
});
Enter fullscreen mode Exit fullscreen mode

Important: The include: "**/*.{jsx,js}" configuration is crucial! Without this, Vite only processes JSX in .jsx files.

4. Environment Variables

Vite handles environment variables differently:

  1. Keep your .env files
  2. Rename variables from REACT_APP_ to VITE_
  3. Update references: 
// Before (CRA)
process.env.REACT_APP_API_URL

// After (Vite)
import.meta.env.VITE_API_URL
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

6. Move index.html

  1. Move public/index.html to root
  2. 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>
Enter fullscreen mode Exit fullscreen mode

🚧 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"' _ {} \;
Enter fullscreen mode Exit fullscreen mode

2. Absolute Imports

Update vite.config.js:

resolve: {
  alias: {
    '@components': '/src/components',
    '@assets': '/src/assets',
    '@utils': '/src/utils'
  }
}
Enter fullscreen mode Exit fullscreen mode

3. SVG Support

Install and configure vite-plugin-svgr:

npm install -D vite-plugin-svgr
Enter fullscreen mode Exit fullscreen mode 
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [react(), svgr()],
  // ...
});
Enter fullscreen mode Exit fullscreen mode

✅ 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:

  1. Configure JSX processing for .js files early
  2. Update environment variables
  3. Verify import paths
  4. 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!

Top comments (2)

Collapse
 
sibasis_padhi profile image
Sibasis Padhi •

Nice article. Is Vite industry accepted ?

Collapse
 
snehasis_debbarman profile image
Snehasis Debbarman •

Actually CRA is not longer maintained by Facebook and React's official documentation now recommends Vite over CRA for new projects , so companies now moving to vite for better performance.

Read next

velan profile image

Mastering Bruno: A Beginner's Guide to API Clients

Velan<> -

celestevanderwatt profile image

PHP 8.4 is here ⚡️upgrade your projects today!

Celeste van der Watt -

danrot90 profile image

Writing high quality tests

Daniel Rotter -

daniel_oladepo_0c5ac110f2 profile image

HTTP: The Protocol Every Web Developer Must Master

Daniel Oladepo -