How to Make React.js Use HTTPS in Development

At some point in your development, you need to do some API-request. The problem is that when you are in localhost-environment, the HTTP is considered Non Secure. Therefore, you need to use HTTPS instead.

The Journey

1. Make the SSL-files
2. Connect SSL-files with React project
3. Get the Certification!
4. Reload Server

1. Make the SSL-files

Open up your root-folder and create a new folder called certification (or some other name of your choice).

Open up the certification and run this bit of code:

openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365

Now you have to print a password. And confirm it.

After this there is form to fill, but this is optional.

This line of code generates two files — cert.key and cert.perm.

2. Connect SSL-files with React project

Open ut the package.json and scroll down to Debug/scripts section. Replace the start value:

“start”: “react-scripts start”,

With following line:

“start”: “export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start”,

It should look like this:

Run the application:

npm start
or 
yarn start

3. Get the Certification!

Now we can reach the Certification option by clicking on Not Secure in browsers search bar.

Click on the Certificate option and a new window will open.

Now — drag that little icon, gently, and drop it on your Desktop.

Double click on the icon and enter password

Now you are in your Keychain. Double click on the certificate again. You can have more than one certificate named localhost. Each localhost goes to an individual project.

Choose Always Trust option.

And confirm changes.

You can move the certificate on the Desktop to the Bin.

4. Reload Server

Don’t forget to stop the server at the Terminal with CTRL + C and restart it. And then refresh your browser.

Now you got your padlock and a secure HTTPS React web page.