Using HTTPS localhost for Development

1. Install Git Bash for Windows

2. Create the Private Key for the Root Certificate

mkdir certs
cd certs
winpty openssl genrsa -out MyRootCA.key 2048

3. Create the Root Certificate (CA)

winpty openssl req -new -x509 \
    -key MyRootCA.key -sha256 -days 18000 \
    -out MyRootCA.pem \
    -subj "//C=US\ST=NY\L=NY\O=None\CN=My Root Certificate Authority"

4. Verify the Root Certificate

winpty openssl x509 -noout -text -in MyRootCA.pem

5. Create the Private Key for the SSL Certificate

winpty openssl genrsa -out localhost.key 2048

6. Create the Certificate Signing Request (CSR)

winpty openssl req -new -sha256 \
    -key localhost.key \
    -out localhost.csr \
    -subj "//C=US\ST=NY\L=NY\O=None\CN=localhost"

7. Create the Certificate Signed by the CA

Save the following to a file named v3.txt...

authorityKeyIdentifier = keyid, issuer
basicConstraints = CA:FALSE
keyUsage = keyCertSign, digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
extendedKeyUsage = serverAuth, clientAuth, codeSigning, timeStamping
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost
DNS.2 = localhost.localdomain

...and run this

winpty openssl x509 -req \
    -in localhost.csr \
    -CA MyRootCA.pem \
    -CAkey MyRootCA.key \
    -CAcreateserial \
    -days 18000 -sha256 \
    -extfile v3.txt \
    -out localhost.crt

8. Create the PFX file

winpty openssl pkcs12 -export \
    -in localhost.crt \
    -inkey localhost.key \
    -out localhost.pfx

9. Trust the Root CA: Import MyRootCA.pem into Computer Certificates > Trusted Root Certification Authorities folder.

Using in Local IIS: Import localhost.pfx into Computer Certificates > Personal folder. Open IIS Manager and bind the certificate to the website.

Using in React: Create a .env file with the following:

HTTPS = true
SSL_CRT_FILE = C:\certs\localhost.crt
SSL_KEY_FILE = C:\certs\localhost.key

Related:

  • http://www.vickram.me/convert-pfx-to-pem-format
  • https://create-react-app.dev/docs/using-https-in-development/