HTTPS and Create React App

  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"
]
}
...
"start": "HTTPS=true react-scripts start"
...

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
OS X — from https://github.com/OfficeDev/generator-office/blob/master/src/docs/ssl.md#get-certificate-in-chrome
Windows

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.

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

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniel G. Wilson

Daniel G. Wilson

Princeton 2018 | Operations Research and Financial Engineering | Microsoft PM | Seattle, WA