Vite

https://vite.dev/
Admin
Vite is a blazing fast frontend build tool that redefines developer experience with instant server...
Tokens:80,803
Snippets:697
Trust Score:9.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Start Vite dev server with Bun

Source: https://vite.dev/guide

Starts the local development server using bunx.

```bash
$ bunx vite
```

--------------------------------

### Create a Vite project with Deno

Source: https://vite.dev

Initialize a new Vite application setup using Deno.

```bash
$ deno init --npm vite
```

--------------------------------

### Start Vite dev server with pnpm

Source: https://vite.dev/guide

Starts the local development server using pnpm.

```bash
$ pnpm vite
```

--------------------------------

### Start Vite dev server with Yarn

Source: https://vite.dev/guide

Starts the local development server using Yarn.

```bash
$ yarn vite
```

--------------------------------

### Start Vite dev server with Deno

Source: https://vite.dev/guide

Starts the local development server with all permissions enabled using Deno.

```bash
$ deno run -A npm:vite
```

--------------------------------

### Install Vite CLI with Bun

Source: https://vite.dev/guide

Installs the Vite CLI as a development dependency using Bun.

```bash
$ bun add -D vite
```

--------------------------------

### preview

Source: https://vite.dev/guide/api-javascript

Starts a preview server to view the production build output. Returns a PreviewServer instance.

```APIDOC
## preview(inlineConfig?)

### Description
Starts a local preview server for inspecting production build output.

### Type Signature
```ts
async function preview(inlineConfig?: InlineConfig): Promise<PreviewServer>
```

### Parameters
- **inlineConfig** (`InlineConfig`, optional) - User configuration options, plus `mode` and `configFile`.

### Return Value
- `Promise<PreviewServer>` - Resolves with the `PreviewServer` instance.

### Example Usage
```ts
import { preview } from 'vite'

const previewServer = await preview({
  // any valid user config options, plus `mode` and `configFile`
  preview: {
    port: 8080,
    open: true,
  },
})

previewServer.printUrls()
previewServer.bindCLIShortcuts({ print: true })
```
```

--------------------------------

### Start a preview server using `preview`

Source: https://vite.dev/guide/api-javascript

Launches a preview server with custom preview options, prints the server URLs, and binds CLI shortcut keys.

```ts
import { preview } from 'vite'

const previewServer = await preview({
  // any valid user config options, plus `mode` and `configFile`
  preview: {
    port: 8080,
    open: true,
  },
})

previewServer.printUrls()
previewServer.bindCLIShortcuts({ print: true })
```

--------------------------------

### Start Vite dev server with npx

Source: https://vite.dev/guide

Starts the local development server using npx to execute the Vite CLI.

```bash
$ npx vite
```

--------------------------------

### Create a Vite project with pnpm

Source: https://vite.dev

Initialize a new Vite project setup using pnpm.

```bash
$ pnpm create vite
```

--------------------------------

### Start Vite dev server with vite [root]

Source: https://vite.dev/guide/cli

Starts the Vite development server in the specified root directory or current directory. `vite dev` and `vite serve` are aliases for this command.

```bash
vite [root]
```

--------------------------------

### Install Vite CLI with pnpm

Source: https://vite.dev/guide

Installs the Vite CLI as a development dependency using pnpm.

```bash
$ pnpm add -D vite
```

--------------------------------

### Preview production build with vite preview

Source: https://vite.dev/guide/cli

Starts a local web server serving the build output directory (default `dist`). Run `vite build` beforehand to ensure the build directory is up-to-date; do not use as a production server.

```bash
vite preview [root]
```

--------------------------------

### Install Vite CLI with Deno

Source: https://vite.dev/guide

Installs the Vite CLI package as a development dependency using Deno.

```bash
$ deno add -D npm:vite
```

--------------------------------

### Configure package.json for multiple entries library

Source: https://vite.dev/guide/build

Recommended package.json setup for a multi-entry library with export mappings for root and secondary entry points targeting ES and CJS files.

```json
{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.cjs"
    },
    "./secondary": {
      "import": "./dist/secondary.js",
      "require": "./dist/secondary.cjs"
    }
  }
}
```

--------------------------------

### Configure package.json for single entry library

Source: https://vite.dev/guide/build

Recommended package.json setup for a single-entry library exporting ES (module/import) and UMD (main/require) bundles.

```json
{
  "name": "my-lib",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/my-lib.umd.cjs",
  "module": "./dist/my-lib.js",
  "exports": {
    ".": {
      "import": "./dist/my-lib.js",
      "require": "./dist/my-lib.umd.cjs"
    }
  }
}
```

