HTTPS with the Vite development server

Enabling HTTPS with Vite’s dev server used to be as simple as running:

      vite --https

    

This was refreshingly simple in a ecosystem where most build tool dev servers use plain HTTP, and enabling HTTPS is either unsupported or requires several arcane steps.

In recent versions of Vite you may notice that the --https flag alone isn’t enough anymore.

There’s one more step to recreate the old behavior, which is to add the @vitejs/plugin-basic-ssl plugin to the Vite config.

      // vite.config.js
import { defineConfig } from "vite"
import basicSsl from "@vitejs/plugin-basic-ssl"

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

    

Although they recommend generating a secure trusted certificate, I don’t see a reason to make it any more complicated than this for local development.

Usually the reason I need HTTPS is because I’m testing a WebXR experience (which requires a secure context) from another device on my network (which rules out localhost). Thus, I’m almost always using HTTPS in combination with Vite’s --host option to expose the server to my LAN.

Here’s a more complete config that includes all these options when running vite.

      // vite.config.js
import { defineConfig } from "vite"
import basicSsl from "@vitejs/plugin-basic-ssl"

export default defineConfig({
	plugins: [basicSsl()],
	server: {
		https: true, // same as "--https" flag
		host: true, // same as "--host" flag
	},
})