Vite

https://v7.vite.dev
Admin
Vite is a blazing fast frontend build tool that provides instant server start, lightning fast HMR,...
Tokens:137,572
Snippets:1,022
Trust Score:9.9
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install Vercel CLI and initialize a Vite project

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

Installs the Vercel CLI globally and initializes a new Vite example project. After initialization, change into the project folder and run `vercel` to deploy.

```bash
$ npm i -g vercel
$ vercel init vite
Vercel CLI
> Success! Initialized "vite" example in ~/your-folder.
- To deploy, `cd vite` and run `vercel`.
```

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

### createServer Example Usage

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

Example of using createServer to start a Vite server with custom configuration.

```ts
import { fileURLToPath } from 'node:url'
import { createServer } from 'vite'

const __dirname = fileURLToPath(new URL('.', import.meta.url))

const server = await createServer({
  // any valid user config options, plus `mode` and `configFile`
  configFile: false,
  root: __dirname,
  server: {
    port: 1337,
  },
})
await server.listen()

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

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

### server.open configuration example

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

Sets the server to open the app in the browser on server start, using the given string as the URL pathname. The value can be a boolean or a string.

```javascript
server.open = '/docs'
```

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

### Create a new Vite project with npm init

Source: https://v7.vite.dev/blog/announcing-vite2

Command to scaffold a new Vite project using the official starter template. Run this in your terminal to get started with Vite 2.0.

```bash
npm init @vitejs/app
```

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

### configurePreviewServer hook example

Source: https://v7.vite.dev/guide/api-plugin

Shows how to use the configurePreviewServer hook to inject a middleware after other middlewares are installed by returning a post hook.

```javascript
const myPlugin = () => ({
  name: 'configure-preview-server',
  configurePreviewServer(server) {
    // return a post hook that is called after other middlewares are
    // installed
    return () => {
      server.middlewares.use((req, res, next) => {
        // custom handle request...
      })
    }
  },
})
```

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

### server.proxy configuration example

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

Configures custom proxy rules for the Vite dev server using an object of key-options pairs. Requests whose path starts with a key are proxied to the specified target; keys starting with ^ are treated as RegExp. The example shows the string shorthand form where a request to http://localhost:5173/foo is proxied to the target.

```javascript
export default defineConfig({
  server: {
    proxy: {
      // string shorthand:
      // http://localhost:5173/foo
      // -> http://localhost:5174/foo
      '/foo': 'http://localhost:5174/foo',
      // with options
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // with RegEx (note: don't use the ^ prefix with the key, use the `bypass` option instead) 
      '^/api/.*': { target: 'http://jsonplaceholder.typicode.com' },
      // with a function to bypass the proxy (optional) 
      '/api': { bypass: (req, res, proxyOptions) => { /* ... */ } } // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!code --] // [!
```

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

### Example .env.testing file for development build

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

To run a development build with a different mode, set NODE_ENV=development in a .env file. This example uses .env.testing.

```env
NODE_ENV=development
```

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

### preview function usage example

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

Example usage of the preview function, configuring a preview server with port 8080 and open true, then printing URLs and binding CLI shortcuts.

```typescript
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 })
```

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

### Install Lightning CSS

Source: https://v7.vite.dev/guide/features

Command to install the optional lightningcss dependency for experimental Lightning CSS support.

```bash
npm add -D lightningcss
```

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

### Library entry file (lib/main.js)

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

Example entry file that exports components for the library.

```js
import Foo from './Foo.vue'
import Bar from './Bar.vue'
export { Foo, Bar }
```

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

### build.license JSON metadata example

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

Example of the raw JSON metadata generated when build.license.fileName ends with .json. Contains an array of objects with name, version, identifier, and text fields for each bundled dependency.

```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..."
  }
]
```

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

### preview(inlineConfig?)

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

Starts a preview server for the built project. Accepts an optional InlineConfig object and returns a Promise resolving to a PreviewServer instance.

```APIDOC
## `preview`

