💡
UPDATED Feb 8 2026 - Added configuration for NextJS apps
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:
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:
Connect your phone to the same Wi-Fi network
Find your computer’s local IP address
Open the app in your phone browser:
https:
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:
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:
Once you switch to HTTPS local development, you won’t want to go back.
