SSL support for localhost with Webpack

ssl-localhost-webpack.md

HTTPS using localhost

To generate a local certiticate and using it, please follow these steps (note: replace MY_DOMAIN, MY_FILENAME and MY_PASSPHRASE based on your choice):

Step 1: Generate private key

openssl genrsa -out MY_FILENAME.key 4096

Step 2: Create SSL config

Filename: ssl.conf

nano ssl.conf

And paste following snnippet and edit MY_DOMAIN:

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

[ req_distinguished_name ]
countryName                 = DE
countryName_default         = DE
stateOrProvinceName         = Berlin
stateOrProvinceName_default = Germany
localityName                = Berlin
localityName_default        = Berlin
organizationName            = MY_COMPANY
organizationName_default    = MY_COMPANY
organizationalUnitName      = MY_TEAM
commonName                  = MY_DOMAIN
commonName_max              = 64
commonName_default          = MY_DOMAIN

[ req_ext ]
subjectAltName = @alt_names

[alt_names]
DNS.1   = MY_DOMAIN

Step 3: Generate a Certificate Signing Request

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

Step 4: Generate the certificate

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

Step 5: Add the certificate to keychain and trust it:

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

Step 6: Generate PEM base64 Certificate

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

Step 7 (optional): Generate PFX file with passphrase

openssl pkcs12 -export -out MY_FILENAME.pfx -inkey MY_FILENAME.key -in MY_FILENAME.crt

Using with Webpack

Options are available for using your own SSL Certificate in your preferred or OS-required format. Given the base command npm run webpack-dev-server -- --open --https, append one of the following:

• (PEM Files) --cert=../path/to/ssl/MY_FILENAME.cet --key=../path/to/ssl/MY_FILENAME.key
• (PFX and Passphrase) --pfx=../path/to/ssl/MY_FILENAME.pfx --pfx-passphrase=MY_PASSPHRASE

Example

webpack-dev-server -d --hot --inline --cert=/certs/MY_FILENAME.crt --key=/certs/MY_FILENAME.key

-OR-

webpack-dev-server -d --hot --inline --pfx ./certs/MY_FILENAME.pfx --pfx-passphrase 12345