### Description
Starts a preview server for the built project. Accepts an optional InlineConfig object and returns a Promise resolving to a PreviewServer instance.

### Method
`preview` (async function)

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

### Parameters
- `inlineConfig` (InlineConfig) - Optional - Configuration object for the preview server.

### Example Usage
```ts twoslash
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 })
```

### Returns
- `Promise<PreviewServer>` - The preview server instance.
```

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

### Install CSS pre-processors

Source: https://v7.vite.dev/guide/features

Commands to install the required pre-processor packages for Sass, Less, and Stylus support in Vite.

```bash
# .scss and .sass
npm add -D sass-embedded # or sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus
```

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

### Install Terser for build.minify

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

Required when setting build.minify to 'terser'. Run this command to install the Terser package.

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

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

### configurePreviewServer

Source: https://v7.vite.dev/guide/api-plugin

Hook to configure the preview server. Called before other middlewares are installed; can return a function to inject middleware after internal middlewares are installed.

```APIDOC
## configurePreviewServer

### Description
Hook to configure the preview server. Called before other middlewares are installed. Can return a function to inject middleware after internal middlewares are installed.

### Type
`(server: PreviewServer) => (() => void) | void | Promise<(() => void) | void>`

### Kind
`async`, `sequential`

### See Also
[PreviewServer](./api-javascript#previewserver)

### Usage
Return a function from `configurePreviewServer` to inject middleware after internal middlewares are installed.

### Example
```js
const myPlugin = () => ({
  name: 'configure-preview-server',
  configurePreviewServer(server) {
    // return a post hook that is called after other middlewares are
    // installed
    return () => {
      server.middlewares.use((req, res, next) => {
        // custom handle request...
      })
    }
  },
})
```
```

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

### server.origin configuration example

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

Sets the origin of generated asset URLs during development. Use this when the dev server is accessed through a different origin than the default. The example configures the origin to 'http://127.0.0.1:8080'.

```JavaScript
export default defineConfig({
  server: {
    origin: 'http://127.0.0.1:8080',
  },
})
```

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

### Start Vite dev server

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

Starts the Vite dev server in the current directory. `vite dev` and `vite serve` are aliases for `vite`. The `[root]` argument specifies the project root directory.

```bash
vite [root]
```

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

### Configure modulePreload.resolveDependencies

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

Example configuration for build.modulePreload.resolveDependencies, filtering dependencies based on a condition.

```javascript
/** @type {import('vite').UserConfig} */
const config = {
  // prettier-ignore
  build: {
// ---cut-before---
modulePreload: {
  resolveDependencies: (filename, deps, { hostId, hostType }) => {
    return deps.filter(condition)
  },
},
// ---cut-after---
  },
}
```

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

### Example generated license file (.vite/license.md)

Source: https://v7.vite.dev/guide/features

Shows the structure of the generated license file, listing each dependency with its version and license type. The actual content includes full license texts.

```Markdown
# Licenses

The app bundles dependencies which contain the following licenses:

## dep-1 - 1.2.3 (CC0-1.0)

CC0 1.0 Universal

...

## dep-2 - 4.5.6 (MIT)

MIT License

...
```

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

### Install Vite from a specific commit using pkg.pr.new

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

Install a specific commit of Vite using pkg.pr.new with npm, Yarn, pnpm, or Bun. Replace SHA with a commit SHA from the last month.

```bash
npm install -D https://pkg.pr.new/vite@SHA
```

```bash
yarn add -D https://pkg.pr.new/vite@SHA
```

```bash
pnpm add -D https://pkg.pr.new/vite@SHA
```

```bash
bun add -D https://pkg.pr.new/vite@SHA
```

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

### Install @vitejs/plugin-legacy

Source: https://v7.vite.dev/guide/using-plugins

Install the official legacy browser plugin as a dev dependency.

```bash
$ npm add -D @vitejs/plugin-legacy
```

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

### Install Vite CLI with npm, Yarn, pnpm, Bun, or Deno

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

Install the Vite CLI as a dev dependency using your preferred package manager. Choose the command that matches your environment.

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

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

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

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

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

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

### Example .env.staging file

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

Create a .env.staging file to provide env variables for the staging mode. This file sets VITE_APP_TITLE to a staging-specific value.

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

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

### .env file with VITE_ prefix example

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

Shows a .env file with a VITE_ prefixed variable and a non-prefixed variable. Only VITE_SOME_KEY is exposed to client code.

```dotenv
VITE_SOME_KEY=123
DB_PASSWORD=foobar
```

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

### build function usage example (vite.config.js)

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

Example usage of the build function with a root path, base path, and rollupOptions. Uses node:path and node:url to resolve the current directory.

```typescript
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { build } from 'vite'

const __dirname = fileURLToPath(new URL('.', import.meta.url))

await build({
  root: path.resolve(__dirname, './project'),
  base: '/foo/',
  build: {
    rollupOptions: {
      // ...
    },
  },
})
```

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

### Run Vite dev server with npm, Yarn, pnpm, Bun, or Deno

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

Start the Vite dev server using the appropriate command for your package manager. The index.html will be served at http://localhost:5173.

```bash
$ npx vite
```

```bash
$ yarn vite
```

```bash
$ pnpm vite
```

```bash
$ bunx vite
```

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

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

### Example Vite manifest.json after build

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

Shows the structure of the generated .vite/manifest.json file. It maps entry names to chunk details including file, imports, and dynamic imports.

```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"]
  }
}
```

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

### createServer

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

Creates a Vite dev server instance. This is the primary entry point for programmatically starting a Vite development server.

```APIDOC
## createServer

