Using HTTPS with create react app
Tags: ssl, https, react, certificate
Published: 2020-07-16 08:04:46

---
title: Using HTTPS with create react app
published: true
description: How to set up a certificate for local testing
tags: ssl, https, react, certificate
//cover_image: https://direct_url_to_image.jpg
---
# Using HTTPS with create react app
It's been a while since I first wrote about [using HTTPS with react create app](https://dev.to/wozzo/using-https-with-react-create-app-windows-fn8), and since then things have changed, so here's an updated set of instructions.

A new feature has been added to react scripts that allow us to specify a certificate file without needing to modify the `node_modules` contents as my previous solution required. You'll need to ensure you have at least [version 3.4.0 of react-scripts](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#340-2020-02-14) to be able to use this feature.

## Creating the certificate
To create the certificate you'll need openssl. You can install it using chocolatey by running `choco install openssl`. Start by creating the configuration file. Save the following as certificate.conf

```bash
[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_req
prompt = no
[req_distinguished_name]
C = GB  # Enter 2 digit country code here
O = My Company # Enter company name
CN = localhost
[v3_req]
keyUsage = critical, digitalSignature, keyAgreement
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost
```

Next up run the following command to create the certificate and key.

```PowerShell
openssl req -x509 -newkey rsa:4096 -sha256 -keyout certificate.key -out certificate.crt -days 365 -config certificate.conf -new -nodes
```

Take the two files and store them in the root of your app.

## Using the certificate

In the root of your app create a file called `.env` if you don't have one already. This file can be used for storing environment variables to be used by the react-scripts for [various settings](https://create-react-app.dev/docs/advanced-configuration).
Add the following to it
```
HTTPS=true
SSL_CRT_FILE=certificate.crt
SSL_KEY_FILE=certificate.key
```

That's it. When you run `yarn start` it will use these environment variables to retrieve the certificate and use it for the webpack-dev-server. At this point you'll still be getting a certificate warning in your browser.

## Install the certificate
You need to install the certificate to a trusted root location.
* In Windows open the start menu and type "certificates".
* Select "Manage Computer Certificates"
* Expand "Trusted Root Ceritification Authorities"
* Right click on "Certificates" and select "All Tasks" -> "Import".
* Click next
* Enter the path for the crt file.
* Proceed through the next few screens to import the certificate

Finally those pesky browser warnings should be gone. You'll be able to develop away for the next year. Note that you can change the `-days` value in the `openssl req` command, but the current maximum most browsers will accept is 825, and just 368 days in Safari. When the year is up, just come back here and remind yourself how it works. That's what I'll be doing ;)