Using HTTPS with create react app

It's been a while since I first wrote about using 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 the node_modules contents as my previous solution required. You'll need to ensure you have at least version 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 running choco install openssl. Start by creating the configuration file. Save the following as certificate.conf

[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no
[req_distinguished_name]
C = GB  # Enter 2 digit country code here
O = My Company # Enter company name
CN = localhost
[v3_req]
keyUsage = critical, digitalSignature, keyAgreement
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost

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

openssl req -x509 -newkey rsa:4096 -sha256 -keyout certificate.key -out certificate.crt -days 365 -config certificate.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 for various settings.
Add the following to it

HTTPS=true
SSL_CRT_FILE=certificate.crt
SSL_KEY_FILE=certificate.key

That's it. When you run yarn 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 the openssl 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 ;)

Comments

[Aliafify]

Thanks , it worked successfully

[MinChanSike]

Thank you, it's fix my issue.

[Nik]

Thank you!

[Fernando Vieira]

Thanks a lot ! your instructions were clear and got the job done!

[eslam-elameen]

can i use those steps in public url not locally ?

[Warren]

I'm afraid not. The certificate created would not be considered trusted on anyone else's computer, so anyone accessing your site with a certificate created this way would see a warning.
Also the webpack dev server is only intended for use in dev so the site should be hosted some other way.