### Description
Creates a Vite dev server instance. This is the primary entry point for programmatically starting a Vite development server.

### Method
async function

### Endpoint
createServer(inlineConfig?: InlineConfig): Promise<ViteDevServer>

### Parameters
#### inlineConfig (InlineConfig) - Optional
- Any valid user config options, plus `mode` and `configFile`.

### Request Example
```ts
import { fileURLToPath } from 'node:url'
import { createServer } from 'vite'

const __dirname = fileURLToPath(new URL('.', import.meta.url))

const server = await createServer({
  // any valid user config options, plus `mode` and `configFile`
  configFile: false,
  root: __dirname,
  server: {
    port: 1337,
  },
})
await server.listen()

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

### Response
#### Success Response
Returns a Promise that resolves to a ViteDevServer instance.

#### Response Example
```ts
const server = await createServer({ ... })
```

### Notes
- When using `createServer` and `build` in the same Node.js process, both functions rely on `process.env.NODE_ENV` to work properly, which also depends on the `mode` config option. To prevent conflicting behavior, set `process.env.NODE_ENV` or the `mode` of the two APIs to `development`. Otherwise, you can spawn a child process to run the APIs separately.
- When using middleware mode combined with proxy config for WebSocket, the parent http server should be provided in `middlewareMode` to bind the proxy correctly.

### Middleware Mode Example
```ts
import http from 'http'
import { createServer } from 'vite'

const parentServer = http.createServer() // or express, koa, etc.

const vite = await createServer({
  server: {
    // Enable middleware mode
    middlewareMode: {
      // Provide the parent http server for proxy WebSocket
      server: parentServer,
    },
    proxy: {
      '/ws': {
        target: 'ws://localhost:3000',
        // Proxying WebSocket
        ws: true,
      },
    },
  },
})

// @noErrors: 2339
parentServer.use(vite.middlewares)
```
```

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

### vite preview usage

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

Locally preview the production build. Starts a server in the build directory (default `dist`). Run `vite build` beforehand to ensure the build directory is up-to-date. Not designed for production use.

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

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

### Create a plugin preset returning an array

Source: https://v7.vite.dev/guide/api-plugin

