Generate SSL Certificate for use with Webpack Dev Server (OSX)

generate.sh

#!/usr/bin/env bash

# openssl req \
    # -newkey rsa:4096 \
    # -x509 \
    # -nodes \
    # -keyout private.pem \
    # -new \
    # -out private.crt \
    # -subj /CN=localhost \
    # -reqexts SAN \
    # -extensions SAN \
    # -config <(cat /System/Library/OpenSSL/openssl.cnf \
        # <(printf '[SAN]\nsubjectAltName=DNS:localhost')) \
    # -sha512 \
    # -days 365

openssl req -config ssl.conf -new -sha256 -newkey rsa:2048 -nodes -keyout private.key -x509 -days 3650 -out private.crt
sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain private.crt

Instructions.md

Generate private key

$ openssl genrsa -out private.key 4096

Generate a Certificate Signing Request

openssl req -new -sha256 \
    -out private.csr \
    -key private.key \
    -config ssl.conf 

Generate the certificate

openssl x509 -req \
    -days 3650 \
    -in private.csr \
    -signkey private.key \
    -out private.crt \
    -extensions req_ext \
    -extfile ssl.conf

Add the certificate to keychain and trust it:

sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain private.crt

Create a pem file from crt

openssl x509 -in private.crt -out private.pem -outform PEM

Run webpack dev server

npm run webpack-dev-server -- --open --https --cert private.pem --key private.key

PROFIT $$

ssl.conf

[ req ]
default_bits       = 4096
distinguished_name = req_distinguished_name
req_extensions     = req_ext

[ req_distinguished_name ]
countryName                 = IL
countryName_default         = GB
stateOrProvinceName         = Center
stateOrProvinceName_default = England
localityName                = Tel Aviv
localityName_default        = Brighton
organizationName            = CA
organizationName_default    = Hallmarkdesign
organizationalUnitName      = BlazeMeter
commonName                  = localhost
commonName_max              = 64
commonName_default          = localhost

[ req_ext ]
subjectAltName = @alt_names

[alt_names]
DNS.1   = localhost

I would add one more thing to this gist in order to make it perfect...

✅ Windows support.

specifically:

how to import the certificate into the Windows Trusted Root Store.

Here, I even got what you need:

Add the certificate to the Windows Trusted Root Store:

Open up PowerShell with Administrative Privileges and then...

Import-Certificate -FilePath "C:\Users\<your_username>\<path_to_cert>\private.crt" -CertStoreLocation Cert:\LocalMachine\Root

Here's The Docs on Import-Certificate

Late to the party but would love a way to make stronger certificates as Firefox has started complaining that "This site makes use of a SHA-1 Certificate; it’s recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1."

Unfortunately following this results in

localhost uses an unsupported protocol.
ERR_SSL_VERSION_OR_CIPHER_MISMATCH

I just had to do the following with mkcert:

brew install mkcert
mkcert -install
# cd to code directory
mkcert localhost
webpack-dev-server --cert ./localhost.pem --key ./localhost-key.pem

it worked perfectly for me, thanks!