vitejs/vite · Middleware + HMR

Vite Dev Server

Vite creates a dev server by resolving serve config, building middleware and environment graphs, then transforming module requests and pushing hot updates through WebSocket state.

2environment graphs
1connect stack
1websocket server
serverequired command
01
1Resolve
SERVE
Create
Server
Vite refuses build-mode config, resolves serve options, creates middleware, and prepares HTTP/WebSocket infrastructure.
server setup
CFG
resolveConfig(..., serve)
createServer delegates to _createServer, which resolves config for the serve command.
CHK
Reject wrong command
A resolved build config throws because the dev server expects command === serve.
HTTP
Create middleware and socket
Vite creates a Connect middleware stack, optional HTTP server, and WebSocket server.
server setup
OK
Single config owner usedConfigs prevents associating one resolved config with multiple servers.
i
Middleware mode supported The HTTP server is null when middlewareMode is enabled.
02
2Prepare
GRAPH
Wire
Environments
Vite initializes file watching, public files, dev environments, module graphs, and plugin containers before serving requests.
environment gates
1
Watch root and config inputs Chokidar watches the project root, config dependencies, env files, and public directory when watching is enabled.
FS
2
Create dev environments Each configured environment creates and initializes its own development environment.
ENV
3
Expose compatibility containers Vite builds a ModuleGraph facade and pluginContainer for backward-compatible server APIs.
PLG
Deprecation warnings are explicit
Legacy server.moduleGraph and server.pluginContainer access warns about future removals.
Client and SSR are separated
The compatibility ModuleGraph delegates to client and ssr environment graphs.
03
3Serve
HMR
Transform
Requests
The running server transforms module URLs in the right environment and uses HMR channels to update the browser.
dev response
MOD 01
transformRequest selects environment
Requests route to the SSR or client environment depending on options.ssr.
HTML 02
transformIndexHtml uses dev transform
HTML requests pass through the dev HTML transform function with original URL context.
HOT 03
Watcher drives updates
File updates notify plugin containers and module graphs, then HMR can trigger browser updates.
dev response
Response payload
OK
Close is coordinated
server.close waits for watcher, WebSocket, environments, HTTP server, and SSR runner cleanup.
i
Warmups are environment-aware
warmupRequest follows the same client-versus-SSR environment selection.
Middlewaredev response
No raw secretsexample content stays public-safe