Install HTTPS on localhost with create-react-app

When you create a Project using create-react-app and start the project you will see http://localhost:3000 . When you want to test your app on https , what should I do?

To solve the above problem, today I will talk about the problem of creating an SSL certificate to be able to use https on localhost

create-react-app is a quick and simple way to create React projects.

After finishing the steps above. Our app will run at http://localhost:3000

1. Add HTTPS

In the package.json file, update the start script

Rerun npm start and your browser screen should display like this:

2. Create an SSL Certificate

In the previous step, we have set to allow the app to run https. But you don’t yet have an SSL Certificate , so your connection shown on the screen is not secure. So now we create an SSL Certificate that works on localhost . The easiest way to get an SSL Certificate is to use a tool called mkcert

Refer to the mkcert link to install the tool for each operating system. Here I use macOS

After running the above command, you will be able to create a CA (certificate authority) on your computer. The CA ensures that you generate many certificates for all future projects

From the project’s root directory. Run the following command:

We will save the generated certificate in the .cert directory. This directory will not commit on the repo, so you need to ignore this directory in the .gitignore file

3. Add the SSL Certificate in the start script

Next, we need to update the start script with the newly created certificate :

When you run npm start again, you should see your connection is secure and use https at localhost as shown below.