loading...
Cover image for How to setup HTTPS locally with create-react-app

How to setup HTTPS locally with create-react-app

ganeshagrawal profile image Ganesh Agrawal ・3 min read

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.

How to setup HTTPS locally with create-react-app

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.

Posted on by:

ganeshagrawal profile

Ganesh Agrawal

@ganeshagrawal

I create blog posts and like to play around React and NodeJs.

Discussion

markdown guide
 

I came here just to see if you would talk about mkcert lol how good 😊. It is a sensational tool.

About the variables passed in the command line, they can be defined in an .env file if you prefer, I have a CRA project that uses this format and works very well.

HTTPS=true
SSL_CRT_FILE=./.cert/cert.pem
SSL_KEY_FILE=./.cert/key.pem

Screenshot of CRA with .env and mkcert

Congratulations and thanks for the post. 👏

 

Yes, sure we can use env variable as env variable and set env variable as global to ignore the cert generation problem in every react project that we going to create in future and use that same certificate for multiple projects

 

It's a great idea. Most of the projects we run on localhost, so it would work well to share the generated certificates between different projects.

 

I like that Homebrew for Linux is gaining ground. While I'm going to stick with APT repos as much as possible, I'd love to see more people recognize (and developers support) brew as an alternative to the Snap/Flatpak/AppImage holy wars.

 

mkcert is nodejs only? isn;t there something for apache/nginx ?

 

Looks like mkcert is just for generating certificates. You can use them with any web server basically though this tutorial only explains how to attach them to CRA.

 

I used with Node, Apache and nginx. Works perfectly. Like Alex said, it is just a certificate generation tool.

 

Apache/Nginx follow simple approach so only generate cert with mkcert and bind them with you server config file in and reload the server.

 

Very great and useful article. I didn't know it was so easy to setting up local development HTTPS with mkcert!
How we do this with Vue?

 

It's my pleasure you liked it. Yes sure, for vue you have to follow these process after generating a certificate:

  1. You have to first note down the path of your local CA. for that run these commands in the bash terminal
# for checking CA path
mkcert -CAROOT
# /home/hades/.local/share/mkcert

cd /home/hades/.local/share/mkcert
ls
# rootCA-key.pem  rootCA.pem
#copy the rootCA.pem path

mkcert ca root

In your vue project root dir create vue.config.js file or made the respective change if already exits:

// vue.config.js
var fs = require('fs');

module.exports = {
  //...
  devServer: {
    //...
    https: true,
    key: fs.readFileSync('/path/to/server.key'),
    cert: fs.readFileSync('/path/to/server.crt'),
    ca: fs.readFileSync('/path/to/ca.pem'),
  }
};

Here key & cert file generated at time of localhost certificate generation so use that path. in my case, that was ./.cert/key.pem and ./.cert/cert.pem.
ca path we already copied in the last step that was /home/hades/.local/share/mkcert/rootCA.pem

Note: In most of the case, you do not require to set `ca`. If your browser giving not trusted certificate then use that.

For more reference checkout Docs.

Thanks for reading this article. 😊

 

Very useful I am going to try this out later thanks.

 

Glad you liked it ♥️