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

Last Updated : 22 Aug, 2024

In this article, we will learn how we can migrate from create-react-app to Vite. Vite is a build tool for frontend development that aims for fast and efficient development. It provides a development server with hot module replacement and supports various JavaScript flavors, including JSX, out of the box. In this guide, we'll explore the steps to transition from a Create React App project to a Vite-based setup.

Steps to create a react app using Vite

Step 1: Start with creating a react app with the following command

npx create-react-app vite

Step 2: Move inside the main project

cd vite

Step 3: Uninstall React Script by using the following command

npm uninstall react-scripts

Step 4: Now Install Vite Dependencies through the given command

npm install vite @vitejs/plugin-react-swc vite-plugin-svgr

Updated dependencies:

 "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@vitejs/plugin-react-swc": "^3.7.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "vite": "^5.4.2",
    "vite-plugin-svgr": "^4.2.0",
    "web-vitals": "^2.1.4"
  },

Note: Depending on your needs, you can explore different plugins from the official Vite plugins documentation.

Step 5: Add the script tag in your index.html as shown in the given command. Also, bring index.html to the root directory.

HTML

<!-- Index.html --> <!DOCTYPE html> <html lang="en">  <head>     <meta charset="utf-8" />     <meta name="viewport"            content="width=device-width, initial-scale=1" />     <meta name="theme-color"            content="#000000" />     <meta name="description"            content="Web site created using create-react-app" />     <title>React App</title> </head>  <body>     <noscript>         You need to enable JavaScript to run this app.     </noscript>     <div id="root"></div>     <script type="module" src="./src/index.jsx"></script> </body>  </html>

Step 6: Change the name of following files

Index.js   -> Index.jsx
App.js      -> App.jsx

Step 7: Create a file vite.config.js in the root directory of your project and paste the given code in that file.

JavaScript

// vite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc'  export default defineConfig({     plugins: [react()], })

The Project Structure will look like:

Screenshot-2023-09-21-213926 — Project Structure

Step 8: Update the script in Package.json with the given vite code.

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

Step 9: Copy the given code to App.jsx

JavaScript

import { useState } from "react"; import logo from "./logo.svg"; import "./App.css"; function App() {     const [count, setCount] =         useState(0);     return (         <>             <div>                 <a                     href="https://react.dev"                     target="_blank">                     <img                         src={logo}                         className="logo react"                         alt="React logo"                         style={{                             width: "200px",                         }}/>                 </a>             </div>             <h1>Vite + React</h1>             <div className="card">                 <button                     onClick={() =>                         setCount(                             (count) =>                                 count +                                 1                         )}>                     count is {count}                 </button>                 <p>                     Edit{" "}                     <code>                         src/App.jsx                     </code>{" "}                     and save to test HMR                 </p>             </div>             <p className="read-the-docs">                 Click on the Vite and                 React logos to learn                 more             </p>         </>     ); } export default App;