How to migrate existing create-react-app(CRA) to Vite ?

Migrating from the deprecated Create React App to Vite a modern build and development tool is a good decision. Thereupon it can be felt an immediate difference in the performance like in startup speed and Hot Module Replacement(HMR). Below are certain basic steps for easily migrating to Vite.

Before migrating to Vite there is required an existing create-react-app application, if there not be any existing create-react-app app, it can be reference from this attached create-react-app-project tutorial link.

Once there is an app in hand build using create-react-app, then it can be moved further for migrating to Vite

1. First it requires navigating to the create-react-app location

Next it requires uninstalling the heavy create-react-app dependencies

2. Next it requires installing Vite and Plugins

3.1 Next it requires replacing the CRA(create-react-app) scripts to new Vite scripts in package.json

Next it requires replacing the scripts hash to new Vite specific scripts in file package.json 

4. Next it requires moving the index.html from public directory to the root of the application directory with some subsequent modifications

Next try dragging the index.html file from public directory to root of the project 

Next it requires finding all instances of %PUBLIC_URL% in index.html

Next it requires removing all instances of %PUBLIC_URL% from the index.html file

Next it requires adding the script tag inside the body tag to point to entry file

Next it requires editing the entry point to /src/main.jsx

5. Creating vite.config.js file in the root directory

Next it requires adding the vite configurations

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

export default defineConfig({

plugins: [react()],

})

6. Next it requires removing the node_modules directory and package-lock.json file

 

7. Next it requires replacing the extension from .js to .jsx or .tsx for all the files containing JSX(Javascript  XML)

Replacing all the files containing JSX to .jsx or .tsx extension

Next it requires naming main file(index.jsx) to main.jsx

That's how the entry file is to be renamed as provided below

8.  Installing fresh dependencies using npm install

9. Next it requires running the npm run dev command to run the Vite script

Finally the output can be seen by hitting the localhost:5173 url in the browser of choice