react-create-app环境变量配置

Question

i am creating react application using create-react-app,i am using node js as a backend development.

i can run it successfully in the local environment,but while having same application in the production build application doesn't set the "apiURL"

my backend url is= http://localhost:5001/

API_URL = process.env.REACT_APP_API_URL

actually i need to get my API_URL = http://localhost:5001 but i am getting API_URL is undefined in the production deploy

and on request of some backend api i am getting

http://localhost:3000/undefined/api/someapi

but actually i need to get the http://localhost:5001/undefined/api/someapi

can any one help how can configure my environment variable dynamically depends on the host environment

sorry for my bad english

thanks in advance

Answer 1

You need to set different values of your variables depending on your environment. There're multiple possibilities, you can for example do it on script level in your package.json:

"scripts": {
   "deploy:staging": "REACT_APP_API_URL=<paste-your-api-for-staging> ...",
   "deploy:production": "REACT_APP_API_URL=<paste-your-api-for-production> ...",
}

Or you can use my personal favorite -> https://github.com/motdotla/dotenv for managing your env variables. It's based on different .env files for eg. .env.local or .env.production where you can set your values.