如何在组件内部使用React自定义环境变量

Question

I used Create-React-App to create a react application, now I want to have 3 different envirement variable for build :

1 - Development

2 - Staging

3 - Production

I follow this article from Facebook. So based on this artile, now I have 3 .env files in my project :

.env.development

.env.staging

.env.production 

in each one of this .env files I have my API address based on the stage we are building the app, like this :

API_URL=https://MYAPI.com/STAGE

in my package.json I have these scripts :

"scripts": {
   "start": "env-cmd .env.development react-scripts start",
   "build_development": "env-cmd .env.development npm run build",
   "build_staging": "env-cmd .env.staging npm run build",
   "build": "react-scripts build",
 }

In my component which call this api URL, I use this to get the API_URL :

let apiUrl = process.env.API_URL

So once I run for example : npm run build_staging

It will build the app but once I debug it, apiUrl is always undefined .

Not sure what is wrong? anyone had such a problem?

Answer 1

I believe your environment variable names need to start with REACT_APP_ using create-react-app , as stated in the same GitHub page you linked. Changing your API_URL to REACT_APP_API_URL should fix the issue.