What is Vite and Why has it replaced Create React App?

Next generation frontend tooling

Any new app will have a lot of boilerplate things that you will have to set up every time you want to create a new react application:

1. A development environment, so you can code your app and view it in the browser
2. Transpiling your code to a syntax older browsers can understand.
3. The ability to build your app, so that you can deploy it.
4. A server with hot reloading that will refresh your page as you make code changes.
5. The ability to lint your code for errors/bugs.

The development server tools like CRA(Create React App) or Vite are designed to configure these boilerplate things just for you to create a new React app without setting up anything manually.

What caused Create React App to replace?

The Create React App was the default method to create a new React application over the years.

As your project grows in size, the development and build time increase substantially, because whenever the changes are made, CRA rebuilds the whole application. Hence using CRA can be very time-consuming when you have a large number of files.

Traditionally, to create a react application using CRA:

npx create-react-app amazing-app
cd amazing-app
npm start

What Made Vite Popular?

Vite (Pronounced as veet, which means fast in French). Unlike CRA Vite does not rebuild the whole app whenever changes are made, it is built on demand. It splits the app into two categories: dependencies and source code.

Dependencies: These are things that do not change often during the development process. These bundles use esbuildis written in Go and is very fast than javascript.

Source Code: It is called only on demand whenever required, and it is incredibly fast.

How to use Vite?

For a Brand New Project:

1. Create a vite project using your favorite package manager:

# yarn
yarn create vite

# npm
npm create vite@latest

2. Enter your project name at the prompt:

success Installed "create-vite@4.1.0" with binaries:
      - create-vite
      - cva
? Project name: › amazing-app

3. Select the framework you would like to use:

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Others

4. Select the variant. You can use plain JavaScript or TypeScript, or either of these plus SWC. SWC is a code transpiler much like Babel:

? Select a variant: › - Use arrow-keys. Return to submit.
❯   JavaScript
    TypeScript
    JavaScript + SWC
    TypeScript + SWC

5. Vite will go on to create your project based on your selections:

Scaffolding project in /Users/nivetha/Projects/amazing-app...

Done. Now run:

  cd amazing-app
  yarn
  yarn dev

✨  Done in 505.68s.

A simpler way to create a Vite project instead of going through each of the steps individually is to specify the project name and the template as a command line option.

# npm 6.x
npm create vite@latest amazing-app --template react

# npm 7+, extra double-dash is needed:
npm create vite@latest amazing-app -- --template react

# yarn
yarn create vite amazing-app --template react

Yah! Your brand new React Vite Project is created.

Migrate your Create React App project to Vite project:

1. Open your package.json file and remove the react-scripts entry from dependencies:
   Note: You may have a different version number in your file

"dependencies": {
  ...
  "react-scripts": "5.0.0", // Remove this line
  ...
},

2. If you are using CSS or SCSS, add the sass npm package to your devDependencies:

# yarn
yarn add -D sass

# npm
npm i --save-dev sass

3. Add vite and @vitejs/plugin-react npm packages to devDependencies:

# yarn
yarn add -D vite @vitejs/plugin-react

# npm
npm i --save-dev vite @vitejs/plugin-react

Your package.json devDependencies should now include those packages:

"devDependencies": {
  "sass": "1.58.3", // optional
  "@vitejs/plugin-react": "1.1.1",
  "vite": "2.7.0"
},

4. Open package.json and update scripts to match the below:

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

5. Create a vite.config.js file in the root folder and add the below:
Note: The react() plugin is added to avoid you having to manually import React at the top of every single .jsx and .tsx file.

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

export default ({ mode }) => {
  return defineConfig({
    plugins: [react()],
    define: {
      "process.env.NODE_ENV": `"${mode}"`,
    }
  })
}

6. Move the index.html file from the public folder to the root of the project.

7. Remove all the instances of %PUBLIC_URL% from that index.html file:

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

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

8. Add the script tag below in the body of that index.html file:

<div id="root"></div> // Should already exist
<script type="module" src="/src/index.jsx"></script> // Add this line

9. If you have any .env files, replace REACT_APP with VITE:

// From
REACT_APP_ENV = local
REACT_APP_HOST_UR = https://reqres.in/api/

// To
VITE_ENV = local
VITE_HOST_URL = https://reqres.in/api/

10. Run npm or yarn one last time:

# yarn
yarn

# npm
npm install

11. Now run the application

# yarn
yarn start

# npm
npm start

Congratulations! Your CRA app should now be successfully migrated to Vite.

Vite has established a new way to generate React applications, with speed at the forefront of its mind. If you value your productivity, start using Vite to create your new application.