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 create-react-app
.
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)
{
"name": "betterstyles",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.6.0",
"react-dom": "^16.6.0",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "set HTTPS=true&&react-scripts start", // export HTTPS in OSX
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"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.
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
Security
tab 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.
Choose Local Machine
Select Place all certificates in the following store
Choose 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.
Congrats!
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 create-react-app
:)