Migrating from Create React App to Vite: A Developer&#s Guide-JS Tutorial-php.cn

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

DDD

Release： 2024-12-30 21:55:10

Original

963 people have browsed it

Migrating from Create React App to Vite: A Developer

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

Copy after login

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

Copy after login

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,
  },
});

Copy after login

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:

Keep your .env files
Rename variables from REACT_APP_ to VITE_
Update references:

// Before (CRA)
process.env.REACT_APP_API_URL

// After (Vite)
import.meta.env.VITE_API_URL

Copy after login

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"
  }
}

Copy after login

6. Move index.html

Move public/index.html to 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>



<h2>
  
  
  ? Common Challenges and Solutions
</h2>

<h3>
  
  
  1. JSX in .js Files
</h3>

<p>This is usually the first hurdle. You have two options:</p>

<h4>
  
  
  Option 1: Configure Vite (Recommended)
</h4>

<p>Add the include option as shown in the config above.</p>

<h4>
  
  
  Option 2: Rename Files
</h4>



<pre class="brush:php;toolbar:false"># Unix/Linux command to rename files
find src -name "*.js" -exec sh -c 'mv "" "${1%.js}.jsx"' _ {} \;

Copy after login

2. Absolute Imports

Update vite.config.js:

resolve: {
  alias: {
    '@components': '/src/components',
    '@assets': '/src/assets',
    '@utils': '/src/utils'
  }
}

Copy after login

3. SVG Support

Install and configure vite-plugin-svgr:

npm install -D vite-plugin-svgr

Copy after login

import svgr from 'vite-plugin-svgr';

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

Copy after login

✅ 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 .js files 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!

The above is the detailed content of Migrating from Create React App to Vite: A Developer&#s Guide. For more information, please follow other related articles on the PHP Chinese website!