Example of a framework plugin that returns an array of plugins, used for complex features. The array is flattened internally when used in the plugins option.

```javascript
// framework-plugin
import frameworkRefresh from 'vite-plugin-framework-refresh'
import frameworkDevtools from 'vite-plugin-framework-devtools'

export default function framework(config) {
  return [frameworkRefresh(config), frameworkDevTools(config)]
}
```

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

### Example HTML file with processed asset references

Source: https://v7.vite.dev/guide/features

Shows an HTML file where the link, img, and script elements reference assets that Vite processes and bundles. The highlighted lines (4-5, 8-9) indicate the elements that are processed.

```html
<!doctype html>
<html>
  <head>
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/src/styles.css" />
  </head>
  <body>
    <img src="/src/images/logo.svg" alt="logo" />
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
```

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

### Build with staging mode

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

Use the --mode flag to override the default mode for vite build. This example builds for staging mode.

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

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

### Example .env.production file

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

When running vite build, Vite loads env variables from .env.production if present. This file sets VITE_APP_TITLE.

```env
VITE_APP_TITLE=My App
```

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

### defineConfig helper for Vite config

Source: https://v7.vite.dev/config

Use the defineConfig helper to get intellisense without JSDoc annotations.

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

export default defineConfig({
  // ...
})
```

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

### Scaffold a project with tiged

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

Use tiged to create a local copy of a GitHub template and start the dev server. Assumes the project uses 'main' as the default branch.

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

npm install
npm run dev
```

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

### GitHub Pages deployment workflow (deploy.yml)

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

Sample GitHub Actions workflow that installs dependencies with npm, builds the site, and deploys it whenever you push changes to the main branch. Create this file at .github/workflows/deploy.yml.

```yaml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

```

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

### Client side: Listen to events with import.meta.hot.on

Source: https://v7.vite.dev/guide/api-plugin

On the client side, use `import.meta.hot.on` to listen to events sent from the server. The example logs the message 'hello'.

```typescript
import 'vite/client'
// ---cut---
// client side
if (import.meta.hot) {
  import.meta.hot.on('my:greetings', (data) => {
    console.log(data.msg) // hello
  })
}
```

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

### Bare module import example

Source: https://v7.vite.dev/guide/features

Shows a bare module import that browsers cannot resolve natively. Vite detects such imports and rewrites them to valid URLs after pre-bundling.

```javascript
import { someMethod } from 'my-dep'
```

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

### Configure CSS preprocessor options for Less, Stylus, and SCSS

Source: https://v7.vite.dev/config/shared-options

Example of using css.preprocessorOptions to pass options to Less, Stylus, and SCSS preprocessors. The file extensions are used as keys. For Stylus, only the 'define' option is supported. For SCSS, the 'importers' option is shown with a placeholder comment.

```JavaScript
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        math: 'parens-division',
      },
      styl: {
        define: {
          $specialColor: new stylus.nodes.RGBA(51, 197, 255, 1),
        },
      },
      scss: {
        importers: [
          // ...
        ],
      },
    },
  },
})
```

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

### Start Vite dev server with Node.js inspector

Source: https://v7.vite.dev/guide/troubleshooting

Run the Vite dev server with the built-in Node.js inspector to create a CPU profile. After the app loads, press `p` to stop the inspector and `q` to stop the dev server.

```bash
vite --profile --open
```

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

### mergeConfig with defineConfig to merge callback config

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

Example showing how to use defineConfig and mergeConfig to merge a config in callback form with an object config. mergeConfig only accepts config in object form, so call the callback before passing it.

```ts
import {
  defineConfig,
  mergeConfig,
  type UserConfigFnObject,
  type UserConfig,
} from 'vite'
declare const configAsCallback: UserConfigFnObject
declare const configAsObject: UserConfig

// ---cut---
export default defineConfig((configEnv) =>
  mergeConfig(configAsCallback(configEnv), configAsObject),
)
```

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

