Secure localhost with no warnings using mkcert & BrowserSync

Introduction

If you’re running a site on something like Laravel Herd, Valet or MAMP using Gulp with BrowserSync for live reloads, you’ve probably seen your URL stubbornly refuse to be secure. Here’s how I set up a fully trusted HTTPS environment for https://localhost:3000 with no certificate warnings.

Self-signed certs and browser warnings

By default, BrowserSync’s https: true option gives you a self-signed certificate. All browsers pretty much ignore this. You get “Your connection is not private” errors and sometimes features like Service Workers or HTTP/2 just won’t work.

The solution: mkcert + BrowserSync

01. Install mkcert

First, install mkcert. On macOS, it’s a one-liner with Homebrew;

brew install mkcert

Then run the line below which creates and trusts a local Certificate Authority (CA) in your system and browser stores.

mkcert -install

02. Generate a trusted certificate

From your project root, create a certs directory and generate a certificate for all your dev domains;

mkdir -p certs
cd certs
mkcert barrd.dev.test "*.barrd.dev.test" localhost 127.0.0.1 ::1
mv barrd.dev.test+4.pem barrd.dev.test.pem
mv barrd.dev.test+4-key.pem barrd.dev.test-key.pem

This gives you a certificate and key valid for barrd.dev.test, all its subdomains and localhost.

03. Update Gulp/BrowserSync

In your gulpfile.js, swap out the old https: true for a proper config;

const path = require("path");  // Node.js core module, used for cert file paths
…
browserSync.init({
  proxy: "https://barrd.dev.test",
  https: {
    key: path.join(__dirname, "certs", "barrd.dev.test-key.pem"),
    cert: path.join(__dirname, "certs", "barrd.dev.test.pem"),
  },
  open: false,
  notify: false,
  port: 3000,
  …
});

Now, when you run gulp watch, BrowserSync serves your site at https://localhost:3000 using your trusted certificate.

A proper secure site

You should be able to use the certificate issued by your local mkcert CA. If you can’t, check the cert paths and that mkcert’s CA is actually installed.

Final thoughts

It’s a small change, but it makes a big difference. Your local dev now mirrors production, and you can focus on building, not fighting browser warnings. If you hit any snags, check the mkcert docs. Happy secure coding!

Article Information

About Dave A.K.A. 'barrd'

Dave is a Bristol based Scottish Expat who has 20+ years experience of web development. Loves playing guitar, reading books, watching Sci-Fi and tinkering with tech.

Read more about Dave