Create React App (CRA) has played a pivotal role in the development of React’s community and its ecosystem at large. It is the tool of choice for developers of different skill sets when it comes to constructing a local React development environment on a whim.

Vite in development:

Vite only needs to pre-bundle your dependencies using esbuild the first time you start development before it begins to serve your app.

Why use Vite?

• Superior performance
• Extensive plugin compatibility
• Faster updates
• Faster build time

Setting up a React project with Vite

• npm create vite@latest You can do this by adding a --template flag, followed by the framework’s name:
• npm init vite@latest vite-project --template react

Next, cd into the project folder, install the necessary dependencies, and start the dev server with the following commands:

cd vite-project
npm install
npm run dev

Migrating a Create React App(CRA) project to Vite

If you have an existing CRA project, it’s pretty simple to migrate it to Vite.

As a first step, open the package.json file in your project folder and delete react-scripts from the list of dependencies:

 "dependencies": {
    ...
    "react-scripts": "5.0.1",
    ...
  },

Next, add a "devDependencies" with the following content:

 "devDependencies": {
  "@vitejs/plugin-react": "^2.0.1",
  "vite": "^3.0.7"
}, 

N.B., it is recommended to always use the latest version Now, replace the scripts:

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

With the following:

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

Next, go to the index.html file inside the Public folder and remove every %PUBLIC_URL%/prefix in the link paths:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Replace the removed prefix with the following:

<link rel="icon" href="./public/favicon.ico" />
 ...
<link rel="apple-touch-icon" href="./public/logo192.png" />
 ...
<link rel="manifest" href="./public/manifest.json" />

Then, add an entry point script inside the body element, just below the root div:

• <script type="module" src="/src/index.jsx"></script> The next step is to create a Vite config file, delete the node modules folder, and reinstall the dependencies.

Start by creating a vite.config.js file inside the root folder and add the following code:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
})

Next, go to the root folder and delete the node_modules folder. Then, run the following command to reinstall the dependencies and start the development server:

npm install
npm start

Absolute imports

importing files and components in your React app like this: import Cards from "components/cards"; You’ll need to import them like this: import Cards from “/src/components/cards.jsx” open the vite.config.js file, and replace the existing code:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
}); 

With the following:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  resolve: {
    alias: [
      {
        find: "common",
        replacement: resolve(__dirname, "src/common"),
      },
    ],
  },

  plugins: [react()],
});

Environment variables

replace the REACT_APP_ prefix with VITE_.

//Instead of this 
REACT_APP_ API_KEY = 1234567890..
//Use this
VITE_API_KEY = 1234567890..

Use the following command to install the vite-plugin-env-compatible package: npm i vite-plugin-env-compatible

Next, go to the vite.config.js file in the root folder of the project and add the following code:

import envCompatible from 'vite-plugin-env-compatible';

export default defineConfig({
    ...
  envPrefix: 'REACT_APP_',

  plugins: [
    react(),
    envCompatible
  ],
});