### Create and use a FetchableDevEnvironment with handleRequest and dispatchFetch

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

Creates a Vite server in middleware mode with a custom environment using createFetchableDevEnvironment, providing a handleRequest callback that receives a Request and returns a Response. After setup, any consumer can call dispatchFetch on the environment to send a request, guarded by the isFetchableDevEnvironment type check.

```ts
import {
  createServer,
  createFetchableDevEnvironment,
  isFetchableDevEnvironment,
} from 'vite'

const server = await createServer({
  server: { middlewareMode: true },
  appType: 'custom',
  environments: {
    custom: {
      dev: {
        createEnvironment(name, config) {
          return createFetchableDevEnvironment(name, config, {
            handleRequest(request: Request): Promise<Response> | Response {
              // handle Request and return a Response
            },
          })
        },
      },
    },
  },
})

// Any consumer of the environment API can now call `dispatchFetch`
if (isFetchableDevEnvironment(server.environments.custom)) {
  const response: Response = await server.environments.custom.dispatchFetch(
    new Request('/request-to-handle'),
  )```jsona valid```json
{
  
```

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

### configureServer hook: inject post middleware

Source: https://v7.vite.dev/guide/api-plugin

Example of returning a function from `configureServer` to inject a middleware after internal middlewares are installed.

```javascript
const myPlugin = () => ({
  name: 'configure-server',
  configureServer(server) {
    // return a post hook that is called after internal middlewares are
    // installed
    return () => {
      server.middlewares.use((req, res, next) => {
        // custom handle request...
      })
    }
  },
})
```

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

### Build and link Vite from source

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

Clone the Vite repository, build it, and link it globally using pnpm. Then link it in your project and restart the dev server to use the bleeding-edge version.

```bash
git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # use your preferred package manager for this step
```

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

### configureServer hook: add custom middleware

Source: https://v7.vite.dev/guide/api-plugin

Example of adding a custom middleware to the internal connect app. The hook is called before internal middlewares are installed, so custom middlewares run first by default.

```javascript
const myPlugin = () => ({
  name: 'configure-server',
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      // custom handle request...
    })
  },
})
```

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

### configureServer hook: store server access

Source: https://v7.vite.dev/guide/api-plugin

Example of storing the dev server instance in `configureServer` for use in other hooks like `transform`. Note: `configureServer` is not called during production build, so other hooks must guard against its absence.

```javascript
const myPlugin = () => {
  let server
  return {
    name: 'configure-server',
    configureServer(_server) {
      server = _server
    },
    transform(code, id) {
      if (server) {
        // use server...
      }
    },
  }
}
```

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

### Configure custom SSR environment with customEnvironment

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

Use `customEnvironment` from `vite-environment-provider` to define an environment with its own build output directory. The example sets the client build output to `/dist/client` and the SSR environment's build output to `/dist/ssr`.

```javascript
import { customEnvironment } from 'vite-environment-provider'

export default {
  build: {
    outDir: '/dist/client',
  },
  environments: {
    ssr: customEnvironment({
      build: {
        outDir: '/dist/ssr',
      },
    }),
  },
}

```

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

### Create an index.html file

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

Create an index.html file in your project root. This file is the entry point for Vite during development.

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

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

### HTML tags for entry point views/foo.js

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

Recommended HTML tags for the entry point views/foo.js in production, including CSS links, script module, and optional modulepreload.

```html
<link rel="stylesheet" href="assets/foo-5UjPuW-k.css" />
<link rel="stylesheet" href="assets/shared-ChJ_j-JJ.css" />
<script type="module" src="assets/foo-BRBmoGS9.js"></script>
<!-- optional -->
<link rel="modulepreload" href="assets/shared-B7PI925R.js" />
```

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

### Recommended package.json for multiple entries library

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

Package.json configuration for a library with multiple entries, exposing both main and secondary entry points.

```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"
    }
  }
}
```

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

### ModuleRunner Example Usage

