# Vite Tutorial

> Understand what Vite is and why it is fast: instead of bundling, it ships native ES modules to browsers, with scaffolding, a dev server with HMR, and builds.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2023-02-04 | Topics: [Tools](https://flaviocopes.com/tags/tools/) | Canonical: https://flaviocopes.com/vite-tutorial/

I’ve been using Vite lately as “[the new create-react-app](https://flaviocopes.com/vite-react-app/)”.

What _is_ Vite?

It can be confusing because there are a lot of tools that are doing the same thing but differently like [Parcel](https://flaviocopes.com/parcel/), esbuild, Rollup, Rome, [webpack](https://flaviocopes.com/webpack/), Turbopack (look, I’m trying to get the capitalization right)… and I tend to think they more or less do the same thing even though they’re not.

But when people started using Vite for a lot of stuff, and I kept reading about it on Twitter, then I got curious.

I tried it, and I like it.

Vite brands itself as a “next generation frontend tool”.

It’s basically like a module bundler, like [Webpack](https://flaviocopes.com/webpack/) or Turbopack, but interestingly it does not behave like a bundler. Instead of creating a bundle of [JavaScript](https://flaviocopes.com/javascript/) that you send to the browser, typically a single big JavaScript file that then the browser processes, Vite uses the native browser’s ES modules support and ships modules directly to the browser.

So instead of seeing a single big JavaScript file, if you inspect the website in the DevTools you’ll see all your application files being shipped to the browser.

I think this is the #1 reason for its speed, a radical change in how build tools behave.

Here’s a summary of what Vite gives you:

- a scaffolding tool for many popular libraries and frameworks, like [React](https://flaviocopes.com/react/)
- a development server with hot module replacement (HMR)
- a build tool to create the production version of your code

Interestingly Vite uses [Rollup](https://rollupjs.org/guide/en/) internally, so it’s not a replacement for Rollup - it’s built on top of it.

It also uses SWC, the next-generation faster Babel.

Basically your application code is compiled into individual ES Modules and shipped to the browser. Interestingly Vite is **not a bundler**. We’re used to using bundlers to create the final version of our code, but Vite does not do that.

Instead it “sends each module directly to the browser. This means the browser does the hard work of handling dependencies between modules.” as I found on the [Turbopack comparison page](https://turbo.build/pack/docs/comparisons/vite).

I find Vite very user friendly, and I think it’s been a good move for its adoption.

My favorite use case for it is initializing a new JavaScript or React app. It also has built-in integration for Svelte, SvelteKit and others.

You can initialize a new project using Vite with this command:

```shell
npm create vite@latest
```

This starts a new

![Terminal showing npm create vite@latest command with project name prompt displaying vite-project](https://flaviocopes.com/images/vite-tutorial/1.webp)

Give the project a name, that will be used for its folder name.

If you write a name that’s not a valid folder / package name (e.g. it contains spaces) it will prompt for a valid folder / package name.

![Vite prompt showing package name field with testing-vite after entering project name testing vite](https://flaviocopes.com/images/vite-tutorial/2.webp)

Then you get to choose a framework:

![Framework selection menu showing Vanilla, Vue, React, Preact, Lit, Svelte, and Others options](https://flaviocopes.com/images/vite-tutorial/3.webp)

Now depending on what you choose, from now on you’ll have different options:

![Variant selection for Vanilla showing JavaScript and TypeScript options](https://flaviocopes.com/images/vite-tutorial/4.webp)

![React variant options including JavaScript, TypeScript, JavaScript + SWC, and TypeScript + SWC](https://flaviocopes.com/images/vite-tutorial/5.webp)

![Svelte variant selection showing JavaScript, TypeScript, and SvelteKit options](https://flaviocopes.com/images/vite-tutorial/6.webp)

For example I want to create a basic vanilla JavaScript project:

![Terminal output showing successful scaffolding of Vanilla JavaScript project with setup instructions](https://flaviocopes.com/images/vite-tutorial/7.webp)

Here’s the project files Vite created:

![Finder window displaying generated Vite project files including package.json, index.html, and main.js](https://flaviocopes.com/images/vite-tutorial/8.webp)

`package.json` is now configured to use Vite to run the project. But see, we don’t have a `node_modules` folder.

In the terminal, go into the folder and run `npm install`

Next you can run `npm run dev` and Vite is running:

![Vite development server running showing localhost:5173 and network options in terminal](https://flaviocopes.com/images/vite-tutorial/9.webp)

![Browser showing default Vite vanilla JavaScript app with Vite and JS logos and Hello Vite heading](https://flaviocopes.com/images/vite-tutorial/10.webp)

This is a quick way to spin up a Web Server that is already configured to use ES modules.

![VS Code showing index.html file with Vite project structure and ES modules script tags](https://flaviocopes.com/images/vite-tutorial/11.webp)

Same if you choose React, Vite initializes a simple React example app with modern standards:

![Browser displaying Vite + React app with both logos and instructions to edit src/App.jsx](https://flaviocopes.com/images/vite-tutorial/12.webp)