create-react-app local and dev environment variables

Question

I have .env.local with

REACT_APP_BACKEND_BASEURL=http://localhost:8080/

and .env.development with

REACT_APP_BACKEND_BASEURL=http://deployedserverurl:8080/

how do I select the correct env file on start? As it is now, it prefers the dev env file over the local.

npm start --env=local doesnt seem to work, am I missing something?

Answer 1

Environment variables are imported depending on the current environment. There is a built in special environment variable with create-react-app called NODE_ENV. In summary, when you run npm start the NODE_ENV variable is set to development and set to production when running a npm run build. Therefore, if you create a .env.development in the root of your project, when you run npm start these variable definitions will be searched for in the environment.

Also, ensure you're using them correctly by using process.env.REACT_APP_APP_BACKEND_BASEURL.

If you need more information regarding all of the details about the different type of .env files, check these out from the React Docs:

env: Default.

.env.local: Local overrides. This file is loaded for all environments except test.

.env.development, .env.test, .env.production: Environment-specific settings.

.env.development.local, .env.test.local, .env.production.local: Local overrides of environment-specific settings.