Intro

There are scenarios where you will need to run the application you are developing locally over HTTPS. One such scenario would be if you are integrating Cognito authentication into your application. API calls to the Cognito servers require a secure connection. That is just one example, there are many others.

This post will cover how to accomplish this using the following specifically:

• Windows 10 operating system
• React App

If you are running Linux on your Windows machine with WSL (as I am) these instructions will still apply to you.

Bookmark these instructions, the certificates that you generate will eventually expire and you will need to follow these instructions again to renew them.

The mkcert documentation claims that it does not work with Firefox on Windows. However in my experience it does

Mkcert is a trusted package built by @FiloSottile of Google.

Additional Resources

📘 github: mkcert

📘 web.dev: how to use local https

Installing mkcert

Run the Windows powershell as administrator.

On Windows, use Chocolatey

choco install mkcert

or Scoop

scoop bucket add extras

scoop install mkcert

Using mkcert

I recommend you review the readme on the mkcert github page. However the quick version is

installing

mkcert -install

create certificate for localhost

mkcert localhost

That will also cover all of your ports on localhost, you only need to make one.

When you create the localhost certificate it will generate two files named

• localhost-key.pem
• localhost.pem

you can enter explorer . into powershell to open an explorer window in this location. The files are hidden so if you don’t see them you will need toggle the option view > hidden items in explorer.

copy certificate into root directory of application

Copy these certificate files into the route directory of your application(s).

|-- my-react-app
    |-- package.json
    |-- localhost.pem
    |-- localhost-key.pem
    |--...

Update React Script

You must configure React to use these certificates and to use HTTPS when it starts the development server. To do that we will modify the start script in package.json

"scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Restart Server

You must restart your development server for the change to take effect. On startup the application will be running on https.