[FIXED] How can I configure my prod env vars when I run my build process?

Issue

I'm building a React 16.13.0 application. I want to configure an endpoint differently, per environment, so I have set this up in a component, src/containers/FormContainer.jsx, ...

class FormContainer extends Component {
  static DEFAULT_COUNTRY = 484
  static REACT_APP_PROXY = process.env.REACT_APP_PROXY
    ...

I want to build my project for production locally. However locally I have defined this variable

localhost:client davea$ echo $REACT_APP_PROXY
http://localhost:9090

and after I run "npm run-script build," I notice this compiled into my build files ...

(function(e){return e.json()})).then((function(t){console.log(t),n=t.map((function(e){return e})),e.setState({provinces:n})}))}}]),t}(n.Component);S.DEFAULT_COUNTRY=484,S.REACT_APP_PROXY="http://localhost:9090"

Is there any way to not get React to auto-resolve the env var and instead grab it from the production environment? Maybe I need to adjust my build script? Below is what's defined in my package.json file ...

localhost:client davea$ cat package.json 
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "jquery": "^1.9.1",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-dom": "^16.12.0",
    "react-native-flash-message": "^0.1.15",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "proxy": "http://localhost:8000",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Solution

You are using react-scripts to build your App. You can define environment variables in your .env files.

For variables that are common across your node environment, you can define them in .env file

For variable that are specific to development and production, you can define them in .env.development and .env.production files

Also please prefix your variables with REACT_APP

Once you do that you can add scripts in your package.json to specify a build for a particular NODE_ENV

"scripts": {
    "start": "react-scripts start",
    "build": "NODE_ENV=development react-scripts build",
    "build:prod": "NODE_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

and then you can build your APP for production locally like

yarn run build:prod

and it will use the production environment variables

Read more about it on create react app documentation

Answered By - Shubham Khatri

Answer Checked By - David Goodson (PHPFixing Volunteer)