Incorrect NODE_ENV settings affecting API calls

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.