Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generate SSL Certificate for use with Webpack Dev Server (OSX)
#!/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

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 $$

[ 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
@atilkan

This comment has been minimized.

Copy link

atilkan commented Dec 5, 2018

Generate a Certificate Signing Request
doesn't work. Mojave.

@arasmussen

This comment has been minimized.

Copy link

arasmussen commented Mar 19, 2019

@atilkan: Make sure you save an ssl.conf file in the current directory.

@aranair

This comment has been minimized.

Copy link

aranair commented May 3, 2019

I don't think you need to convert it into PEM format before giving it to webpack-dev-server

@matrunchyk

This comment has been minimized.

Copy link

matrunchyk commented May 15, 2019

@pgilad Thank you! I agree that PEM is not required. In fact, they are totally identical here :)

@imhvost

This comment has been minimized.

Copy link

imhvost commented Jun 4, 2019

Add the certificate to keychain and trust it (Windows):
certutil -addstore -f "ROOT" private.crt

@sureshvv

This comment has been minimized.

Copy link

sureshvv commented Nov 12, 2019

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

security: command not found

on ubuntu 18..04

https://askubuntu.com/questions/645818/how-to-install-certificates-for-command-line/859887

@pgilad

This comment has been minimized.

Copy link
Owner Author

pgilad commented Nov 12, 2019

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

security: command not found

on ubuntu 18..04

It's only tested/working on OSX

@nelson6e65

This comment has been minimized.

Copy link

nelson6e65 commented Nov 17, 2019

There is an excellent package to achieve this automagically:

https://github.com/FiloSottile/mkcert

@anandchakru

This comment has been minimized.

Copy link

anandchakru commented Nov 18, 2019

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.