Vite Guide: What It Is and How to Create Your First Project

Vite is a front-end build tool for modern web projects. It provides a quick development server while you work, plus a production build that outputs optimized files.

This guide shows what Vite is, how to start a project and what the generated files do.

Everything here was run in a real project on October 22, 2026, with Vite 8.3.5. I also checked the official Vite documentation. Your versions and results may differ.

The short answer

Install Node, run npm create vite@latest, pick a template, install dependencies and run the dev script. When you are ready to ship, run the build script and deploy the output folder.

Vite requires Node.js version 20.19 or newer, or 22.12 or newer, according to its guide. Some templates need a higher version, and your package manager will warn you.

What Vite is

Vite's guide describes it as a build tool that tries to make development on modern web projects faster and leaner. The name is French for quick, pronounced like veet.

It has two parts. A dev server gives you fast hot module replacement, built on native ES modules. The build command uses Rolldown to bundle your code into optimized static files for production.

Why Vite exists

Vite's why page says that when it was created, browsers had only just started supporting ES modules widely, a way to load JavaScript files without bundling them first.

Traditional tools that bundle everything before serving had become slow on large projects. Vite was built to serve code differently during development. Many frameworks, including Nuxt, SvelteKit, Astro and React Router, now use it as their build layer.

What you need first

You need Node.js, and a package manager that comes with it or sits beside it. Check your Node version before you start.

node -v

If it prints something older than 20.19 or 22.12, upgrade first. If you are unsure which package manager to use, our npm vs pnpm vs Yarn vs Bun comparison helps.

Create a project

Vite's guide lists the equivalent command for several package managers. In npm 7 and newer, an extra double dash is needed before the template option. I ran this command.

$ npm create vite@latest vite-demo -- --template react-ts
create-vite v9.3.1
Scaffolding project in vite-demo...
Done. Now run:
  cd vite-demo
  npm install
  npm run dev

Running it with no options starts a prompt that asks for a name and a template. The version in the first line is the scaffolding tool, which is separate from Vite itself.

Choose a template

Vite's guide lists these template presets, each with a JavaScript or TypeScript version.

Template	What it sets up
vanilla	Plain JavaScript or TypeScript
vue	A Vue project
react	A React project
preact	A Preact project
lit	A Lit project
svelte	A Svelte project
solid	A Solid project
qwik	A Qwik project

You choose TypeScript by adding -ts to the name, such as react-ts. The guide also says you can try templates online at vite.new without installing anything.

What the generated project contains

After the scaffold, my project folder held these files.

.gitignore
.oxlintrc.json
README.md
index.html
package.json
public
src
tsconfig.app.json
tsconfig.json
tsconfig.node.json
vite.config.ts

The index.html file is the entry point. Vite's build docs say it uses index.html at the project root as the build entry by default.

The scripts

The generated package.json had four scripts.

Script	What it does
dev	Starts the dev server with the vite command
build	Runs the TypeScript build, then vite build
lint	Runs oxlint, which this template includes
preview	Serves the production build locally

The lint script comes from the template I chose, so another template may differ.

Install and start the dev server

Install everything the project needs, then launch the dev script. Mine used React 19, TypeScript and the Vite React plugin.

$ npm install
$ npm run dev
  VITE v8.3.5  ready in 224 ms
  ➜  Local:   http://localhost:5173/

Vite's documentation lists 5173 as the default port, and says it tries the next port if that one is busy. The server responded with HTTP 200 and injected a Vite client script into the page for hot updates.

The 224 millisecond start time is from my machine and project, so yours will differ.

Build for production

Run the build script. Vite's build docs say the output is suited to static hosting. Here is what my build printed.

$ npm run build
transforming...
✓ 20 modules transformed.
dist/index.html                   0.45 kB
dist/assets/index-D64VDMd1.css    4.10 kB
dist/assets/index-GpEN3EET.js   222.44 kB
✓ built in 295ms

The file names include a hash, so browsers fetch new files after you deploy a change. Run the preview script to check the build locally before uploading the dist folder.

Browser targets

Vite's build docs say the production bundle targets browsers that meet Baseline Widely Available, using a cutoff date that Vite sets for each major version.

Vite 8's migration notes list Chrome 111, Edge 111, Firefox 114 and Safari 16.4 as the defaults.

If you need older browsers, change the build target in your config.

The config file

Vite looks for vite.config.js in the project root, and supports other extensions including TypeScript. My generated vite.config.ts was only a few lines.

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react()],
})

The defineConfig helper gives your editor hints. To change the underlying bundler options, Vite's docs say to use build.rolldownOptions.

Environment variables

Vite exposes variables on import.meta.env. The docs say only variables whose names start with VITE_ are exposed to client code, which prevents accidental leaks.

I tested this with two lines in a .env file: a variable called VITE_PUBLIC_NAME and another called DB_PASSWORD. I logged both in my app code and built the project.

$ npm run build
$ grep -o 'console.log([^)]*)' dist/assets/index-*.js
console.log(`demo-app`,void 0)

The VITE_ value was written into the bundle, and DB_PASSWORD came out as undefined. A variable with that prefix ends up visible to every visitor of your site, so keep secrets out of it.

Keep .env files out of Git

Vite's docs list .env.local as loaded in all cases and ignored by git. The template's .gitignore I generated ignored files ending in .local, but it did not list .env.

So put private values in .env.local, or add .env to .gitignore yourself. This is our advice, based on that test.

Common problems

This table lists problems you are likely to meet. The fixes follow Vite's guide, except where marked.

Problem	What to try
Package manager warns about the Node version	Upgrade Node, because some templates need more than 20.19 or 22.12
Env variable is undefined in the browser	Rename it to start with VITE_
Build works but the live site is blank	Run the preview script and check the browser console for errors
Old browser fails	Raise browser support in the build target
Not sure which files to commit	This is our advice: commit the lockfile and source, not node_modules or dist

Vite and other build tools

Vite's why page says traditional build tools struggled with slow dev server starts and slow updates on large projects. That is Vite's own account, so judge it on your project.

I did not run a head-to-head comparison with webpack or other bundlers for this guide, so I make no speed claim against them.

When to use Vite

This section is our analysis. Vite suits most new front-end projects, particularly those built with React, Vue, Svelte or plain JavaScript. If your framework already includes a build tool, follow its documentation, since many frameworks use Vite underneath.

Frequently asked questions

What is Vite?

A build tool with a fast dev server and a production build. It was designed for faster, leaner development of modern web projects.

How do I create a Vite project?

Run npm create vite@latest, pick a template, install the dependencies and start the dev script.

What Node version does Vite need?

Node.js 20.19 or newer, or 22.12 or newer, according to Vite's guide.

Does Vite use Rollup or Rolldown?

Vite 8 uses Rolldown for production builds, according to its documentation.

Are environment variables safe in Vite?

Only if you keep secrets out of VITE_ variables. Those are bundled into client code, as my test showed.

Is Vite only for React?

No. The templates include vanilla, Vue, React, Preact, Lit, Svelte, Solid and Qwik.

A quick checklist

• Check your Node version first.
• Scaffold the project from a template.
• Use .env.local for private values.
• Build, then preview before you deploy.
• Never put secrets in VITE_ variables.

Up nextGit tutorial from basics to advancedNow that your tooling is set up, learn the version control that goes with it. Read our Git tutorial from basics to advanced.→