How To Set Up a React Project with Vite. Faster than CRA! - by Sedrick

Using npm

The company NPM claims it found more than 1,300 malicious npm packages in 2021 in npm. That's bad, but 1,300 out of 1.8-million is only 0.007222%. If you were to just randomly grab JavaScript packages for your program, odds are you'll be safe. As of 03 Feb,2022.

So what is better than npm?

In terms of speed and performance Yarn is better than NPM because it performs parallel installation. Yarn is still more secure than NPM. However, Yarn uses more disk space than NPM. According to "knowledge-hut".

So what is the alternative solution?

Vite (French word for "fast", pronounced /vit/) is a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts:

1. A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).

2. A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

How to install Vite
$ npm create vite@latest - using npm.

$ yarn create vite - using yarn.

Setting up our React-vite project

yarn create vite

Output
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@2.9.0" with binaries:
      - create-vite
      - cva
? Project name: » react-vite-project

After entering your project name, Vite will prompt you to select a framework:

Output

? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
    vue
>   react
    preact
    lit
    svelte

After setting up the framework, you will see an output that the project has been scaffolded. Vite will then instruct you to install dependencies using Yarn:

Output
Done:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

  cd digital-ocean-vite
  yarn
  yarn dev

Done in 129.89s.

Navigate to your project folder as directed:

$ cd digital-ocean-vite

Then, use the yarn command to install the dependencies of the project:

`$ yarn`

After installing all the dependencies, you will see how long it took to install dependencies:

Output
success Saved lockfile.
Done in 43.26s.

Now to start the dev server, just simply type the following and you're good to go.

$ yarn run dev

If you reached this far, your're AWESOME and thank you!