Over the weekend I finally got the chance to create a React app's initial boilerplate, bundler, and dev server setup using Vite. Previously, I had been using Create React App (CRA) (
npx create-react-app) and sometimes using it to deploy to Github pages too.
Vite the Front-end Tool
Vite is a framework-agnostic frontend build tool that was created by the creator of Vue.js. As of now you can use Vite to scaffold not only React apps, but also Vue, Preact, Lit, Svelte, and good ol' vanilla JS! It currently uses Rollup.js as the bundler under the hood, though there seems to be interest to potentially use esbuild once that is mature enough. This differs from CRA which currently uses Webpack.
In this post I'll do a quick comparison on how to start up a React app and deploy it (to Github Pages), with both CRA and Vite. With Vite it's as easy as it is with CRA. Since I mostly use NPM I'll be using the NPM approach, but if you're using Yarn it'll be just as easy, you'll just have to do the equivalent commands.