Port 4173: vite preview, not the dev server

The two servers side by side

Same project, different jobs. The dev server never produces the files that end up on your host; the preview server never transforms your source.

• localhost:5173 — npm run dev. Serves source, transforms on request, hot module replacement, no bundle.
• localhost:4173 — npm run preview. Serves dist/ as static files, exactly what a real web server would ship.

It needs a build first

preview does not build anything. Run it against a stale dist/ and you will be debugging yesterday.

$ npm run build     # writes dist/
$ npm run preview   # serves dist/ on 4173

Change the preview port

preview.port is separate from server.port. Setting one does not move the other.

export default defineConfig({
  server:  { port: 3000 },   // npm run dev
  preview: { port: 8080 },   // npm run preview
})

What preview catches that dev does not

Bugs that only exist after bundling. Anything depending on file paths, asset URLs, the base option, code splitting, or environment variables replaced at build time behaves differently in dist/ than it does in dev. If a bug appears only after deployment, reproduce it on 4173 first — it is the same output your host gets, without a deploy.

Preview is not a production server

It is a local static file server for checking a build. No compression tuning, no cache headers worth relying on, no hardening. Use it to look at a build, not to serve one to anybody else.

It falls back too

If 4173 is taken, preview moves to the next free port, same as the dev server. preview.strictPort makes it fail instead.

• Changing the port the Vite dev server usesSet server.port in vite.config.js, or pass --port on the command line; add strictPort: true if you want Vite to fail instead of silently moving to the next free port.
• What happens between npm run dev and the page on localhost:5173Starting the Vite dev server takes five steps: npm resolves the vite binary, Vite reads the config, dependencies are pre-bundled, the server listens on 5173, and the browser opens an HMR WebSocket on the first request.
• localhost:5173 — the port itselfWhat the address means, common dev ports, and the autocomplete fix.