How to Use Environment Files in a React App

Option 1: The Default Create React App Way

Step 1: Be sure that the environment variables you want to use begin with REACT_APP_

Step 2: Add .env to your .gitignore file

Step 2: Create a .env file, then add them like so:

DB_HOST=localhost
DB_USER=root
DB_PASS=eaxL7fMJsYPk9MicKWwMt7F

Example .env File Showing How to Add Three Environment Variables: DB_HOST, DB_USER, and DB_PASS

Note 1: The settings that you create with REACT_APP_ will be exposed. That means your frontend user will have them, and so you should only use this for settings that do not give the regular users privileged access (for example, your API keys to 3rd party services).

Note 2: If you make a change to this file (.env), unlike normal development changes, your changes will not be “hot reloaded,” or reloaded while the development server is running. Shut down the development server and restart it for your change to take effect.

Option 2: Using dotenv node package

TBD