configuration

32 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 default and wildcard behavior

The default value for server.host is 'localhost'. Setting it to '0.0.0.0' or 'true' makes the server listen on all addresses, including LAN and public addresses. This can be set via CLI using '--host 0.0.0.0' or '--host'.

localhost DNS resolution may cause other servers to respond

When using 'localhost', Node.js's dns.setDefaultResultOrder changes how DNS-resolved addresses are ordered, and browsers may use a different resolved address than the one Vite is listening to. Vite prints the resolved address when it differs. When wildcard hosts like '0.0.0.0' are used, servers listening on non-wildcard hosts take priority over those listening on wildcard hosts.

server.allowedHosts configuration

server.allowedHosts is of type 'string[] | true' with default value '[]'. It specifies which hostnames 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. If a string starts with '.', it will allow that hostname without the '.' and all subdomains. For example, '.example.com' will allow 'example.com', 'foo.example.com', and 'foo.bar.example.com'. If set to 'true', the server is allowed to respond to requests for any hosts.

server.allowedHosts environment variable configuration

You can set the environment variable '__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS' to add additional allowed hosts. Use commas to separate multiple hosts (e.g., 'host1.example.com,host2.example.com').

server.port default and automatic fallback

The server.port is of type 'number' with default value '5173'. If the port is already being used, Vite will automatically try the next available port, so the configured port may not be the actual port the server ends up listening on.

server.strictPort exit on port in use

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 TLS and HTTP/2 configuration

server.https is of type 'https.ServerOptions'. Enable TLS + HTTP/2 by providing an options object passed to 'https.createServer()'. A valid certificate is needed. For a basic setup, you can add '@vitejs/plugin-basic-ssl' to the project plugins, which will automatically create and cache a self-signed certificate. But it's recommended to create your own certificates.

server.open automatically open app in browser

server.open is of type 'boolean | string'. Automatically open the app in the browser on server start. When the value is a string, it will be used as the URL's pathname. Set 'process.env.BROWSER' to open in a specific browser (e.g., 'firefox'). Set 'process.env.BROWSER_ARGS' to pass additional arguments (e.g., '--incognito'). 'BROWSER' and 'BROWSER_ARGS' can also be set in the '.env' file.

server.open example with pathname

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

server.proxy configuration for dev server

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. If the key starts with '^', it will be interpreted as a 'RegExp'. The 'configure' option can be used to access the proxy instance. If a request matches any configured proxy rules, the request won't be transformed by Vite. If using non-relative 'base', you must prefix each key with that 'base'. It extends 'http-proxy-3'.

server.proxy examples

Examples of server.proxy configuration: ```js 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 default configuration

server.cors is of type 'boolean | CorsOptions' with default value '{ 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. Pass an options object to fine tune the behavior or 'true' to allow any origin.

server.headers response headers configuration

server.headers is of type 'OutgoingHttpHeaders'. It is used to specify server response headers.

server.forwardConsole forward browser runtime events

server.forwardConsole is of type 'boolean | { unhandledErrors?: boolean, logLevels?: ('error' | 'warn' | 'info' | 'log' | 'debug')[] }' with default value 'auto' (true when an AI coding agent is detected, otherwise false). It forwards browser runtime events to the Vite server console during development. 'true' enables forwarding unhandled errors and 'console.error' / 'console.warn' logs. 'unhandledErrors' controls forwarding uncaught exceptions and unhandled promise rejections. 'logLevels' controls which 'console.*' calls are forwarded.

server.forwardConsole example configuration

Example of server.forwardConsole configuration: ```js export default defineConfig({ server: { forwardConsole: { unhandledErrors: true, logLevels: ['warn', 'error'], }, }, }) ```

server.warmup improve initial page load

server.warmup is of type '{ clientFiles?: string[], ssrFiles?: string[] }'. It warms up files to transform and cache the results in advance, improving the initial page load during server starts and preventing transform waterfalls. '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'. Only add files that are frequently used to not overload the Vite dev server on startup.

server.warmup example configuration

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

server.watch file system watcher options

server.watch is of type 'object | null'. It passes file system watcher options to chokidar. The Vite server watcher watches the 'root' and skips the '.git/', 'node_modules/', 'test-results/', and Vite's 'cacheDir' and 'build.outDir' directories by default. When updating a watched file, Vite will apply HMR and update the page only if needed. If set to 'null', no files will be watched. 'server.watcher' will provide a compatible event emitter, but calling 'add' or 'unwatch' will have no effect.

server.fs.strict restrict serving files outside workspace root

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

server.fs.allow restrict allowed file serving

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 workspace root detection

Vite will search for the root of the potential workspace and use it as default. A valid workspace meets the following conditions, otherwise will fall back to the project root: contains 'workspaces' field in 'package.json', or contains one of the following files: 'lerna.json', 'pnpm-workspace.yaml'.

server.fs.allow custom workspace root example

Example of server.fs.allow configuration with custom workspace root: ```js export default defineConfig({ server: { fs: { // Allow serving files from one level up to the project root allow: ['..'], }, }, }) ```

server.fs.allow with searchForWorkspaceRoot utility

When 'server.fs.allow' is specified, the auto workspace root detection will be disabled. To extend the original behavior, use the utility 'searchForWorkspaceRoot': ```js 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 blocklist sensitive files

server.fs.deny is of type 'string[]' with default value '['.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. This will have higher priority than 'server.fs.allow'. Picomatch patterns are supported.

server.fs.deny does not apply to public directory

The blocklist 'server.fs.deny' does not apply to the public directory. All files in the public directory are served without any filtering, since they are copied directly to the output directory during build.

server.fs.deny with symlinks and plugins

The deny filter is applied against the module id and the id with query parameters stripped. Since a plugin can read files from any files in its load hook (including resolving symlinks to denied paths), Vite cannot guarantee that a denied file is inaccessible through an alternative path. If you have an alternative path, include it in the deny list as well.

server.origin asset URLs during development

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

server.origin example configuration

Example of server.origin configuration: ```js export default defineConfig({ server: { origin: 'http://127.0.0.1:8080', }, }) ```

server.sourcemapIgnoreList source file filtering

server.sourcemapIgnoreList is of type 'false | (sourcePath: string, sourcemapPath: string) => boolean' with default value '(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'. You can pass 'false' to disable this behavior, or, for full control, a function that takes the source path and sourcemap path and returns whether to ignore the source path.

server.sourcemapIgnoreList vs build.rolldownOptions.output.sourcemapIgnoreList

server.sourcemapIgnoreList is the equivalent of 'build.rolldownOptions.output.sourcemapIgnoreList' for the dev server. A difference between the two config options is that the rollup function is called with a relative path for 'sourcePath' while 'server.sourcemapIgnoreList' is called with an absolute path. During dev, most modules have the map and the source in the same folder, so the relative path for 'sourcePath' is the file name itself. In these cases, absolute paths makes it convenient to be used instead. 'server.sourcemapIgnoreList' and 'build.rolldownOptions.output.sourcemapIgnoreList' need to be set independently as 'server.sourcemapIgnoreList' is a server only config and doesn't get its default value from the defined rollup options.

server.sourcemapIgnoreList example configuration

Example of server.sourcemapIgnoreList configuration: ```js 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') }, }, }) ```

Default dev server host and port

The Vite dev server runs on http://localhost:5173 by default in development mode.

Give your agent this brain