Vite vs Create-react-app

Today I talked to my colleague about the speed of Hot Reload when developing React applications. I told him that I tried launching from WSL and that everything updates faster. This is about pure React, not for SPFX. I was asked how I created a project and how it works for me. And it turns out that it's not always good to use old tried and tested methods.

I've been using create-react-app for years for medium complexity projects - no need to manually update the webpack, connect and configure loaders. Within 2-3 minutes all packages are loaded and you start.

Today I learned about Vite. It is a relatively new tool for creating modern web applications

I thought I'd give it a try. Using 'npm create vite@latest' I started creating the application.

npm create vite@latest

Next, I selected its parameters. There are not only React, but also a bunch of other libraries. I chose my usual React + TS. It really took a matter of seconds to create the project.

Next, I copied a few components from my project and ran them. Hot Reload works almost instantly, noticeably faster than in the application created with Create-react-app.

Some peculiarities - there are no React-scripts, so under Linux you don't need to give permissions to run them.

As a consequence of the above written about React-scripts - there is no support for process.env, but this is easy to fix. Variables are taken from the .env file in the root of the project, the syntax is similar, only they should start with VITE_.

const VITE_APP_ENV = import.meta.env.VITE_APP_ENV