Lately, I've had to run a React application using HTTPS in development, first I've tried to use a self-signed certificate, but it was not being trusted by my computer's operating system, then I've found a solution using a tool called mkcert, which installs a local Certificate Authority (CA) in the system's root store, and generates locally-trusted certificates. Let's go straight into generating our certificates.

Disclaimer: The solution described here is Mac oriented, I've added all the relevant links and information to make sure you can do the same with a Windows or a Linux machine.

Generate Certificates

Here I will be installing mkcert on a Mac, for Linux and Windows commands you can find it inside the github repo: mkcert github

Install mkcert:

brew install mkcert

Install the local Certificate Authority (CA) in our system's root store:

mkcert -install

Generate our certificates, make sure to use localhost as your domain.

mkcert -key-file key.pem -cert-file cert.pem localhost

Run React Using HTTPS In development

You can place our generated certificates in a shared location to be used by multiple applications, or put them at the root of your React application, currently I'll put them in my application's root folder.

Now, open package.json and add the following environment variables to your start script.

HTTPS=true SSL_CRT_FILE=cert.pem SSL_KEY_FILE=key.pem npm start

• HTTPS - Run your development environment using HTTPS, if you've not set a custom certificate it will use a self-signed certificate.
• SSL_CRT_FILE & SSL_KEY_FILE - Tell the application where your custom SSL certificates are, in this case they are in the project's root folder (a sibling file of package.json).

If you were to run the application using only the HTTPS flag, you will encounter the following message telling you the that the certificate cannot be trusted:

You will also see the following in the address bar:

Now, when you've used mkcert, you've installed a local CA that validates your certificates, therefore using our custom certificates the connection is correctly secured:

Run the project and you'll see:

Course by Sagi Liba,
Author of this blog

Setting Multiple Environment Variables In Windows

Windows works a bit differently when you set environment variables, there are two common solutions:

The first:

// Lack of whitespace is intentional:

SET HTTPS=true&&SET SSL_CRT_FILE=cert.pem&&SET SSL_KEY_FILE=key.pem&&npm start

The second, using cross-env:

It's main strength is that it should set the environment variables correctly for all operating systems.

// install:
npm install --save-dev cross-env

// Usage:
cross-env HTTPS=true SSL_CRT_FILE=cert.pem SSL_KEY_FILE=key.pem npm start

// The syntax is pretty much the same as the Mac command.

Using A Different Domain

If you'd like to use a different domain such as test.com, you'd have to add it to your system's hosts file.

Hosts file: In charge of mapping hostnames/domains to IP addresses, when your browser searches for a domain in the URL it will first go through the hostnames set in this file, and only then use a DNS request to look for the requested domain.

Mac / Linux:

// You have to use sudo to edit the file contents:
sudo vi /etc/hosts

// Add the following line:
127.0.0.1 test.com

We have directed the domain test.com to our localhost IP. You need to create new certificates for the new domain.

mkcert -key-file key.pem -cert-file cert.pem test.com

Then you can access your local projects at:

https://test.com:<port>

For Windows the file is located at: C:\Windows\System32\Drivers\etc\hosts.

Thats it, you've can now successfully generate SSL certificates, have them validated by a local Certificate Authority (CA), and use them to run your project using HTTPS correctly.