server configuration

30 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

server.host type and default

server.host is of type string | boolean with a default value of 'localhost'. It specifies which IP addresses the server should listen on. Set to '0.0.0.0' or true to listen on all addresses, including LAN and public addresses.

server.allowedHosts type and default

server.allowedHosts is of type string[] | true with a default value of []. It specifies the hostnames that Vite is allowed to respond to. localhost and domains under .localhost and all IP addresses are allowed by default. When using HTTPS, this check is skipped.

server.port type and default

server.port is of type number with a default value of 5173. It specifies the server port. If the port is already being used, Vite will automatically try the next available port so the actual port may differ.

server.strictPort type

server.strictPort is of type boolean. Set to true to exit if port is already in use, instead of automatically trying the next available port.

server.https type

server.https is of type https.ServerOptions. It enables TLS + HTTP/2. The value is an options object passed to https.createServer(). A valid certificate is needed.

server.open type

server.open is of type boolean | string. It automatically opens the app in the browser on server start. When the value is a string, it will be used as the URL's pathname.

server.open example

export default defineConfig({ server: { open: '/docs/index.html', }, })

server.proxy type

server.proxy is of type Record<string, string | ProxyOptions>. It configures custom proxy rules for the dev server. Expects an object of { key: options } pairs. Any requests whose request path starts with that key will be proxied to the specified target.

server.proxy example with multiple rules

export default defineConfig({ server: { proxy: { // string shorthand: // http://localhost:5173/foo // -> http://localhost:4567/foo '/foo': 'http://localhost:4567', // with options: // http://localhost:5173/api/bar // -> http://jsonplaceholder.typicode.com/bar '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, // with RegExp: // http://localhost:5173/fallback/ // -> http://jsonplaceholder.typicode.com/ '^/fallback/.*': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/fallback/, ''), }, // Using the proxy instance '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, configure: (proxy, options) => { // proxy will be an instance of 'http-proxy-3' }, }, // Proxying websockets or socket.io: // ws://localhost:5173/socket.io // -> ws://localhost:5174/socket.io // Exercise caution using `rewriteWsOrigin` as it can leave the // proxying open to CSRF attacks. '/socket.io': { target: 'ws://localhost:5174', ws: true, rewriteWsOrigin: true, }, }, }, })

server.cors type and default

server.cors is of type boolean | CorsOptions with a default value of { origin: /^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/ } which allows localhost, 127.0.0.1 and ::1. It configures CORS for the dev server.

server.headers type

server.headers is of type OutgoingHttpHeaders. It specifies server response headers.

server.hmr type

server.hmr is of type boolean | { overlay?: boolean }. It disables or configures HMR behavior. Set server.hmr.overlay to false to disable the server error overlay.

server.ws type

server.ws is of type false | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, clientPort?: number, server?: Server }. It configures WebSocket connection options. Set to false to disable the WebSocket connection entirely. protocol is the WebSocket protocol (ws or wss), host is the WebSocket server host, port is the WebSocket server port, path is the WebSocket path, clientPort overrides the port on the client side, timeout is connection timeout in milliseconds (default: 30000), and server uses a custom HTTP server for WebSocket connections.

server.ws example

export default defineConfig({ server: { ws: { protocol: 'wss', host: 'localhost', port: 3001, }, }, })

server.forwardConsole type and default

server.forwardConsole is of type boolean | { unhandledErrors?: boolean, logLevels?: ('error' | 'warn' | 'info' | 'log' | 'debug')[] } with a default of auto (true when an AI coding agent is detected based on @vercel/detect-agent, otherwise false). It forwards browser runtime events to the Vite server console during development.

server.forwardConsole example

export default defineConfig({ server: { forwardConsole: { unhandledErrors: true, logLevels: ['warn', 'error'], }, }, })

server.warmup type

server.warmup is of type { clientFiles?: string[], ssrFiles?: string[] }. It warms up files to transform and cache the results in advance. clientFiles are files used in the client only, while ssrFiles are files used in SSR only. They accept an array of file paths or tinyglobby patterns relative to the root.

server.warmup example

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

server.watch type

server.watch is of type object | null. It specifies file system watcher options to pass on to chokidar. If set to null, no files will be watched.

server.middlewareMode type and default

server.middlewareMode is of type boolean | { server: http.Server } with a default of false. It creates Vite server in middleware mode.

server.middlewareMode example

import express from 'express' import { createServer as createViteServer } from 'vite' async function createServer() { const app = express() // Create Vite server in middleware mode const vite = await createViteServer({ server: { middlewareMode: true }, // don't include Vite's default HTML handling middlewares appType: 'custom', }) // Use vite's connect instance as middleware app.use(vite.middlewares) app.use('*', async (req, res) => { // Since `appType` is `'custom'`, should serve response here. // Note: if `appType` is `'spa'` or `'mpa'`, Vite includes middlewares // to handle HTML requests and 404s so user middlewares should be added // before Vite's middlewares to take effect instead }) } createServer()

server.fs.strict type and default

server.fs.strict is of type boolean with a default value of true (enabled by default since Vite 2.7). It restricts serving files outside of workspace root.

server.fs.allow type

server.fs.allow is of type string[]. It restricts files that could be served via /@fs/. When server.fs.strict is set to true, accessing files outside this directory list that aren't imported from an allowed file will result in a 403. Both directories and files can be provided.

server.fs.allow example

export default defineConfig({ server: { fs: { // Allow serving files from one level up to the project root allow: ['..'], }, }, })

server.fs.allow with searchForWorkspaceRoot example

import { defineConfig, searchForWorkspaceRoot } from 'vite' export default defineConfig({ server: { fs: { allow: [ // search up for workspace root searchForWorkspaceRoot(process.cwd()), // your custom rules '/path/to/custom/allow_directory', '/path/to/custom/allow_file.demo', ], }, }, })

server.fs.deny type and default

server.fs.deny is of type string[] with a default value of ['.env', '.env.*', '*.{crt,pem,key,p12,pfx,cer,der}', '.npmrc', '.yarnrc.yml', '**/.git/**']. It is a blocklist for sensitive files being restricted to be served by Vite dev server and has higher priority than server.fs.allow.

server.origin type

server.origin is of type string. It defines the origin of the generated asset URLs during development.

server.origin example

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

server.sourcemapIgnoreList type and default

server.sourcemapIgnoreList is of type false | (sourcePath: string, sourcemapPath: string) => boolean with a default of (sourcePath) => sourcePath.includes('node_modules'). It determines whether or not to ignore source files in the server sourcemap, used to populate the x_google_ignoreList source map extension. By default, it excludes all paths containing node_modules.

server.sourcemapIgnoreList example

export default defineConfig({ server: { // This is the default value, and will add all files with node_modules // in their paths to the ignore list. sourcemapIgnoreList(sourcePath, sourcemapPath) { return sourcePath.includes('node_modules') }, }, })

Give your agent this brain