HTTPS and Create React App

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:

1. Modify the npm/yarn start script to also set the HTTPS environment variable to true.
2. 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.

Using HTTPS in Development · Create React App

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:

from https://github.com/OfficeDev/generator-office/blob/master/src/docs/ssl.md#get-certificate-in-chrome

1. Open the Chrome Developer Tools window (ctrl + shift + i / cmd + option + i).
2. Click on the Security tab and you should see the following:

from https://github.com/OfficeDev/generator-office/blob/master/src/docs/ssl.md#get-certificate-in-chrome

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…

OS X — from https://github.com/OfficeDev/generator-office/blob/master/src/docs/ssl.md#get-certificate-in-chrome

Windows

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.

from https://github.com/OfficeDev/generator-office/blob/master/src/docs/ssl.md#get-certificate-in-chrome

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 :)