Quickstart

Get up and running with Vite in just a few minutes.

Prerequisites

Vite requires Node.js version 20.19+ or 22.12+. Some templates require a higher Node.js version to work, so please upgrade if your package manager warns about it.

Scaffolding Your First Project

Use your preferred package manager to create a new Vite project:

Run create-vite

Choose your package manager and run the create command:

npm create vite@latest

yarn create vite

pnpm create vite

bun create vite

deno init --npm vite

Follow the prompts

You’ll be prompted to:

Choose a project name
Select a framework (React, Vue, Svelte, etc.)
Pick a variant (JavaScript or TypeScript)

The tool will create a new directory with your project files.

Install dependencies

Navigate to your project directory and install dependencies:

cd my-project
npm install

cd my-project
yarn

cd my-project
pnpm install

cd my-project
bun install

Start the dev server

Run the development server:

npm run dev

yarn dev

pnpm dev

bun dev

Your app is now running at http://localhost:5173!

Using Command Line Options

You can also directly specify the project name and template via command line options. For example, to scaffold a Vite + React project:

# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react

yarn create vite my-react-app --template react

pnpm create vite my-react-app --template react

bun create vite my-react-app --template react

Use . for the project name to scaffold in the current directory.

Available Templates

Vite supports a wide range of official templates:

JavaScript	TypeScript
`vanilla`	`vanilla-ts`
`vue`	`vue-ts`
`react`	`react-ts`
`react-swc`	`react-swc-ts`
`preact`	`preact-ts`
`lit`	`lit-ts`
`svelte`	`svelte-ts`
`solid`	`solid-ts`
`qwik`	`qwik-ts`

React templates come in two variants: standard (using Babel) and SWC (faster compilation). The react-swc and react-swc-ts templates use SWC for faster builds.

Manual Installation

If you prefer to set up Vite manually in an existing project:

Install Vite

Add Vite as a dev dependency:

npm install -D vite

yarn add -D vite

pnpm add -D vite

bun add -D vite

Create an index.html

Create an index.html file in your project root:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Create your source files

Create a src/main.js file:

src/main.js

document.querySelector('#app').innerHTML = `
  <h1>Hello Vite!</h1>
  <p>Edit src/main.js to get started</p>
`

Run Vite

Start the development server:

npx vite

yarn vite

pnpm vite

bunx vite

Your app will be served at http://localhost:5173!

Understanding the Project Structure

index.html and Project Root

One thing you may have noticed is that in a Vite project, index.html is front-and-central instead of being tucked away inside public. This is intentional:

During development Vite is a server, and index.html is the entry point to your application
Vite treats index.html as source code and part of the module graph
<script type="module" src="..."> references your JavaScript source code
Inline <script type="module"> and CSS via <link href> also enjoy Vite-specific features
URLs inside index.html are automatically rebased - no need for special %PUBLIC_URL% placeholders

Vite has the concept of a “root directory” from which files are served. You’ll see it referenced as <root> throughout the documentation. Absolute URLs in your source code will be resolved using the project root as base.

NPM Scripts

In a scaffolded Vite project, your package.json will include these default scripts:

package.json

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

You can specify additional CLI options like --port or --open:

package.json

{
  "scripts": {
    "dev": "vite --open --port 3000"
  }
}

For a full list of CLI options, run npx vite --help in your project.

Community Templates

The official create-vite templates are basic starting points. Check out Awesome Vite for community-maintained templates that include:

Additional tools and configurations
Different frameworks and libraries
Full-stack setups
Monorepo configurations

You can use a tool like tiged to scaffold from these templates:

npx tiged user/project my-project
cd my-project
npm install
npm run dev

Try Vite Online

Want to try Vite without installing anything? Use StackBlitz:

Vanilla JavaScript

Pure JavaScript starter

React

React with Fast Refresh

Vue

Vue 3 with SFC support

Svelte

Svelte with HMR

Next Steps

Now that you have a Vite project running, explore what you can do:

Features

Discover Vite’s rich features

Configuration

Configure Vite for your needs

Plugins

Extend Vite with plugins

Getting Started

Core Concepts

Guides

CLI

Quickstart

Quickstart

Prerequisites

Scaffolding Your First Project

Using Command Line Options

Available Templates

Manual Installation

Understanding the Project Structure

index.html and Project Root

NPM Scripts

Community Templates

Try Vite Online

Vanilla JavaScript

React

Vue

Svelte

Next Steps

Features

Configuration

Plugins

​Quickstart

​Prerequisites

​Scaffolding Your First Project

​Using Command Line Options

​Available Templates

​Manual Installation

​Understanding the Project Structure

​index.html and Project Root

​NPM Scripts

​Community Templates

​Try Vite Online

Vanilla JavaScript

React

Vue

Svelte

​Next Steps

Features

Configuration

Plugins

Quickstart

Prerequisites

Scaffolding Your First Project

Using Command Line Options

Available Templates

Manual Installation

Understanding the Project Structure

index.html and Project Root

NPM Scripts

Community Templates

Try Vite Online

Next Steps