DEV Community

Cover image for How to Migrate from create-react-app to Vite?
Ajeet Singh Raina
Ajeet Singh Raina

Posted on

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.

Image1

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.

Image2

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

Step 1: Set the Stage with Vite Installation

npm install vite @vitejs/plugin-react --save-dev
npm uninstall react-scripts
Enter fullscreen mode Exit fullscreen mode

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

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

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

Image3

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

Step 4: Vite Configuration

Image5

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

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

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

<script type="module" src="/src/index.jsx"></script>
Enter fullscreen mode Exit fullscreen mode

Step 5. Running the frontend app:

npm run dev
Enter fullscreen mode Exit fullscreen mode
 VITE v5.4.2  ready in 152 ms

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

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!

Top comments (1)

Collapse
 
cookiemonsterdev profile image
Mykhailo Toporkov 🇺🇦 • Edited

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

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