How to Migrate from create-react-app to Vite?

As the frontend ecosystem evolves, developers are increasingly seeking faster and more efficient build tools. Vite has emerged as a popular alternative to Create React App (CRA) due to its rapid development server, minimal configuration, and optimized production build. If you're considering migrating your project from CRA to Vite, this guide will walk you through the process.

But why migrate to Vite?

• Faster Development: Vite provides instant server start and fast hot module replacement (HMR) out of the box.
• Smaller Bundle Sizes: Vite's production build leverages Rollup, resulting in optimized and smaller output bundles.
• Modern Features: Vite supports ES modules, TypeScript, and the latest JavaScript features without needing polyfills or transpilation in development.

Vite is a modern build tool that offers faster development and build times, leveraging native ES modules and a more efficient bundling process. This guide will walk you through the necessary steps to ensure a smooth transition, including setup, configuration, and testing.

Assume that you have the following frontend project directory structure:

tree -L 1 frontend
frontend
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src

4 directories, 3 files

Step 1: Set the Stage with Vite Installation

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

Step 2: Update package.json

Adjust the “scripts” section of your package.json file to use Vite’s commands:

"scripts": {
  "start": "vite",
  "build": "vite build",
  "serve": "vite preview"
},

Here's how the sample package.json look like:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.7.6",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.1",
    "vite": "^5.4.2"
  }
}

Step 3: Rename File Extensions to .jsx or .tsx

Assume that you have the following src project directory structure:

tree src
src
├── App.css
├── App.js
├── App.test.js
├── components
│   └── WeatherDashboard.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js

2 directories, 9 files

Vite distinguishes files by their explicit extensions. For JSX files, you should rename them from .js to .jsx. If you’re using TypeScript, the same applies, from .ts to .tsx. Here’s how you can do it for your App.js and index.js:

mv src/App.js src/App.jsx
mv src/index.js src/index.jsx

Step 4: Vite Configuration

Create a vite.config.js in the root of your project and populate it to reflect your build preferences. Here’s a basic configuration:

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

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});

Explanation:

It uses the React plugin and specifies the outDir as build, which aligns with the default behavior in Create React App, where the output directory for the production build is also named build.

Here's a quick rundown of what your configuration does:

• build.outDir: 'build': This ensures that when you run vite build, the output files are placed in the build directory, similar to how Create React App structures its output.
• plugins: [react()]: The React plugin for Vite is included, enabling React Fast Refresh during development and other optimization

Step 5. Move index.html file

Move your public/index.html into the project’s root folder and update any %PUBLIC_URL% references:

mv public/index.html .

Then, edit your index.html to correctly link to the index.jsx entry file:

<script type="module" src="/src/index.jsx"></script>

Step 5. Running the frontend app:

npm run dev

 VITE v5.4.2  ready in 152 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Conclusion

Migrating from Create React App to Vite can significantly improve your development experience with faster build times and a more modern setup. By following the steps outlined in this guide, you should be able to transition your project smoothly. Remember to test your application thoroughly after migration to ensure everything works as expected. Happy coding!

Comments

[Mykhailo Toporkov 🇺🇦]

it is critical to mention that vite treats static asset and env variables differently:

• Static Asset Handling
• Env Variables and Modes

And you also can specify language in markdown code block by adding language like "typescript:" in the opening e.g.

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

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    plugins: [react()],
  };
});