Skip to main content

​
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:
1

Run create-vite

Choose your package manager and run the create command:
npm create vite@latest
2

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.
3

Install dependencies

Navigate to your project directory and install dependencies:
cd my-project
npm install
4

Start the dev server

Run the development server:
npm run 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
Use . for the project name to scaffold in the current directory.

​
Available Templates

Vite supports a wide range of official templates:
JavaScriptTypeScript
vanillavanilla-ts
vuevue-ts
reactreact-ts
react-swcreact-swc-ts
preactpreact-ts
litlit-ts
sveltesvelte-ts
solidsolid-ts
qwikqwik-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:
1

Install Vite

Add Vite as a dev dependency:
npm install -D vite
2

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>
3

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>
`
4

Run Vite

Start the development server:
npx 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

Build docs developers (and LLMs) love

Get started for freeTalk to us