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 ;)
Top comments (6)
Thanks , it worked successfully
Thank you, it's fix my issue.
Thank you!
Thanks a lot ! your instructions were clear and got the job done!
can i use those steps in public url not locally ?
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.