create react app not picking up .env files?

Question

With create react app, you need to prefix REACT_APP_ to the variable name. ex:

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

CRA Docs on Adding Custom Environment Variables:

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name

Make sure your .env file is in the root directory, not inside src folder.

Had this same problem! The solution was to close the connection to my node server (you can do this with CTRL + C). Then re-start your server with 'npm run start' and .env should work properly.

Source: Github

If you want to use multiple environment like .env.development .env.production

use dotenv-cli package

add .env.development and .env.production in project root folder

and your package.json

"scripts": {
    "start": "react-app-rewired start",
    "build-dev": "dotenv -e .env.development react-app-rewired build",
    "build-prod": "dotenv -e .env.production react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"   
},

then build according to environment like

npm run-script build-dev