Source: https://v7.vite.dev/guide/api-environment-runtimes

Example of creating a ModuleRunner with ESModulesEvaluator and a custom transport, then importing an entry point. Note that the module runner does not update the exports object on full-reload; you must re-import or fetch from evaluatedModules.

```js
import {
  ModuleRunner,
  ESModulesEvaluator,
  createNodeImportMeta,
} from 'vite/module-runner'
import { transport } from './rpc-implementation.js'

const moduleRunner = new ModuleRunner(
  {
    transport,
    createImportMeta: createNodeImportMeta, // if the module runner runs in Node.js
  },
  new ESModulesEvaluator(),
)

await moduleRunner.import('/src/entry-point.js')
```

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

### optimizeDeps.include example for CommonJS nested dependency

Source: https://v7.vite.dev/config/dep-optimization-options

When an ESM dependency is excluded from optimization but has a nested CommonJS dependency, add the CommonJS dependency to optimizeDeps.include. This example shows the configuration using the 'esm-dep > cjs-dep' syntax.

```javascript
import { defineConfig } from 'vite'
// ---cut---
export default defineConfig({
  optimizeDeps: {
    include: ['esm-dep > cjs-dep'],
  },
})
```

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

### customLogger: Customize Vite logger to filter warnings

Source: https://v7.vite.dev/config/shared-options

Use this configuration to customize Vite's default logger, for example to ignore specific warnings. The example overrides the warn method to skip empty CSS file warnings.

```ts
import { createLogger, defineConfig } from 'vite'

const logger = createLogger()
const loggerWarn = logger.warn

logger.warn = (msg, options) => {
  // Ignore empty CSS files warning
  if (msg.includes('vite:css') && msg.includes(' is empty')) return
  loggerWarn(msg, options)
}

export default defineConfig({
  customLogger: logger,
})
```

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

### Inject additional data into SCSS styles with additionalData

Source: https://v7.vite.dev/config/shared-options

Example of using css.preprocessorOptions[extension].additionalData to inject extra code into each style content. The example injects a SCSS variable. Note that if actual styles are included, they will be duplicated in the final bundle.

```JavaScript
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`,
      },
    },
  },
})
```

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

### transformIndexHtml basic example

Source: https://v7.vite.dev/guide/api-plugin

Basic usage of the transformIndexHtml hook to replace the title tag in the HTML.

```javascript
const htmlPlugin = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html) {
      return html.replace(
        /<title>(.*?)<\/title>/,
        `<title>Title replaced!</title>`,
      )
    },
  }
}
```

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

### RunnableDevEnvironment and ModuleRunner class definitions with usage example

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

Shows the RunnableDevEnvironment class extending DevEnvironment with a public runner property of type ModuleRunner, the ModuleRunner class with an async import method, and a usage example guarding with isRunnableDevEnvironment before importing a module. The runner is evaluated lazily on first access, and Vite enables source map support when the runner is created.

```typescript
export class RunnableDevEnvironment extends DevEnvironment {
  public readonly runner: ModuleRunner
}

class ModuleRunner {
  /**
   * URL to execute.
   * Accepts file path, server path, or id relative to the root.
   * Returns an instantiated module (same as in ssrLoadModule)
   */
  public async import(url: string): Promise<Record<string, any>>
  /**
   * Other ModuleRunner methods...
   */
}

if (isRunnableDevEnvironment(server.environments.ssr)) {
  await server.environments.ssr.runner.import('/entry-point.js')
}
```

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

### Configure server.warmup with clientFiles and ssrFiles

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

Warms up frequently used files to transform and cache them in advance, improving initial page load during server starts. `clientFiles` targets client-only files and `ssrFiles` targets SSR-only files, both accepting file paths or tinyglobby patterns relative to the root. Only add frequently used files to avoid overloading the Vite dev server on startup.

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

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

### Scaffold a new Vite project with Bun

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

Run this command to create a new Vite project using Bun. Requires Node.js 20.19+ or 22.12+. Follow the interactive prompts after running.

```bash
$ bun create vite
```

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

### Conditional Application with `apply` Function

Source: https://v7.vite.dev/guide/api-plugin

Use a function for more precise control. This example applies the plugin only on build but not for SSR.

```javascript
apply(config, { command }) {
  // apply only on build but not for SSR
  return command === 'build' && !config.build.ssr
}
```

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

### Server-side handleInvoke example

Source: https://v7.vite.dev/guide/api-environment-runtimes

Handles HTTP POST requests to /invoke by calling customEnvironment.hot.handleInvoke with the payload and returning the result as JSON.

```typescript
const customEnvironment = new DevEnvironment(name, config, context)

server.onRequest((request: Request) => {
  const url = new URL(request.url)
  if (url.pathname === '/invoke') {
    const payload = (await request.json()) as HotPayload
    const result = customEnvironment.hot.handleInvoke(payload)
    return new Response(JSON.stringify(result))
  }
  return Response.error()
})
```

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

### Vite CLI startup output

Source: https://v7.vite.dev/blog/announcing-vite3

Shows the new Vite 3 CLI output with the default dev server port 5173. The preview server now listens at 4173.

```text
  **VITE** v3.0.0  ready in **320** ms

  **➜**  **Local**:   http://127.0.0.1:5173/
  **➜**  **Network**: use --host to expose

```

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

### TypeScript config with satisfies operator

Source: https://v7.vite.dev/config

Use the satisfies operator in a TypeScript config file to get type checking and intellisense.

```ts
import type { UserConfig } from 'vite'

export default {
  // ...
} satisfies UserConfig
```

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

### Configure builder.buildApp to build all environments in parallel

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

Use this configuration when you need to customize how environments are built for production. The `buildApp` function receives the builder, iterates over all configured environments, and builds them concurrently with `Promise.all`. This is the build-time equivalent of a `ViteDevServer` and is used when `builder` is not `undefined` or when calling `vite build --app`.

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

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

### Scaffold a new Vite project with Deno

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

Run this command to create a new Vite project using Deno. Requires Node.js 20.19+ or 22.12+. Follow the interactive prompts after running.

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

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

### Using import.meta.env.DEV for tree-shaking

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

Conditional code using `import.meta.env.DEV` is tree-shaken in production builds. The example logs 'Dev mode' only in development.

```javascript
if (import.meta.env.DEV) {
  // code inside here will be tree-shaken in production builds
  console.log('Dev mode')
}
```

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

### Recommended package.json for single entry library

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

Package.json configuration for a library with a single entry, using ESM and UMD builds.

```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"
    }
  }
}
```

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

### Conditional Application with `apply: 'build'`

Source: https://v7.vite.dev/guide/api-plugin

Use the `apply` property to invoke a plugin only during build or serve. In this example, the plugin is applied only during build.

```javascript
function myPlugin() {
  return {
    name: 'build-only',
    apply: 'build', // or 'serve'
  }
}
```

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

### createServer with Middleware Mode and WebSocket Proxy

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

Example of using createServer in middleware mode with a parent HTTP server for WebSocket proxy.

```ts
import http from 'http'
import { createServer } from 'vite'

const parentServer = http.createServer() // or express, koa, etc.

const vite = await createServer({
  server: {
    // Enable middleware mode
    middlewareMode: {
      // Provide the parent http server for proxy WebSocket
      server: parentServer,
    },
    proxy: {
      '/ws': {
        target: 'ws://localhost:3000',
        // Proxying WebSocket
        ws: true,
      },
    },
  },
})

