> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/vitejs/vite/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get started with Vite in minutes

# Quickstart

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

## Prerequisites

<Warning>
  Vite requires [Node.js](https://nodejs.org/en/) 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.
</Warning>

## Scaffolding Your First Project

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

<Steps>
  <Step title="Run create-vite">
    Choose your package manager and run the create command:

    <CodeGroup>
      ```bash npm theme={null}
      npm create vite@latest
      ```

      ```bash yarn theme={null}
      yarn create vite
      ```

      ```bash pnpm theme={null}
      pnpm create vite
      ```

      ```bash bun theme={null}
      bun create vite
      ```

      ```bash deno theme={null}
      deno init --npm vite
      ```
    </CodeGroup>
  </Step>

  <Step title="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.
  </Step>

  <Step title="Install dependencies">
    Navigate to your project directory and install dependencies:

    <CodeGroup>
      ```bash npm theme={null}
      cd my-project
      npm install
      ```

      ```bash yarn theme={null}
      cd my-project
      yarn
      ```

      ```bash pnpm theme={null}
      cd my-project
      pnpm install
      ```

      ```bash bun theme={null}
      cd my-project
      bun install
      ```
    </CodeGroup>
  </Step>

  <Step title="Start the dev server">
    Run the development server:

    <CodeGroup>
      ```bash npm theme={null}
      npm run dev
      ```

      ```bash yarn theme={null}
      yarn dev
      ```

      ```bash pnpm theme={null}
      pnpm dev
      ```

      ```bash bun theme={null}
      bun dev
      ```
    </CodeGroup>

    Your app is now running at `http://localhost:5173`!
  </Step>
</Steps>

## 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:

<CodeGroup>
  ```bash npm theme={null}
  # npm 7+, extra double-dash is needed:
  npm create vite@latest my-react-app -- --template react
  ```

  ```bash yarn theme={null}
  yarn create vite my-react-app --template react
  ```

  ```bash pnpm theme={null}
  pnpm create vite my-react-app --template react
  ```

  ```bash bun theme={null}
  bun create vite my-react-app --template react
  ```
</CodeGroup>

<Tip>
  Use `.` for the project name to scaffold in the current directory.
</Tip>

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

<Note>
  React templates come in two variants: standard (using Babel) and SWC (faster compilation). The `react-swc` and `react-swc-ts` templates use [SWC](https://swc.rs/) for faster builds.
</Note>

## Manual Installation

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

<Steps>
  <Step title="Install Vite">
    Add Vite as a dev dependency:

    <CodeGroup>
      ```bash npm theme={null}
      npm install -D vite
      ```

      ```bash yarn theme={null}
      yarn add -D vite
      ```

      ```bash pnpm theme={null}
      pnpm add -D vite
      ```

      ```bash bun theme={null}
      bun add -D vite
      ```
    </CodeGroup>
  </Step>

  <Step title="Create an index.html">
    Create an `index.html` file in your project root:

    ```html index.html theme={null}
    <!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>
    ```
  </Step>

  <Step title="Create your source files">
    Create a `src/main.js` file:

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

  <Step title="Run Vite">
    Start the development server:

    <CodeGroup>
      ```bash npm theme={null}
      npx vite
      ```

      ```bash yarn theme={null}
      yarn vite
      ```

      ```bash pnpm theme={null}
      pnpm vite
      ```

      ```bash bun theme={null}
      bunx vite
      ```
    </CodeGroup>

    Your app will be served at `http://localhost:5173`!
  </Step>
</Steps>

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

<Tip>
  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.
</Tip>

## NPM Scripts

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

```json package.json theme={null}
{
  "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`:

```json package.json theme={null}
{
  "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](https://github.com/vitejs/awesome-vite#templates) 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](https://github.com/tiged/tiged) to scaffold from these templates:

```bash theme={null}
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:

<CardGroup cols={2}>
  <Card title="Vanilla JavaScript" icon="js" href="https://vite.new/vanilla">
    Pure JavaScript starter
  </Card>

  <Card title="React" icon="react" href="https://vite.new/react">
    React with Fast Refresh
  </Card>

  <Card title="Vue" icon="vuejs" href="https://vite.new/vue">
    Vue 3 with SFC support
  </Card>

  <Card title="Svelte" icon="fire" href="https://vite.new/svelte">
    Svelte with HMR
  </Card>
</CardGroup>

## Next Steps

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

<CardGroup cols={3}>
  <Card title="Features" icon="sparkles" href="/features">
    Discover Vite's rich features
  </Card>

  <Card title="Configuration" icon="gear" href="/config">
    Configure Vite for your needs
  </Card>

  <Card title="Plugins" icon="puzzle-piece" href="/plugins">
    Extend Vite with plugins
  </Card>
</CardGroup>