React Environment Variables

Store configuration in environment variables.

Create .env File

REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=your-api-key

Using in Code

const apiUrl = process.env.REACT_APP_API_URL;
const apiKey = process.env.REACT_APP_API_KEY;

fetch(`${apiUrl}/users`, {
  headers: { 'API-Key': apiKey }
});

Multiple Environments

REACT_APP_API_URL=http://localhost:3001

REACT_APP_API_URL=https://api.mysite.com

Rules

• Must start with REACT_APP_
• Restart server after changes
• Don't commit .env to git
• Use .env.example for template

.gitignore

.env
.env.local

Remember

• Never expose secrets in client code
• Use for non-sensitive config
• Different .env per environment

Next: Learn testing basics!