// @noErrors: 2339
parentServer.use(vite.middlewares)
```

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

### Scaffold Vite + Vue project with Deno and template option

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

Use this command to specify the project name and template directly with Deno.

```bash
$ deno init --npm vite my-vue-app --template vue
```

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

### Shared plugin with sharedDuringBuild flag

Source: https://v7.vite.dev/guide/api-environment-plugins

Example of a plugin that shares state among all environments in dev and build by setting `sharedDuringBuild: true`.

```javascript
function myPlugin() {
  // Share state among all environments in dev and build
  const sharedState = ...
  return {
    name: 'shared-plugin',
    transform(code, id) { ... },

    // Opt-in into a single instance for all environments
    sharedDuringBuild: true,
  }
}
```

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

### Scaffold Vite + Vue project with Bun and template option

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

Use this command to specify the project name and template directly with Bun.

```bash
$ bun create vite my-vue-app --template vue
```

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

### preprocessCSS

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

Pre-processes CSS files (e.g., .scss, .less) to plain CSS. Supports CSS modules and requires the corresponding pre-processor to be installed.

```APIDOC
## `preprocessCSS`

* **Experimental:** [Give Feedback](https://github.com/vitejs/vite/discussions/13815)

### Description
Pre-processes `.css`, `.scss`, `.sass`, `.less`, `.styl` and `.stylus` files to plain CSS so it can be used in browsers or parsed by other tools. Similar to the [built-in CSS pre-processing support](/guide/features#css-pre-processors), the corresponding pre-processor must be installed if used.

The pre-processor used is inferred from the `filename` extension. If the `filename` ends with `.module.{ext}`, it is inferred as a [CSS module](https://github.com/css-modules/css-modules) and the returned result will include a `modules` object mapping the original class names to the transformed ones.

Note that pre-processing will not resolve URLs in `url()` or `image-set()`.

### Type Signature
```ts
async function preprocessCSS(
  code: string,
  filename: string,
  config: ResolvedConfig,
): Promise<PreprocessCSSResult>

interface PreprocessCSSResult {
  code: string
  map?: SourceMapInput
  modules?: Record<string, string>
  deps?: Set<string>
}
```

### Parameters
- **code** (string) - Required - The CSS code to pre-process.
- **filename** (string) - Required - The filename of the CSS file.
- **config** (ResolvedConfig) - Required - The resolved Vite config.

### Returns
- **Promise<PreprocessCSSResult>** - The pre-processed result containing the CSS code, optional source map, optional CSS modules mapping, and optional dependencies.
```

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

### CSS Module example.module.css

Source: https://v7.vite.dev/guide/features

Defines a CSS module with a .red class. Importing this file returns a module object with the class name as a property.

```css
.red {
  color: red;
}
```

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

### Glob import with import.meta.glob

Source: https://v7.vite.dev/guide/features

Import multiple modules from the file system using import.meta.glob. Matched files are lazy-loaded by default.

```javascript
import 'vite/client'
// ---cut---
const modules = import.meta.glob('./dir/*.js')
```

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

### Type declarations for define constants

Source: https://v7.vite.dev/config/shared-options

Add type declarations in vite-env.d.ts to get type checks and IntelliSense for constants defined with the define option.

```typescript
// vite-env.d.ts
declare const __APP_VERSION__: string
```

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

### Type-only import and export syntax

Source: https://v7.vite.dev/guide/features

Use `import type` and `export type` to avoid type-only imports being incorrectly bundled. This is a TypeScript syntax example.

```ts
import type { T } from 'only/types'
export type { T }

```

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

### Update lib field in tsconfig.json

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

Set the lib field to include browser environment types like DOM or WebWorker. This example uses WebWorker.

```json
{
  "lib": ["WebWorker"]
}
```

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

### HTML tags for entry point views/bar.js

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

Recommended HTML tags for the entry point views/bar.js in production, including CSS link, script module, and optional modulepreload.

```html
<link rel="stylesheet" href="assets/shared-ChJ_j-JJ.css" />
<script type="module" src="assets/bar-gkvgaI9m.js"></script>
<!-- optional -->
<link rel="modulepreload" href="assets/shared-B7PI925R.js" />
```
Tokens:
Raw