reactjshttpsssl-certificatelocalhostmkcert

How to setup local environment to run on https

I am trying to run my React application via https local. I have followed the steps of this tutorial, have installed mkcert correctly and the root of my project currently looks like this:

|-- my-react-app
    |-- package.json
    |-- localhost.pem
    |-- localhost-key.pem
    |--...

And my package.json file looks like this:

"scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start",
    ...

Yet when I run npm start I receive this error:

'HTTPS' is not recognized as an internal or external command, operable program or batch file.

I also tried creating a .env file in the root and adding the variables like this:

HTTPS=true
SSL_CERT_FILE=localhost.pem
SSL_KEY_FILE=localhost-key.pem

However when I run the app this way I receive a warning to say my connection is not secure.

I have spent time googling the errors and so far still unable to find a solution.

Solution

  • The solution was to amend my package.json file to look like this:

    "scripts": {
    "start": "set HTTPS=true&&set SSL_CRT_FILE=localhost.pem&&set SSL_KEY_FILE=localhost-key.pem&&react-scripts start",
    ...

    This produced a RangeError: Invalid typed array length: -4095 on start. Upgrading my react scripts to the latest version with npm install --save react-scripts@latest solved that.

    I now have a secure connection on my localhost. Hope this helps someone else out in the future.