CODEWITHSUNDEEP
reactjshttpsssl-certificatelocalhostmkcert
sgt_pepper85
sgt_pepper85

Reputation: 441

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.

Upvotes: 3

Views: 6316

Answers (2)

Michael Coxon
Michael Coxon

Reputation: 3535

The accepted answer is correct only if you are running Windows. If you are running Mac OS X, you should stick to the original instructions in the referenced tutorial because they are correct.

The set command and && separator are PowerShell syntax features.

Upvotes: 0

sgt_pepper85
sgt_pepper85

Reputation: 441

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.

Upvotes: 5

Related Questions