How to Setup HTTPS Locally with create-react-app

As a web developer, you‘re likely already aware of the importance of HTTPS. HTTPS encrypts the data sent between a user‘s web browser and your website‘s server, protecting sensitive information like passwords, credit card details, and personal data from being intercepted and stolen by hackers.

While HTTPS is crucial for production websites, many developers neglect to set it up for their local development environments. However, there are several reasons why you should be using HTTPS locally:

1. It more closely mirrors your production setup, reducing the chances of running into unexpected issues when deploying.
2. Some newer web platform features like Service Workers and Push Notifications only work over HTTPS.
3. HTTPS is required if your local development site needs to make requests to remote APIs or services that are served over HTTPS.

In this guide, we‘ll walk through how to set up HTTPS for local development with create-react-app, a popular tool that makes it quick and easy to bootstrap new React projects.

Prerequisites

To follow along with this tutorial, you‘ll need:

• Node.js installed on your machine
• A basic understanding of the command line
• An existing create-react-app project (or you can create a new one)

Step 1: Generate a Self-Signed SSL Certificate

The first step is to generate a SSL certificate that we can use to serve our local development site over HTTPS. For this, we‘ll use a tool called OpenSSL which comes installed on most Unix-based systems like macOS and Linux.

Open up a terminal window and navigate to your create-react-app project‘s root directory. Then run the following command:

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

This command generates a new self-signed certificate valid for 365 days. You‘ll be prompted to enter some information about the certificate. For local development purposes, you can just hit enter to accept the defaults for most of the fields. The only important field is the Common Name where you should enter "localhost".

After running the command, you should see two new files in your project directory:

• keytmp.pem – This is your certificate‘s private key
• cert.pem – This is your actual SSL certificate

We need to decode and strip the passphrase from the private key:

openssl rsa -in keytmp.pem -out key.pem

You can now safely delete the keytmp.pem file. Make sure to add key.pem and cert.pem to your .gitignore file so they don‘t accidentally get committed to version control.

Step 2: Configure create-react-app to use HTTPS

By default, create-react-app‘s development server runs over regular HTTP. To make it use HTTPS instead, we need to set a few environment variables.

Open up the package.json file in your project‘s root directory and modify the start script to look like this:

"scripts": {
  "start": "HTTPS=true SSL_CRT_FILE=cert.pem SSL_KEY_FILE=key.pem react-scripts start"
}

These environment variables tell create-react-app to:

• Enable HTTPS (HTTPS=true)
• Use our self-signed SSL certificate (SSL_CRT_FILE=cert.pem)
• Use our certificate‘s private key (SSL_KEY_FILE=key.pem)

Now when you run npm start or yarn start, you should see something like this in your browser:

[Screenshot showing HTTPS but certificate error]

Your create-react-app is now served over HTTPS! However, because it‘s using a self-signed certificate, browsers will display a warning saying the connection is not secure.

Step 3: Trust the Self-Signed Certificate

To get rid of the browser warning, we need to configure our computer to trust the self-signed certificate we generated.

On macOS:

1. Open up the Keychain Access app
2. Drag and drop your cert.pem file into the app
3. Double-click on the imported certificate
4. Expand the Trust section
5. Change the "When using this certificate" dropdown to "Always Trust"
6. Close the certificate window and enter your password when prompted to save the changes

[Screenshot showing Keychain Access trust config]

On Windows:

1. Double-click on your cert.pem file to open it
2. Click "Install Certificate"
3. Choose "Local Machine" and click Next
4. Choose "Place all certificates in the following store"
5. Click Browse and select "Trusted Root Certification Authorities"
6. Click Next and Finish to complete the wizard

[Screenshot of cert import wizard on Windows]

After configuring your system to trust the certificate, restart your browser and visit your local development site again. The browser warning should be gone, and you should see a green padlock icon indicating the connection is secure.

Troubleshooting Common Issues

Here are some common issues you might run into while setting up HTTPS locally and how to resolve them:

• Browser displays connection not private error: Make sure you completed Step 3 and configured your computer to trust the self-signed certificate. If you‘re using Firefox, you may also need to manually add an exception for the certificate.
• create-react-app not detecting environment variables: Make sure there are no typos in your package.json file and that the environment variables are set properly. Avoid using quotes around the values. You may need to restart your terminal for changes to take effect.
• Certificate expired error: By default, the self-signed certificate is only valid for 365 days. When it expires, you‘ll need to generate a new one and reconfigure your system to trust it again.
• Changes not taking effect: Browser caching can sometimes cause old versions of your site to be served. Try doing a hard refresh (Shift+Refresh) or clearing your browser cache.

Alternatives and Additional Considerations

While this guide focused on using a self-signed certificate, for a more authentic development experience, you can use a tool like mkcert to generate locally-trusted development certificates.

If your React app needs to communicate with a local backend API over HTTPS, you‘ll also need to set up SSL for your API server. The exact steps will depend on what language/framework you‘re using for your backend.

It‘s important to note that while HTTPS is necessary for securing communication between a web browser and web server, it‘s not sufficient on its own. You should also follow other security best practices like keeping your dependencies up-to-date, validating user inputs, using secure authentication, and guarding against common web app vulnerabilities.

Conclusion

HTTPS is an essential part of modern web development. Setting it up locally only takes a few minutes but provides several benefits:

• More secure local development by encrypting communication between your browser and dev server
• Ability to work with features that require HTTPS
• Closer parity to production environment

Hopefully this guide gave you a solid understanding of how to set up HTTPS for local development with create-react-app. The instructions should work for any React app bootstrapped with create-react-app, but the general principles apply even if you‘re using a different framework or build tool.

Now go forth and develop amazing things with the power of HTTPS!