React Deployment: Managing Environment Variables

What Are Environment Variables in React?

Environment variables are key-value pairs used to configure applications dynamically.

In React, they allow you to define values like API endpoints or feature flags that differ between development and production.

• Stored outside the source code.
• Injected during build time.
• Accessible via process.env in the code.

Using .env Files in React

React supports environment variables through .env files placed in the project root.

Variables must start with REACT_APP_ to be embedded into the build.

• Create a .env file for default variables.
• Use .env.development and .env.production for environment-specific settings.
• Example: REACT_APP_API_URL=https://api.example.com

Accessing Environment Variables in Code

You can access environment variables in your React components using process.env.REACT_APP_VARIABLE_NAME.

These values are replaced at build time, so changing .env files requires rebuilding the app.

• Example: const apiUrl = process.env.REACT_APP_API_URL;
• Use variables to configure API calls, feature toggles, or analytics keys.

Best Practices for Environment Variables

Managing environment variables securely and efficiently is essential for production readiness.

• Never commit sensitive keys directly to source control.
• Use .env.local for local overrides and add it to .gitignore.
• Keep environment variables minimal and relevant.
• Document environment variables for team clarity.
• Rebuild the app after changing environment variables.

Example: Setting Up API URL with Environment Variables

Suppose you want to configure your React app to use different API URLs for development and production.

• Create .env.development with REACT_APP_API_URL=http://localhost:5000
• Create .env.production with REACT_APP_API_URL=https://api.example.com
• Access the URL in code: const apiUrl = process.env.REACT_APP_API_URL;