如何在使用 create-react-app 创建的应用程序中设置环境变量？

Question

I created an app with create-react-app and I'd like to configure some envs in JS files. Where should I put these files if I want them to be executed just after server initializing?

I've tried adding index.js to the root folder and creating server/config.js file, but that doesn't work.

Answer 1

if your purpose here is to check the application environment in the front end then no need set any .env file, you can just set global variables before running the script you need inside package.json file like that:

"scripts": {
   "start": "REACT_APP_ENVIRONMENT=LOCAL react-scripts start"
   "build": "REACT_APP_ENVIRONMENT=PRODUCTION react-scripts build"
}

so whenever you want to work in your local environment you will run npm start and this will set REACT_APP_ENVIRONMENT variable to LOCAL value.

and the same work when you want to run the application in production you run npm run build script and that will set the variable REACT_APP_ENVIRONMENT to PRODUCTION value

you can use the same variables in your js config file to get the current environment like that:

export const isDevelopment = REACT_APP_ENVIRONMENT === 'LOCAL'; export const isProduction = REACT_APP_ENVIRONMENT === 'PRODUCTION';

Answer 2

Create a .env file in root directory of your app. Prefix every environment variable with the string REACT_APP_varNameHere. Find examples here: https://create-react-app.dev/docs/adding-custom-environment-variables/