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.
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.
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.
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 ;)