HTTP vs HTTPS Explained: Complete Developer's Guide

Certificate:
    Data:
        Version: 3
        Serial Number: a3:47:b1:c4:2e:...
        Issuer: C=US, O=Let's Encrypt, CN=R3
        Validity:
            Not Before: Dec  1 00:00:00 2025 GMT
            Not After : Mar  1 23:59:59 2026 GMT
        Subject: CN=example.com
        Subject Public Key Info:
            Public Key Algorithm: RSA (2048 bit)
            Public Key: 30:82:01:0a:...
        X509v3 extensions:
            X509v3 Subject Alternative Name:
                DNS:example.com, DNS:www.example.com
    Signature Algorithm: sha256WithRSAEncryption
         4a:2c:3b:7d:...

# Install mkcert
# macOS
brew install mkcert
brew install nss # for Firefox

# Linux
sudo apt install libnss3-tools
wget https://github.com/FiloSottile/mkcert/releases/download/v1.4.4/mkcert-v1.4.4-linux-amd64
chmod +x mkcert-v1.4.4-linux-amd64
sudo mv mkcert-v1.4.4-linux-amd64 /usr/local/bin/mkcert

# Windows (using Chocolatey)
choco install mkcert

# Step 1: Install local CA
mkcert -install
# Creates root certificate in system trust store

# Step 2: Generate certificate for localhost
mkcert localhost 127.0.0.1 ::1
# Creates: localhost+2.pem (certificate) and localhost+2-key.pem (private key)

# Step 3: Use in your server
# See framework-specific examples below

// Node.js / Express
const fs = require('fs');
const https = require('https');
const express = require('express');

const app = express();

app.get('/', (req, res) => {
  res.send('Hello HTTPS!');
});

const options = {
  key: fs.readFileSync('./localhost+2-key.pem'),
  cert: fs.readFileSync('./localhost+2.pem')
};

https.createServer(options, app).listen(3000, () => {
  console.log('HTTPS server running on https://localhost:3000');
});

# React / Create React App
# Set environment variables
HTTPS=true \
SSL_CRT_FILE=./localhost+2.pem \
SSL_KEY_FILE=./localhost+2-key.pem \
npm start

# Or create .env.local file:
echo "HTTPS=true" >> .env.local
echo "SSL_CRT_FILE=./localhost+2.pem" >> .env.local
echo "SSL_KEY_FILE=./localhost+2-key.pem" >> .env.local
npm start

// Vite - vite.config.js
import { defineConfig } from 'vite';
import fs from 'fs';

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('./localhost+2-key.pem'),
      cert: fs.readFileSync('./localhost+2.pem'),
    },
    port: 3000
  }
});

// Next.js - create custom server (server.js)
const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('fs');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const httpsOptions = {
  key: fs.readFileSync('./localhost+2-key.pem'),
  cert: fs.readFileSync('./localhost+2.pem'),
};

app.prepare().then(() => {
  createServer(httpsOptions, (req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on https://localhost:3000');
  });
});

# Generate self-signed certificate
openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
  -keyout localhost.key \
  -out localhost.crt \
  -subj "/CN=localhost"

# Will create warnings in browser unless manually trusted