[FIXED] How do I use package.json to expose a .env file property?

Issue

I have a .env file that is supposed to define sensitive variables for me. I have a package.json file that I want to expose these variables for but I'm getting an error that says the file can't be found.

Here is the .env file

REACT_APP_HTTPS=true
REACT_APP_SSL_CRT_FILE=C:\Users\techNerd\SSL\rootSSL.pem
REACT_APP_SSL_KEY_FILE=C:\Users\techNerd\SSL\rootSSL.key.pem
REACT_APP_PORT=3000

package.json file:

"scripts": {
    "start":"set HTTPS=true&&set SSL_CRT_FILE={process.env.REACT_APP_SSL_CRT_FILE}&&set SSL_KEY_FILE=process.env.REACT_APP_SSL_KEY_FILE&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Here is the error that I get:

set HTTPS=true&&set SSL_CRT_FILE=process.env.REACT_APP_SSL_CRT_FILE&&set SSL_KEY_FILE=process.env.REACT_APP_SSL_KEY_FILE&&react-scripts start
You specified SSL_CRT_FILE in your env, but the file "C:\Users\techn\WebstormProjects\AuthInMern2\client\process.env.REACT_APP_SSL_CRT_FILE" can't be found.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What am I doing wrong?

Solution

Since you're not using the variable inside of the React app, you can remove the REACT_APP_ from the env var name.

In .env:

SSL_CRT_FILE=C:\Users\techNerd\SSL\rootSSL.pem

package.json:

"scripts": {
    "start":"set HTTPS=true&&set SSL_CRT_FILE=$(grep SSL_CRT_FILE .env | cut -d '=' -f2)
react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Answered By - marius florescu

Answer Checked By - Timothy Miller (PHPFixing Admin)