How to setup HTTPS locally with create-react-app

How to setup HTTPS locally with create-react-app

Generally, we saw that the React app running locally on http://localhost:3000. But when we deploy and run the app on production we mostly host on HTTPS. Running HTTPS in development is helpful when you need to consume an API that is also serving requests via HTTPS.

Hello, Today we are going to discuss How to serve a local React app via HTTPS. In this article, we will be setting up HTTPS in development for our create-react-app with our SSL certificate.

Create-react-app (CRA) is a convenient and easy way to set up initial boilerplate when developing React App. To start building React App using CRA, we generally use the following steps to start the setup and run the default CRA app.

npx create-react-app dummy-app
cd dummy-app
npm start

After running these steps our react app runs locally at http://localhost:3000. But we want to runs it at https://localhost:3000. So, the question is how do we run or test the app locally on https.

This is a very simple process for setup own SSL certificate and HTTPS in development. For this guide, brew pre-installed required.

Step 1: Adding HTTPS

In your package.json, update the start script.

"scripts": {
    "start": "HTTPS=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

Now run npm start or yarn start and your browser screen show this-

Privacy Error

Step 2: Creating an SSL Certificate

At the previous stage, you're already set to go with https. But you don't have a valid certificate, so your connection is assumed to be insecure. So now we create our SSL certificate that works with the localhost. The easiest way to obtain a certificate is via mkcert.

Run these commands in the terminal-

# Install mkcert tool
brew install mkcert

# Setup mkcert on your machine (creates a CA)
mkcert -install

Setup mkcert on your machine

After running the above commands, you'll have created a certificate authority on your machine which enables you to generate certificates for all of your future projects.

From the root of your create-react-app project, you should now run:

# Create .cert directory if it doesn't exist
mkdir -p .cert

# Generate the certificate (run from the root of this project)
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

Generate the certificate

We'll be storing our generated certificates in the .cert directory. These should not be committed to version control, so you should update your .gitignore to include the .cert directory.

Step 3: Include SSL certificate in start script

Next, we need to update the start script again to include our newly created certificate:

"scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

When you run npm start or yarn start again, you should now see that your connection is secure.

How to setup HTTPS locally with create-react-app

Note: start script may have some changes for Windows, Linux, and Mac users.

Don't be a non-interactive person! Feel free to comment down your suggestions and questions, I am always open for your queries.

Follow me on Instagram or Linkedin. Subscribe my weekly Newsletter , I assure its not going to spam your mailbox.