The NODE_ENV
environment variable plays a crucial role in determining your application’s behavior across different environments. Incorrect settings can lead to API calls being sent to wrong endpoints, missing authentication headers, or using incorrect credentials.
Common Issues from Incorrect NODE_ENV
- API calls going to production endpoints during development
- Development tools disabled in production
- Missing error details in production
- Wrong authentication tokens being used
- CORS issues when switching environments
Proper Configuration Solutions
1. Environment-Specific API Base URLs
Create environment files:
.env.development
.env.test
.env.production
Example .env.development:
REACT_APP_API_BASE_URL=https://api.dev.example.com
REACT_APP_ENV=development
Example .env.production:
REACT_APP_API_BASE_URL=https://api.example.com
REACT_APP_ENV=production
2. Dynamic API Configuration
apiClient.js:
const baseURL = process.env.REACT_APP_API_BASE_URL ||
(process.env.NODE_ENV === 'production'
? 'https://api.example.com'
: 'https://api.dev.example.com');
const apiClient = axios.create({
baseURL,
headers: {
'Content-Type': 'application/json'
}
});
3. Conditional Behavior Based on Environment
// Only log API calls in development
if (process.env.NODE_ENV === 'development') {
axios.interceptors.request.use(request => {
console.log('Starting Request', request);
return request;
});
}
Best Practices
1. Never Hardcode Environment Checks
// ❌ Bad - won't work with custom environments
if (process.env.NODE_ENV === 'development') {
baseURL = 'http://localhost:3000';
}
// ✅ Better - use environment variables
baseURL = process.env.REACT_APP_API_BASE_URL;
2. Use Full Environment Variables
// Instead of just checking 'production'
const isProduction = process.env.NODE_ENV === 'production';
const isStaging = process.env.REACT_APP_ENV === 'staging';
const isTest = process.env.NODE_ENV === 'test';
3. Secure Sensitive Data
// Never expose sensitive keys directly
// ❌ Bad
const API_KEY = '12345';
// ✅ Better - use environment variables
const API_KEY = process.env.REACT_APP_API_KEY;
Advanced Configuration
1. Multiple Environment Support
// config.js
const env = process.env.REACT_APP_ENV || process.env.NODE_ENV || 'development';
const configs = {
development: {
apiBase: 'https://dev.api.example.com',
debug: true
},
staging: {
apiBase: 'https://staging.api.example.com',
debug: true
},
production: {
apiBase: 'https://api.example.com',
debug: false
}
};
export default configs[env];
2. Build-Time Configuration
package.json:
{
"scripts": {
"build:staging": "REACT_APP_ENV=staging react-scripts build",
"build:prod": "REACT_APP_ENV=production react-scripts build"
}
}
3. Runtime Configuration (For Docker/K8s)
// Load configuration from window object
window.config = {
API_BASE_URL: '%%API_BASE_URL%%'
};
// Then in your app:
const baseURL = window.config.API_BASE_URL ||
process.env.REACT_APP_API_BASE_URL;
Troubleshooting
1. Verify Environment Variables
// Add this to your App.js temporarily
console.log({
NODE_ENV: process.env.NODE_ENV,
REACT_APP_ENV: process.env.REACT_APP_ENV,
REACT_APP_API_BASE_URL: process.env.REACT_APP_API_BASE_URL
});
2. Check Build Process
- Ensure correct .env file is being used
- Verify variables are present in build output
- Check for typos in variable names
3. Test Different Environments
# Test development
npm start
# Test production build locally
serve -s build
Security Considerations
- Never include sensitive data in client-side code
- Use HTTPS for all API endpoints
- Implement proper CORS configuration
- Use environment-specific API keys
- Regularly rotate credentials
By properly managing your NODE_ENV
and environment-specific configurations, you can ensure your application makes API calls to the correct endpoints in each environment while maintaining security and debugging capabilities.