--------------------------------

### Example license metadata JSON output with build.license

Source: https://vite.dev/config/build-options

Generated raw JSON metadata format produced when build.license.fileName is configured with a .json extension.

```json
[
  {
    "name": "dep-1",
    "version": "1.2.3",
    "identifier": "CC0-1.0",
    "text": "CC0 1.0 Universal\n\n..."
  },
  {
    "name": "dep-2",
    "version": "4.5.6",
    "identifier": "MIT",
    "text": "MIT License\n\n..."
  }
]
```

--------------------------------

### vite preview

Source: https://vite.dev/guide/cli

Locally preview the production build from the build directory. This command starts a local server using the built assets and applies relevant middleware based on configured app type.

```APIDOC
## vite preview

### Description
Locally preview the production build. Starts a server in the build directory (by default `dist`). Do not use this as a production server as it is not designed for it.

### Usage
```bash
vite preview [root] [options]
```

### Arguments
- **root** (`string`, optional) - The project root directory.

### Options
- **`--host [host]`** (`string`) - Specify hostname.
- **`--port <port>`** (`number`) - Specify port.
- **`--strictPort`** (`boolean`) - Exit if specified port is already in use.
- **`--open [path]`** (`boolean | string`) - Open browser on startup.
- **`--outDir <dir>`** (`string`) - Output directory (default: `dist`).
- **`-c, --config <file>`** (`string`) - Use specified config file.
- **`--base <path>`** (`string`) - Public base path (default: `/`).
- **`-l, --logLevel <level>`** (`string`) - Log level: `info` | `warn` | `error` | `silent`.
- **`--clearScreen`** (`boolean`) - Allow/disable clear screen when logging.
- **`--configLoader <loader>`** (`string`) - Use `bundle` to bundle config with Rolldown, `runner` (experimental) to process on the fly, or `native` (experimental) to load using native runtime (default: `bundle`).
- **`-d, --debug [feat]`** (`string | boolean`) - Show debug logs.
- **`-f, --filter <filter>`** (`string`) - Filter debug logs.
- **`-m, --mode <mode>`** (`string`) - Set env mode.
- **`-h, --help`** - Display available CLI options.
```

--------------------------------

### Scaffold a project template with tiged

Source: https://vite.dev/guide

Clones a community template repository locally, installs dependencies, and launches the development server.

```bash
npx tiged user/project my-project
cd my-project

npm install
npm run dev
```

--------------------------------

### Configure parallel environment builds with builder.buildApp in vite.config.js

Source: https://vite.dev/guide/api-environment-frameworks

Customize how environments are built during app build by defining builder.buildApp in vite.config.js. This example executes builds for all configured environments concurrently with Promise.all.

```javascript
import { defineConfig } from 'vite'

export default defineConfig({
  builder: {
    buildApp: async (builder) => {
      const environments = Object.values(builder.environments)
      await Promise.all(
        environments.map((environment) => builder.build(environment)),
      )
    },
  },
})
```

--------------------------------

### Sample .vite/manifest.json production build output

Source: https://vite.dev/guide/backend-integration

Example structure of `.vite/manifest.json` generated during `vite build`, mapping source files to output bundles, imports, dynamic imports, and CSS assets.

```json
{
  "_shared-B7PI925R.js": {
    "file": "assets/shared-B7PI925R.js",
    "name": "shared",
    "css": ["assets/shared-ChJ_j-JJ.css"]
  },
  "_shared-ChJ_j-JJ.css": {
    "file": "assets/shared-ChJ_j-JJ.css",
    "src": "_shared-ChJ_j-JJ.css"
  },
  "logo.svg": {
    "file": "assets/logo-BuPIv-2h.svg",
    "src": "logo.svg"
  },
  "baz.js": {
    "file": "assets/baz-B2H3sXNv.js",
    "name": "baz",
    "src": "baz.js",
    "isDynamicEntry": true
  },
  "views/bar.js": {
    "file": "assets/bar-gkvgaI9m.js",
    "name": "bar",
    "src": "views/bar.js",
    "isEntry": true,
    "imports": ["_shared-B7PI925R.js"],
    "dynamicImports": ["baz.js"]
  },
  "views/foo.js": {
    "file": "assets/foo-BRBmoGS9.js",
    "name": "foo",
    "src": "views/foo.js",
    "isEntry": true,
    "imports": ["_shared-B7PI925R.js"],
    "css": ["assets/foo-5UjPuW-k.css"]
  }
}
```

