Skip to main content

HTTPS On localhost With React Using mkcert

May 11, 2021
Security
How to run your React application with https on localhost using a tool called mkcert
Table of Contents

Intro​

secure localhost

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", // highlight-line
    "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.

secure localhost

Comments

Recent Work

Basalt

basalt.software

Free desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.

Learn More

BidBear

bidbear.io

Bidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.

Learn More