How to automatically switch to https when navigating to http on vite dev server

Question

When I type localhost:3000 on my browser it autocompletes to http://localhost:3000, while my dev server is configured to run on https.

Configuring the dev server to open the app on a new tab when the dev server starts

{
  server: {
    open: true
  }
}

is helpful, but it doesn't solve the manual navigation mistake.

This thread on Vite's Github repo discusses it, but the suggestion isn't great.

Answer 1

To automatically navigate to https when navigating to http add the HSTS header to your vite.config.ts server response headers:

const oneYearInSeconds = 60 * 60 * 24 * 365;

export default defineConfig(() => ({
  server: {
    https: true,
    headers: {
      'Strict-Transport-Security': `max-age=${oneYearInSeconds}`
    },
  },
})

To later clear the cached HSTS entry on your browser (that expires based on max-age) use the delete option on chrome://net-internals/#hsts