Using HTTPS with create react app

It's been a while since I first wrote aboutusing HTTPS with react create app, and since then things have changed, so here's an updated set of instructions.

A new feature has been added to react scripts that allow us to specify a certificate file without needing to modify thenode_modules contents as my previous solution required. You'll need to ensure you have at leastversion 3.4.0 of react-scripts to be able to use this feature.

Creating the certificate

To create the certificate you'll need openssl. You can install it using chocolatey by runningchoco install openssl. Start by creating the configuration file. Save the following as certificate.conf

[req]distinguished_name= req_distinguished_namex509_extensions= v3_reqprompt= no[req_distinguished_name]C= GB# Enter 2 digit country code hereO= My Company# Enter company nameCN= localhost[v3_req]keyUsage= critical, digitalSignature, keyAgreementextendedKeyUsage= serverAuthsubjectAltName= @alt_names[alt_names]DNS.1= localhost

Next up run the following command to create the certificate and key.

opensslreq-x509-newkeyrsa:4096-sha256-keyoutcertificate.key-outcertificate.crt-days365-configcertificate.conf-new-nodes

Take the two files and store them in the root of your app.

Using the certificate

In the root of your app create a file called.env if you don't have one already. This file can be used for storing environment variables to be used by the react-scripts forvarious settings.
Add the following to it

HTTPS=trueSSL_CRT_FILE=certificate.crtSSL_KEY_FILE=certificate.key

That's it. When you runyarn start it will use these environment variables to retrieve the certificate and use it for the webpack-dev-server. At this point you'll still be getting a certificate warning in your browser.

Install the certificate

You need to install the certificate to a trusted root location.

• In Windows open the start menu and type "certificates".
• Select "Manage Computer Certificates"
• Expand "Trusted Root Ceritification Authorities"
• Right click on "Certificates" and select "All Tasks" -> "Import".
• Click next
• Enter the path for the crt file.
• Proceed through the next few screens to import the certificate

Finally those pesky browser warnings should be gone. You'll be able to develop away for the next year. Note that you can change the-days value in theopenssl req command, but the current maximum most browsers will accept is 825, and just 368 days in Safari. When the year is up, just come back here and remind yourself how it works. That's what I'll be doing ;)