How to Convert a React App from CRA to Vite in 5 minutes – ASMR Programming

Are you tired of the slow build times in your Create React App (CRA) project? Do you want to switch to a faster alternative like Vite? In this article, we’ll show you how to convert your React app from CRA to Vite in just 5 minutes.

Step 1: Install Vite

The first step is to install Vite in your project. You can do this by running the following command in your terminal:


npm install --save-dev vite


Step 2: Create Vite Configuration

After installing Vite, you need to create a Vite configuration file in the root of your project. This can be done by running the following command:


npx create-vite


Step 3: Update Package.json

Open your package.json file and update the “scripts” section to use Vite instead of CRA. Here’s an example of what the updated “scripts” section might look like:


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


Step 4: Replace Import Statements

Finally, you’ll need to replace the import statements in your project to use Vite’s module resolution. This includes changing your import statements from:


import React from 'react';


to:


import React from 'preact/compat';


Step 5: Run Vite

Once you’ve completed the previous steps, you can now run your project using Vite. Simply run the following command in your terminal:


npm run dev


That’s it! You’ve successfully converted your React app from CRA to Vite in just 5 minutes. Enjoy the faster build times and improved developer experience that Vite has to offer.