How to configure https (SSL) locally?
Tags: node, npm, javascript
Published: 2021-06-16 14:13:58

---
title: How to configure https (SSL) locally?
published: true
date: 2021-03-18 00:00:00 UTC
tags: node, npm, javascript
canonical_url: https://www.mariokandut.com/how-to-setup-https-ssl-in-localhost-react/
---

A React application is in many cases scaffolded with `create-react-app` and if you're running it locally its served using HTTP. A production application should run in HTTPS (SSL) for security reasons, in some cases a local version has to run on https for authenticating users on the backend, when using AzureB2C, or using the proxy feature or similar. Let's see how this can be achieved.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#using-https-in-development)Using HTTPS in development

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#set-https-environment-flag)Set HTTPS environment flag

This feature requires `react-scrips@0.4.0`. To enable HTTPS you have to set the environment variable to true, then start the dev server as usual with `npm start`.

When using Windows with cmd.exe:

```
set HTTPS=true&&npm start
```

When using Windows with Powershell:

```
($env:HTTPS = "true") -and (npm start)
```

Linux or macOS with Bash:

```
HTTPS=true npm start
```

If you want a more general approach on setting the environment variable, you can use a package like [cross-env](https://www.npmjs.com/package/cross-env).

I scaffolded a React app with `create-react-app ssl-test`, and after running the command (linux) the output looks like this:

```
$ HTTPS=true npm start

> ssl-test@0.1.0 start C:\dev\ssl-test
> react-scripts start

i ｢wds｣: Project is running at https://123.123.123.123
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\dev\ssl-test\public
i ｢wds｣: 404s will fallback to /
Starting the development server...

Compiled successfully!

You can now view ssl-test in the browser.

  Local: https://localhost:3000
  On Your Network: https://123.123.123.123

Note that the development build is not optimized.
To create a production build, use yarn build.
```

The server will use a **self-signed certificate** , so your web browser will display a warning when accessing the entry point of the application.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#custom-ssl-certificate)Custom SSL certificate

You have to create a local Certificate Authority, and an SSL certificate and set the `SSL_CERT_FILE` and `SSL_KEY_FILE` to the generated files.

#### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#generating-an-ssl-certificate)Generating an SSL Certificate

As the first step, you should generate a local Certificate Authority, and an SSL certificate for Local Development.

1. 

You need a package manager to install mkcert:

  - MacOS: Use [Homebrew](https://brew.sh/) or [Macports](https://www.macports.org/).
  - Linux: Use **certutil**. Arch Linux only, mkcert is available on the Arch Linux repository.
  - Windows: Use [chocolatey](https://chocolatey.org/).
2. Install [mkcert](https://github.com/FiloSottile/mkcert).
3. Create a locally trusted CA with `mkcert -install`.
4. Generate an SSL certificate with `mkcert localhost`.

#### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#set-custom-ssl-certificate)Set custom SSL certificate

After generating the local certificate authority and ssl certificate we have to set the SSL_CRT_FILE and SSL_KEY_FILE environment variables to the path of the certificate and key files. HTTPS has to be also true.

Windows:

```
set HTTPS=true&&set SSL_CRT_FILE={CERT-PATH}&&set SSL_KEY_FILE={KEY-PATH}&&react-scripts start
```

Linux, macOS:

```
HTTPS=true SSL_CRT_FILE={CERT-PATH} SSL_KEY_FILE={KEY-PATH} react-scripts start
```

The variables `CERT-PATH` and `KEY-PATH` are the paths to the generated files. Eventually, we set the command as the `npm start` script, and the application runs on HTTPS.

```
"scripts": {
    "start": "HTTPS=true SSL_CRT_FILE={CERT-PATH} SSL_KEY_FILE={KEY-PATH} react-scripts start"
}
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#tldr)TL;DR

- To enable HTTPS locally, the HTTPS environment variable needs to be set to true, local certificate authority and ssl certificate have to be created and set in the environment to avoid the unsecure warning in web browsers.

Thanks for reading and if you have any **questions** , use the **comment** function or **send me a message** **[@mariokandut](https://www.twitter.com/mariokandut)**. If you want to know more about **[React](https://www.mariokandut.com/tags/react)**, have a look at these [React Tutorials](https://www.mariokandut.com/tags/react).

**References (and Big thanks):**

[bitsrc.io - dulanka](https://blog.bitsrc.io/using-https-for-local-development-for-react-angular-and-node-fdfaf69693cd),[create-react-app](https://create-react-app.dev/docs/using-https-in-development/),[chocolatey](https://chocolatey.org/),[mkcert](https://github.com/FiloSottile/mkcert),[cross-env](https://www.npmjs.com/package/cross-env)