How to Make React.js Use HTTPS in Development

Steffo Dimfelt
Oct 11, 2020 · 3 min read

Article #2 in my serie about React.js

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.

The Startup

Get smarter at building your thing. Join The Startup’s +789K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

Steffo Dimfelt

Written by

Twenty years of graphic design. Three years of development. A lifetime of curiosity.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store