Setting Up Local HTTPS with mkcert on macOS

When developing web applications locally, HTTPS is often overlooked. Yet, modern browsers and APIs increasingly require secure connections—even in development. That’s where mkcert comes in: a simple tool to generate locally trusted SSL certificates without hassle.

In this post, I’ll walk you through installing mkcert on macOS, generating certificates for localhost, and explain why organizing them in the mkcert directory matters.

---

🚀 Installing mkcert on macOS

mkcert is lightweight and easy to set up. Here’s how:

1. Install Homebrew (if you don’t already have it):

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   

2. Install mkcert and nss (needed for Firefox trust store):

   brew install mkcert
   brew install nss
   

3. Create and install a local CA (Certificate Authority):

   mkcert -install
   

   This step generates a root CA and adds it to your system and browser trust stores. You’ll see files like rootCA.pem and rootCA-key.pem stored in:

   ~/Library/Application Support/mkcert/
   

---

🛠 Generating a Localhost Certificate

Once mkcert is installed, creating a certificate for localhost is straightforward:

mkcert localhost

Output:

Created a new certificate valid for the following names 📜
 - "localhost"

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅
It will expire on 25 May 2028 🗓

You now have two files:

• localhost.pem → the certificate

• localhost-key.pem → the private key

---

📂 Organizing Certificates

To keep things tidy and ensure recognition by browsers, move your generated files into mkcert’s support directory:

mv localhost.pem ~/Library/Application\ Support/mkcert/
mv localhost-key.pem ~/Library/Application\ Support/mkcert/

Now your certificates live alongside the root CA:

~/Library/Application Support/mkcert/
├── rootCA.pem
├── rootCA-key.pem
├── localhost.pem
└── localhost-key.pem

🔎 Why move them here?

Browsers trust certificates signed by mkcert’s root CA only if they’re managed within mkcert’s directory structure. By placing your localhost.pem and localhost-key.pem inside ~/Library/Application Support/mkcert/, you ensure that mkcert’s trust chain is consistent and browsers recognize the certificates as valid. This avoids the dreaded “Not Secure” warnings and makes your local HTTPS environment behave like production.

---

🌐 Using Certificates in Development

Point your local server (e.g., Nginx, Apache, Laravel Valet, or Node.js HTTPS server) to these files:

• Certificate: ~/Library/Application Support/mkcert/localhost.pem

• Key: ~/Library/Application Support/mkcert/localhost-key.pem

Once configured, you can access your app securely via https://localhost.

---

✅ Conclusion

mkcert makes HTTPS development painless. With just a few commands, you can generate trusted certificates, organize them neatly in the mkcert directory, and run your local projects over HTTPS—mirroring production environments more closely.

This setup ensures:

• No browser warnings 🚫

• Secure API testing 🔐

• A smoother developer experience ⚡