Using HTTPS with react create app

New Version

There's an updated version of this article, which uses a new feature release in react-scripts v3.4.0.

Reasoning

There are many reasons why you may want to develop against a website using https. For us we deploy to IIS and our web.config is set up to automatically redirect all http traffic to https, and we didn't want to have to override this in dev. This keeps our dev environment more similar to what we have in production.

Enabling https

This is the easy step. create-react-app, or more accurately react-scripts, will automatically enable https when you run the start command with an environment variable called HTTPS set to "true". After you've set this environment variable the next time you run npm start or yarn start the webpack dev server will start up with the https option enabled. This automatically creates a self signed certificate with a 30 day expiry. However:

The certificate is not trusted so you will always get a warning. The link above describes how you can create your own certificates and use them with webpack dev server, however because of the way react scripts works you won't be able to pass in the variables that specify which certificate to use nor any passphrase used to secure the certificate.

Creating a certificate that will be used

The webpack dev server can use both pem files and pfx files. A pfx file would need us to pass in the passphrase which we can't do, so we have to use pem files. This isn't as straightforward a process as you would hope in windows. I found that I had to export a pfx file and extract the key and certificate separately before putting them both in to the same pem file. This is needed because the webpack dev server will automatically check for these in a file called "server.pem" located in the ssl folder of its directory (i.e. "./node_modules/webpack-dev-server/ssl/server.pem"). I wrote the following script to achieve this and save the pem file in the desired location. You'll need openssl installed.

Write-Host "Creating https certificate"

$certificate = New-SelfSignedCertificate -certstorelocation cert:\localmachine\my -dnsname localhost
$password = "AnyPassword"
$securePassword = ConvertTo-SecureString -String $password -Force -AsPlainText

$pfxPath = "./localhost.pfx"
$outPath = "./node_modules/webpack-dev-server/ssl/server.pem"
Export-PfxCertificate -Cert $certificate -FilePath $pfxPath -Password $securePassword | Out-Null
Import-PfxCertificate -Password $securePassword -FilePath $pfxPath -CertStoreLocation Cert:\LocalMachine\Root | Out-Null

$keyPath = "./localhost-key.pem"
$certPath = "./localhost.pem"

openssl pkcs12 -in $pfxPath -nocerts -out $keyPath -nodes -passin pass:$password
openssl pkcs12 -in $pfxPath -nokeys -out $certPath -nodes -passin pass:$password

$key = Get-Content ./localhost-key.pem
$cert = Get-Content ./localhost.pem
$key + $cert | Out-File $outPath -Encoding ASCII

Write-Host "Https certificate written to $outPath"

I saved this script in a file called "certificates.ps1" in the root of my project folder. If you run this script once it will create the pem file and put it in the correct location. If you try yarn start after running this the warning should disappear and your site will load. However, we are not finished. The next time your node_modules directory gets cleaned the certificate will be lost. Or if you never clean it will expire in a year.

Running the script

Open up your package.json file and find the "scripts" section. It should look something like this

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public",
    "postinstall": "yarn build"
  },

We can see the start command there. We are going to add a prestart command which will automatically get run whenever you type yarn start. That will create the certificate every time it runs and have it in place for when the webpack dev server starts up.
Add the following line in your scripts section

    "prestart": "@powershell -NoProfile -ExecutionPolicy Unrestricted -Command ./certificates.ps1",

Now run your start command and you should see the messages saying our certificate is being created. After that you shouldn't have any warnings.