--------------------------------

### Start Vite with the native config loader

Source: https://vite.dev/config

Executes the original config file directly so breakpoints in the config file and plugin hooks map to the original source. Requires a runtime supporting the syntax used by the config file, such as Node.js 22.18+ for TypeScript.

```bash
vite --configLoader native
```

--------------------------------

### Preview the production build locally using npm

Source: https://vite.dev/guide/static-deploy

Boots up a local static web server serving files from the dist directory at http://localhost:4173.

```bash
$ npm run preview
```

--------------------------------

### Install Vite CLI with Yarn

Source: https://vite.dev/guide

Installs the Vite CLI as a development dependency using Yarn.

```bash
$ yarn add -D vite
```

--------------------------------

### Install Vite CLI with npm

Source: https://vite.dev/guide

Installs the Vite CLI as a development dependency using npm.

```bash
$ npm install -D vite
```

--------------------------------

### Create a Vite project with npm

Source: https://vite.dev

Run the npm initialization command to scaffold a new Vite application interactively.

```bash
$ npm create vite@latest
```

--------------------------------

### Install esbuild for CSS minification

Source: https://vite.dev/config/build-options

Installs esbuild as a dev dependency required when setting build.cssMinify to 'esbuild'.

```sh
npm add -D esbuild
```

--------------------------------

### Install esbuild and terser minifiers

Source: https://vite.dev/config/build-options

Installs optional minifier dependencies when configuring build.minify to use 'esbuild' or 'terser'.

```sh
npm add -D esbuild
npm add -D terser
```

--------------------------------

### Create a Vite project with Bun

Source: https://vite.dev

Scaffold a new Vite project using the Bun runtime and package manager.

```bash
$ bun create vite
```

--------------------------------

### Create index.html entry point

Source: https://vite.dev/guide

Defines a basic index.html entry point for Vite to serve at http://localhost:5173.

```html
<p>Hello Vite!</p>
```

--------------------------------

### Configure library mode with a single entry point in vite.config.js

Source: https://vite.dev/guide/build

Use build.lib with a string entry point to bundle a single library entry into ES and UMD formats. External dependencies like Vue should be configured under rolldownOptions with corresponding UMD global names.

```js
import { resolve } from 'node:path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(import.meta.dirname, 'lib/main.js'),
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'my-lib',
    },
    rolldownOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})
```

--------------------------------

### Type signature for `preview` function

Source: https://vite.dev/guide/api-javascript

Defines the TypeScript signature for Vite's programmatic `preview` function which starts a preview server.

```ts
async function preview(inlineConfig?: InlineConfig): Promise<PreviewServer>
```

--------------------------------

### Configure index.html with client entry and SSR placeholder

Source: https://vite.dev/guide/ssr

References entry-client.js and provides a placeholder where server-rendered markup will be injected.

```html
<div id="app"><!--ssr-outlet--></div>
<script type="module" src="/src/entry-client.js"></script>
```

--------------------------------

### Build for staging mode with .env.staging

Source: https://vite.dev/guide/env-and-mode

Pass the --mode flag to overwrite the default command mode and load configuration from the matching .env.staging file.

```bash
vite build --mode staging
```

```env
VITE_APP_TITLE=My App (staging)
```

--------------------------------

### Inspect transformation timing logs with debug mode

Source: https://vite.dev/guide/performance

Example output when running Vite with the debug transform flag to identify slow or frequently transformed files that may cause waterfalls.

```bash
vite:transform 28.72ms /@vite/client +1ms
vite:transform 62.95ms /src/components/BigComponent.vue +1ms
vite:transform 102.54ms /src/utils/big-utils.js +1ms
```

--------------------------------

### Configure server.warmup for client and SSR files

Source: https://vite.dev/config/server-options

Transforms and caches frequently used client and SSR files on server startup to improve initial load time and prevent transform waterfalls.

```javascript
export default defineConfig({
  server: {
    warmup: {
      clientFiles: ['./src/components/*.vue', './src/utils/big-utils.js'],
      ssrFiles: ['./src/server/modules/*.js'],
    },
  },
})
```

--------------------------------

### Configure license postBanner in build options

Source: https://vite.dev/config/build-options

Sets up license generation and outputs a banner comment referencing dependency licenses via rolldownOptions.

```javascript
export default 
defineConfig
({
  
build
: {
    
license
: true,
    
rolldownOptions
: {
      
output
: {
        
postBanner
:
          '/* See licenses of bundled dependencies at https://example.com/license.md */',
      },
    },
  },
})
```
Tokens:
Raw