Almost all beginner React tutorials I see these days recommend that you should start your project with the boilerplate Create React App environment. For many, this works like a dream. You get set up with a live server, hot module reload, and the entire necessary file structure created for you right away. If you're just starting your web development journey and you don't need to worry about things like editing Webpack config files, setting up custom backend code, or potentially doing anything outside of what CRA was built to do, this seems like a great option. Not to mention everyone is using it, right? Whether you are a beginner or a seasoned software professional, let me show you how to use Vite and why it is better than CRA.

SHOWDOWN: Vite vs Create React App

Before we get into how to make project with Vite, let's take a look at similarities and key differences between the two. At their core, CRA and Vite both do essentially the same things. They both bundle your front end code and provide a live local server for development.

Create React App

Create React App is powered by Webpack, a third-party static module bundler. Unfortunately, Webpack is not configured by you and it locks you in to the CRA configuration. Behind the scenes, when you start up a CRA development server, Webpack bundles your entire app before it's able to start serving code and it creates a tree of dependencies which point to your index.js file. It then uses Babel for transpiling, web sockets for hot modules, and starts up an Express server to run locally. The major issue with this bundling process is that the whole thing repeats every time you change your code. This means that it's fast only with small code bases, but as your project grows your time waiting for it to build will skyrocket.

Vite

Vite, however, has the benefits of transpiling only on-demand, pre-bundles your dependencies, and uses Koa (a light and fast Node server with built-in Hot Module Reload) after the pre-bundle which means the time between changing code to seeing it live in your browser is nearly instant every time. Without getting too deep into the details here, Vite also uses Rollup which is significantly faster than Webpack, it outputs a smaller bundle size, and you have full customization access using Vite/Rollup where CRA/Webpack gives you zero customization. Vite provides site loads 10-100x faster than other popular Javascript web bundlers.

Getting Started with a Vite Project

To get started with the most basic of Vite JS, in your terminal run:
npm create vite@latest for npm
yarn create vite for yarn
pnpm create vite for pnpm

If you want a boilerplate React project (recommended as replacement for CRA) run:
yarn create vite my-react-app-name --template react
replace yarn with npm/pnpm if you wish.

Running the server

Once you navigate to inside your newly created Vite project folder in your terminal, you can start running the boilerplate scripts give to you by Vite. They are as follows:

{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}

So now you can run something like, yarn run dev to locally start Vite's Koa development server.

Next Steps

Now you have everything you need to start writing code. Your index.html file is your project root, but you can choose to specify an alternative route if you like.
I hope you like using Vite in your new projects and enjoy the fast bundle/build times Vite has to offer. I'd like to write more articles on the nuances of using Vite in the future, but until then if you have questions I've linked the Vite documentation page here: Vite Guide