Setup an SSL Certificate for Local Development

An SSL certificate is useful for local development when setting up communication with a remote API. Specifically, if you are trying to set up user authentication with cookies in php you will need to set session.cookie_secure to true which requires https.

Here is a step by step guide for setting up a local SSl certificate on Windows and referencing it in Create React App.

Install mkcert package globally

npm install -g mkcert

Create the certificate and key

Run the command prompt as administrator

1. Hit Start, type “cmd” and you’ll see “Command Prompt” listed as the main result.
2. Right-click “Command Prompt” and choose “Run as administrator”.

Execute the following commands in the command prompt with admin access

mkcert create-ca
mkcert create-cert

The output should be:

Install the certificate

Open C:\Windows\System32 in File Explorer.

Double click the ca.cert file, then click “Install Certificate…”.

Select Store Location > Local Machine and click “Next”.

Select “Place all certificates in the following store” and browse to select “Trusted Root Certification Authorities”.

Click “Next” and then “Finish”, you should see a popup that says “The import was successful.” The Certificate Information window should now be as follows (you might need to close and re-open ca.cert).

You have successfully installed the certificate on your machine.

Configure Create React App

Add a .env file to the root folder of your Create React App with the following contents.

HTTPS= true
SSL_CRT_FILE=C:/Windows/System32/cert.crt
SSL_KEY_FILE=C:/Windows/System32/cert.key

That’s it! Now when you run react-scripts start the local host will utilize https protocol.