HTTPS for local development

Using HTTPS for local development is no longer optional. Modern browsers require a secure context to enable key features like PWAs, Service Workers, camera access, and WebAuthn. If your local dev server still runs on HTTP, you’re likely missing bugs that only appear in production.

This guide shows how to enable HTTPS on localhost using Vite and mkcert, with a setup that works on desktop and real mobile devices.

Why HTTPS is required for local development

Browsers restrict powerful APIs to HTTPS to protect users. These restrictions apply even in local development environments.

You need HTTPS on localhost if your app uses:

• Progressive Web Apps (PWA)

• Service Workers

• Camera or microphone access

• WebAuthn / passkeys

• Secure cookies and storage APIs

• Mobile testing on real devices

While localhost sometimes works without HTTPS, local IP access does not. If you test your app on an iPhone or Android device using your machine’s IP, HTTPS is mandatory.

Best solution for HTTPS on localhost: mkcert

mkcert is the recommended tool for local HTTPS development because it creates trusted certificates, not self-signed ones. That means:

• No browser security warnings

• Works across browsers

• Ideal for Vite, Next.js, and other dev servers

Step 1: install mkcert for local HTTPS

On macOS, install mkcert using Homebrew:

brew install mkcert
mkcert -install

This creates a local Certificate Authority and adds it to your system trust store.

Step 2: generate HTTPS certificates for localhost

Generate certificates for localhost and loopback addresses:

mkcert localhost 127.0.0.1 ::1

This creates:

• localhost.pem

• localhost-key.pem

These files will be used by your Vite dev server to enable HTTPS.

Step 3: enable HTTPS (UPDATED)

• If you are using Vite, edit your vite.config.ts file:

import fs from "fs";

export default {
  server: {
    host: "::",
    port: 8080,
    https: {
      key: fs.readFileSync("./localhost-key.pem"),
      cert: fs.readFileSync("./localhost.pem"),
    },
  },
};

• If you are using Nextjs, edit you package.json scripts:

{
...
  "scripts": {
    "dev": "next dev --experimental-https --experimental-https-key ./localhost+2-key.pem --experimental-https-cert ./localhost+2.pem",
    ...
}

This configuration:

• Enables HTTPS in Vite

• Allows IPv4 and IPv6 access

• Matches production-like behavior

Restart the dev server after applying the changes.

Step 4: access your HTTPS dev server from mobile devices

To test HTTPS local development on mobile:

1. Connect your phone to the same Wi-Fi network

2. Find your computer’s local IP address

3. Open the app in your phone browser:

https://[your-local-ip]:8080

This setup works on iOS Safari and Chrome for Android without certificate warnings.

Why HTTPS local development matters for PWAs and Service Workers

PWAs and Service Workers only work over HTTPS (except limited localhost cases). If your PWA behaves differently in production than in development, missing HTTPS is usually the cause.

With this setup, you can:

• Install your PWA locally

• Debug Service Worker caching

• Test offline behavior

• Validate mobile-only features early

HTTPS local development checklist

• ✅ Trusted HTTPS certificates (mkcert)

• ✅ No browser warnings

• ✅ Works on real devices

• ✅ Matches production security rules

• ✅ Compatible with Vite and modern frameworks

Conclusion: enable HTTPS early in local development

If you’re building modern web applications, HTTPS on localhost should be your default, not an afterthought.

Using mkcert with Vite gives you:

• Production parity

• Reliable mobile testing

• Fewer deployment surprises

Once you switch to HTTPS local development, you won’t want to go back.