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:
Project StructureStep 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;
Step to run the application:
Step 1: Write the following command in your terminal
npm run start
exampleStep 2: Browse the following URL
http://localhost:5173/
Output:
Similar Reads
How to Migrate from Create React App to Next JS ?
Migrating from Create React App to Next.js is a structured process that includes setting up a Next.js project, reorganizing your files, updating dependencies, and utilizing Next.js features for better performance and server-side rendering. Prerequisites:NPM & Node.jsReact JSNext JSApproach To mi
2 min read
How To Create Absolute Imports In Vite React App?
When working on a React app using Vite, we often come across situations where we have a complex folder structure which also makes our component import URLs complex. To resolve this issue we can use Absolute imports in Vite React App. absolute imports help us to import files directly from the root fo
3 min read
How To Create a Website in ReactJS?
ReactJS is one of the most popular JavaScript libraries for building user interfaces. It allows you to create dynamic, reusable UI components and efficiently manage state and events. In this article, we'll walk through the steps to create a basic website using ReactJS. PrerequisitesNPM & Node.js
5 min read
How to Install Tailwind CSS with Create React App?
We will see how to set up Tailwind CSS in a React project using the Create React App. Tailwind CSS is a utility-first CSS framework that allows for rapid development of custom user interfaces. When combined with Create React App, it offers a flexible approach to build modern React applications. Prer
2 min read
How to Migrate from Webpack to Vite?
Migrating from Webpack to Vite is a process that allows you to transition from a traditional bundler (Webpack) to a modern front-end build tool (Vite). Vite offers faster build times, better development server performance, and built-in support for modern JavaScript features like ES modules. In this
3 min read
How To Create A Multi-Page Website Using ReactJS?
Multi-page website using ReactJS is the core for building complex web applications that require multiple views or pages. Previously where each page reloads entirely, ReactJS allows you to navigate between different pages without reloading the whole page thanks to libraries like React Router. In this
4 min read
Migrating from Create React App to NextJS: A Practical Guide
Migrating from Create React App (CRA) to Next.js involves transitioning from a client-side rendered React application to a framework that offers server-side rendering, static site generation, and built-in routing capabilities. This guide provides a step-by-step approach to help you effectively migra
4 min read
How to Set Up Vite for a Multi-Page Application?
Vite is a frontend development tool, used to build projects and multiple page applications in React.js. It is a beginner-friendly user tool that was developed by the founder of Vue.js, another framework of React.js. we will learn how to set up Vite for a Multi-Page Application. Steps to Set Up Vite
5 min read
How to Create an NPM Library from React Components ?
Creating an NPM library from React components involves configuring Babel and Webpack, bundling your components, and publishing them to NPM. This process enables easy reuse and sharing of React components. In this tutorial, we'll create a library containing a button component that changes color when
3 min read
How to Use react-select in React Application?
React Select is a flexible and handy dropdown library for React that handles multi-select, loading data asynchronously, custom options, and more in your components with ease. In this article, we will see how to use react-select in React Application. PrerequisiteNode.js installednpm or yarn package m
2 min read