Goodbye Browser Warnings: Secure Your Local Development with mkcert
When you're developing a web application, you often want to simulate a production environment as closely as possible. This includes using HTTPS, which encrypts the communication between the client and server. However, if you're just using a self-signed certificate, your browser will flag it as insecure, forcing you to click through warnings every time you refresh your page. This is where mkcert comes in.
mkcert creates a local Certificate Authority (CA) and automatically trusts it on your system. This means any certificates you generate with mkcert will be trusted by your browser, eliminating those pesky warnings. It's a huge time-saver and makes the development process much smoother, especially when working with
OAuth and other APIs
Many APIs, like those for social media logins, require secure callbacks over HTTPS.
Service Workers
Service workers, which enable offline functionality and push notifications, can only be used on pages served over HTTPS.
Modern Web Features
Many modern browser features and APIs are being restricted to secure contexts (HTTPS).
The installation is straightforward. You just need to follow a few simple steps.
The easiest way to install is with a package manager.
For macOS (using Homebrew)
brew install mkcert
For Windows (using Chocolatey or Scoop)
# Using Chocolatey
choco install mkcert
# Using Scoop
scoop install mkcert
For Linux (using a pre-compiled binary)
You can download a pre-compiled binary from the GitHub releases page or use a package manager like apt or yum. For example, on a Debian-based system, you might use
# First, install the package that provides mkcert
sudo apt install libnss3-tools
wget https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3-linux-amd64
sudo mv mkcert-v1.4.3-linux-amd64 /usr/local/bin/mkcert
sudo chmod +x /usr/local/bin/mkcert
Once mkcert is installed, you need to set up the local CA. This is a one-time process.
mkcert -install
This command will create a new, private CA on your machine and trust it for use with your web browsers.
Now you can generate a certificate for your local development domain. For example, if you want to use myapp.local as your development domain
mkcert myapp.local
This will create two files in your current directory
myapp.local.pem (the certificate) and myapp.local-key.pem (the private key).
Let's look at a simple Node.js Express server to see how you'd use these certificates.
First, make sure you have express installed
npm install express
Next, create a file named server.js and use the certificates you just generated.
const express = require('express');
const https = require('https');
const fs = require('fs');
const app = express();
const port = 3000;
// Load the certificate and private key
const options = {
key: fs.readFileSync('myapp.local-key.pem'),
cert: fs.readFileSync('myapp.local.pem')
};
app.get('/', (req, res) => {
res.send('Hello HTTPS World!');
});
// Create the HTTPS server
https.createServer(options, app).listen(port, () => {
console.log(`Server running at https://myapp.local:${port}`);
});
To run this, you would use
node server.js
Now, if you have your system's hosts file configured to point myapp.local to 127.0.0.1, you can navigate to https://myapp.local:3000 in your browser, and you'll see your page served securely without any warnings.
