Running the Vite dev server in a container

Bind inside the container

Without this Vite listens on the container’s own loopback address. The port mapping then forwards to an address nothing is listening on, and the browser gets an empty response.

CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

Publish it outside

Both halves are required. Either one alone gives you the same empty page.

services:
  web:
    build: .
    ports:
      - "5173:5173"
    volumes:
      - .:/app
      - /app/node_modules

Why node_modules gets its own volume

The anonymous volume keeps the container’s node_modules from being shadowed by the one on your host. Without it, a host directory built for macOS or Windows lands inside a Linux container, and native dependencies fail in ways that have nothing to do with Vite.

Hot reload does not survive the mount

File change events usually do not cross a bind mount, so the watcher never hears about your edits. Polling asks instead of listening. It works, and it costs CPU — enable it here, not globally.

server: {
  host: '0.0.0.0',
  watch: { usePolling: true },
}

A hostname that is not localhost

If you reach the container through a service name, a Traefik host or a tunnel, expect "Blocked request. This host is not allowed" next. That is the separate host allowlist, and it needs the exact hostname the browser uses.

WSL2 is the same problem with different plumbing

Reaching the dev server from Windows itself normally works. Reaching it from another machine on your LAN does not, because WSL2 has its own network stack — that needs Windows port forwarding or mirrored networking mode, not a Vite setting.

• Reaching the Vite dev server from anything other than localhostThe Vite dev server binds to localhost only and rejects unknown hostnames, so a second device, a container or a tunnel needs two separate settings: server.host to bind wider, and server.allowedHosts to accept the name being used.
• Reaching localhost:5173 from your phone or another machineThe dev server listens on localhost by default, so nothing else on the network can reach it — start it with --host (or set server.host) to listen on your LAN address.
• Hot Module Replacement on localhost:5173HMR swaps a changed module in the running page over a WebSocket instead of reloading it; when that WebSocket cannot connect, Vite falls back to full page reloads or stops updating at all.
• localhost:5173 — the port itselfWhat the address means, common dev ports, and the autocomplete fix.