Managing NODE_ENV for Proper API Configuration

Incorrect NODE_ENV settings can lead to serious issues in your React application, particularly affecting API calls by:

• Pointing to wrong API endpoints
• Using incorrect authentication tokens
• Enabling/disabling features unintentionally
• Exposing sensitive debug information

Common Problems from Incorrect NODE_ENV

1. Development API calls in production (or vice versa)
2. Missing error tracking in production
3. Debug information leaks to end users
4. Performance monitoring gaps
5. Caching misconfiguration

Correct Configuration Approaches

1. Environment-Specific API Base URLs

// src/config.js
const API_BASE_URL = {
  development: 'https://dev-api.example.com',
  test: 'https://test-api.example.com',
  production: 'https://api.example.com'
}[process.env.NODE_ENV || 'development'];

export default { API_BASE_URL };

2. Webpack Environment Plugin (for Create React App)

// config-overrides.js (for CRA)
const { override } = require('customize-cra');
const { EnvironmentPlugin } = require('webpack');

module.exports = override(
  new EnvironmentPlugin({
    NODE_ENV: process.env.NODE_ENV || 'development',
    API_URL: process.env.API_URL || 'https://dev-api.example.com'
  })
);

3. Runtime Environment Detection

// src/utils/env.js
export const isDevelopment = process.env.NODE_ENV === 'development';
export const isProduction = process.env.NODE_ENV === 'production';
export const isTest = process.env.NODE_ENV === 'test';

export const getApiBaseUrl = () => {
  if (isProduction) return 'https://api.example.com';
  if (isTest) return 'https://test-api.example.com';
  return 'https://dev-api.example.com';
};

Best Practices for API Configuration

1. Never hardcode API URLs directly in components
2. Use environment variables for all environment-specific values
3. Validate NODE_ENV at application startup
4. Implement runtime checks for critical operations
5. Separate configuration from application logic

Common Pitfalls and Solutions

Problem: API calls failing in production
Solution:

// Check environment before making calls
if (process.env.NODE_ENV === 'production' && !window.location.href.includes('production-domain')) {
  console.error('Mismatched environment!');
  // Handle error or redirect
}

Problem: Development tools appearing in production
Solution:

// Only enable dev tools in development
if (process.env.NODE_ENV === 'development') {
  const { whyDidYouUpdate } = require('why-did-you-update');
  whyDidYouUpdate(React);
}

Problem: Test environment using wrong API
Solution:

// jest.setup.js
process.env.NODE_ENV = 'test';
process.env.API_URL = 'http://localhost:3001';

Advanced Configuration

1. Dynamic Environment Loading

// Load environment-specific config file
const env = process.env.REACT_APP_ENV || process.env.NODE_ENV;
const config = require(`./config.${env}.json`);

2. Feature Flags Based on Environment

// src/features.js
export const FEATURES = {
  newDashboard: process.env.NODE_ENV !== 'production',
  experimentalApi: process.env.NODE_ENV === 'development'
};

3. Secure Environment Variables

// Use .env files with proper security
REACT_APP_API_KEY=your_key_here
NODE_ENV=development

Verification Checklist

1. [ ] NODE_ENV is correctly set in build scripts
2. [ ] Different environments use different API endpoints
3. [ ] Production builds don’t contain development tools
4. [ ] Test environment is properly isolated
5. [ ] Environment variables are properly validated