[React] Use Environment Variables with Create React App

Environment variables are a standard way to configure variables in your app based on the current environment (development, test, production). This lesson explores how to use environment variables specifically with Create React App, starting with the built in NODE_ENV variable, as well as how to create custom environment variables for your app.

 

 .env: 

REACT_APP_CUSTOM=<custom_value_in_dotenv_file>

 

It must start with "REACT_APP_", otherwise, it doesn't work;

 

Inside component, we can do:

    <div className="App">
      <pre>process.env.NODE_ENV: {process.env.NODE_ENV}</pre>
      <pre>process.env.REACT_APP_CUSTOM: {process.env.REACT_APP_CUSTOM}</pre>
    </div>

 

It is recommended to push .env file to git, so can share with team.

 

And always you can overwrite with .env.local file

REACT_APP_CUSTOM=<custom_value_in_dotenv_file>