As of now Create React App (CRA) is no longer the recommended way to start a react project. There have been many alternatives in ecosystem to pick from. One of such alternative which is gaining lots of attention is using the combination of Vite and PNPM.

What is Vite?

• To put it in few words, Vite is 10–100x faster than other JavaScript-based bundlers.
• This is because it’s written in Go and its dependencies are pre-bundled with esbuild.
• Also vite served the source code as native ESM, enabling on-demand transformation and loading for improved developer productivity.

What is PNPM?

• PNPM is a faster alternative to npm and yarn which optimizes your disk space and boost up your installation speed.
• You can also check out the bench mark page for more detailed analysis.

Building the Hello world App

For using vite and pnpm make sure you must have node version 16+ installed.

Once you have the correct node setup, you can now install pnpm . Run the below command to install latest version of pnpm .

npm i -g pnpm

Checkout the official installation doc if you wanna install pnpm without using npm.

Once it got successfully installed, you are now ready for creating your react project with vite. Run the below command by replacing the folder name with your own.

pnpm create vite <your folder name>

Once you ran it will ask you to choose your framework. You can select React and press enter.

Then as shown below it will ask you to pick the setup. You will notice there are also options available for SWC (which is a faster alternative for bable and esbuild).

You can choose your convenient option and hit enter to proceed.

Once it is completed you can find the repository has been created with all the setup. Now all you have to do is just run the below commands in your application folder to start the app.

pnpm install
pnpm dev

Once you ran the commands the app will be running in your local.

So finally! you can now visit to this localhost url to see your app.