将环境变量从 Package.json 传递给 React 应用程序

Question

following this article https://serverless-stack.com/chapters/environments-in-create-react-app.html

I am trying to add an environment variable to my react app which I have created using create react app. so my build command looks like below

 "build": "REACT_APP_SECRET_CODE=123 react-scripts build",

while I try to run this build command in my Visual studio code terminal via

npm run build 

it gives me the error that REACT_APP_SECRET_CODE is not recognized as an internal or external command.

How would i pass the environment variable in `package.json and build my app and access the variable value in my app.

Answer 1

you can do it in a clean way (imo) using better-npm-run package

{
  "devDependencies": {
    "better-npm-run": "~0.0.1"
  },
  "scripts": {
    "build": "better-npm-run build",
  },
  "betterScripts": {
    "build": {
      "command": "react-scripts build",
      "env": {
        "REACT_APP_SECRET_CODE": "123"
      }
    }
  }
}

there are more advanced usage for this library, which I think might help you in the long term on your project

Answer 2

If you don't want to install any other library. You can pass environment variable to yarn or npm command like this:

"scripts": {
 "start": "breact-scripts start",
 "start:env": "REACT_APP_ABC=xyz yarn start",
}

Note: Remember to put prefix "REACT_APP_" in your environment variable otherwise React won't allow it to use in app.