I’m a self-proclaimed duct-tape-coder. I’m not particularly talented at blazing trails into new frontiers armed only with a text editor, but I’m rather good at sticking bits and pieces of things together to make something that works. With that disclaimer, it took me a rather embarrassingly long time to set up HTTPS locally with
I figured I’d type my process up and maybe save someone else a bit of time.
It’s actually really simple in hindsight — to serve React web apps created with
create-react-app via HTTPS, you need to do two things:
- Modify the npm/yarn start script to also set the HTTPS environment variable to true.
- Add the SSL certificate for the app to your Trusted Root Certificate Authorities Store (or Keychain Access on OS X).
Setting the HTTPS environment variable to true
This is actually quite easy. All you need to do is modify your project’s
package.json to set the HTTPS environment variable to true when running the start script. Like so: (addition highlighted in bold)
"start": "set HTTPS=true&&react-scripts start", // export HTTPS in OSX
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"not ie <= 11",
"not op_mini all"
On OS X, do not include
set , simply add
HTTPS=true to the start script definition:
"start": "HTTPS=true react-scripts start"
See the entry in
create-react-app’s documentation for full reference regarding HTTPS.
Using HTTPS in Development · Create React App
Note: this feature is available with `firstname.lastname@example.org` and higher.
Trusting the SSL certificate
The last piece of this puzzle is to trust the SSL certificate. Run
npm/yarn start now and you’ll likely see a screen similar to the following:
- Open the Chrome Developer Tools window (
ctrl + shift + i / cmd + option + i).
- Click on the
Securitytab and you should see the following:
3. Click on
View certificate and you’ll have the option to download the certificate — either by dragging it to your desktop in OS X, or by clicking on the
Details tab in Windows and clicking
Copy to File…
This is where Windows and OS X start to be completely different, so definitely jump to the section relevant to you.
Installing/trusting the certificate on Windows
If you’re on Windows, choose the
DER encoded binary X.509 (.CER) option (the first one) and save it.
Then, double click on the certificate and install it.
Place all certificates in the following store
Trusted Root Certification Authorities
And, finally, confirm your installation.
Installing/trusting the certificate Mac OS X
On OS X, open the Keychain Access utility and select
System from the menu on the left. Click the lock icon to enable changes.
Click the plus button near the bottom to add a new certificate, and select the
localhost.cer file you dragged to the desktop. Click
Always Trust in the dialog that appears.
Finally, after adding the certificate to the system keychain, double-click the certificate and expand the
Trust section of the certificate details. Select
Always Trust for every option.
That’s it! You’re finished. Refresh your browser and you should see the classic
create-react-app start page. Congrats on getting HTTPS working with