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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.