Configure HTTPS for React applications running locally

If you build an application with create-react-app and run it locally, the application will be served using the HTTP protocol by default. Applications running in a production environment are served using HTTPS.

Although configuring HTTPS is pretty straightforward, configuring it locally is a bit more complicated.

[[346336]]

As we all know, the create-react-app program is run with npm run start (or simply npm start). In the scripts section of the package.json file, there is a line of configuration:

 "start": "react-scripts start"

Change it to:

 "start": " HTTPS = true react-scripts start"

Set the value of the environment variable HTTPS to true.

This is not enough, you also need to generate a local certificate.

Note: The following commands are executed on macOS, and can be operated in the same way on Linux. However, there is no guarantee that they will work successfully on Windows.

In the project root directory, run:

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

Then run:

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

Two files, cert.pem and key.pem, will be generated in the current directory.

Now change the start script in the package.json file to:

 "start": "export HTTPS = true && SSL_CRT_FILE = cert .pem&& SSL_KEY_FILE = key .pem react-scripts start",

Now run npm run start and access the React application. You should see the following warning message:

This is because the default browser does not trust the local certificate.

Click on the little "Not Secure" icon near the address bar and a small panel will appear:

Click on Certificate and you will see another panel with the certificate details:

Now drag the certificate icon to the desktop or a folder with the mouse, and you will get the certificate file. Then double-click the certificate to install it and set it as "Trusted Certificate or Issuing Authority".

After the setup is complete, you can access your React application locally via HTTPS: