React4 min read

React Environment Variables

Use environment variables for API keys and config.

Sarah Johnson
December 20, 2025
0.0k0

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

```javascript 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

```.env.development REACT_APP_API_URL=http://localhost:3001 ```

```.env.production 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!

#React#Environment#Config#Intermediate