Running the Vite dev server over HTTPS

The quick way

The official plugin creates and caches a self-signed certificate. The browser will warn once, because nothing on your machine vouches for that certificate.

import basicSsl from '@vitejs/plugin-basic-ssl'

export default defineConfig({
  plugins: [basicSsl()],
})

The way without warnings

mkcert installs a local certificate authority into your system trust store and issues certificates from it. The browser trusts them because your machine does. This is what vite-plugin-mkcert automates, and it is what Vite’s own docs recommend over self-signed certificates.

$ mkcert -install
$ mkcert localhost 127.0.0.1 ::1

Point Vite at the files

Whatever produced the certificate, this is how it gets used. key and cert are read from disk and handed to Node.

import { readFileSync } from 'node:fs'

export default defineConfig({
  server: {
    https: {
      key:  readFileSync('./certs/localhost-key.pem'),
      cert: readFileSync('./certs/localhost.pem'),
    },
  },
})

What you get besides the padlock

HTTP/2, and the browser APIs that refuse to run on an insecure origin. Service workers, getUserMedia, geolocation and the clipboard API mostly treat http://localhost as secure already — the ones that bite are the cases where you reach the dev server under some other hostname, where that exception no longer applies.

HMR needs to follow

Once the page is served over TLS, the browser refuses a plain ws:// connection from it. If hot updates stop the moment you enable HTTPS, this is why.

server: {
  ws: { protocol: 'wss' },
}

The check that disappears

Over HTTPS, Vite skips the allowedHosts check entirely. If "Blocked request. This host is not allowed" went away when you enabled TLS, the host was never allowed — the check simply no longer runs. Worth knowing before you read that as a fix.

• 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.
• 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.
• Blocked request. This host is not allowed.The Vite dev server only answers to localhost, hostnames ending in .localhost, and IP addresses — every other hostname has to be listed in server.allowedHosts.
• localhost:5173 — the port itselfWhat the address means, common dev ports, and the autocomplete fix.