Environment Configuration
Learn to configure different environments (development, staging, production) with proper environment variables and configuration management. This is a foundational concept in component-based UI development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world React experience. Take your time with each section and practice the examples
Environment Variables
Master environment variable management for different deployment environments with proper security practices.. This is an essential concept that every React developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
Environment Setup
// .env files for different environments
// .env.development
REACT_APP_API_URL=http://localhost:3001
REACT_APP_DEBUG=true
REACT_APP_VERSION=1.0.0
// .env.production
REACT_APP_API_URL=https://api.myapp.com
REACT_APP_DEBUG=false
REACT_APP_VERSION=1.0.0
// .env.staging
REACT_APP_API_URL=https://staging-api.myapp.com
REACT_APP_DEBUG=true
REACT_APP_VERSION=1.0.0-stagingConfiguration Management
// config/index.js
const config = {
development: {
apiUrl: process.env.REACT_APP_API_URL || 'http://localhost:3001',
debug: process.env.REACT_APP_DEBUG === 'true',
version: process.env.REACT_APP_VERSION || '1.0.0'
},
production: {
apiUrl: process.env.REACT_APP_API_URL,
debug: false,
version: process.env.REACT_APP_VERSION
},
staging: {
apiUrl: process.env.REACT_APP_API_URL,
debug: process.env.REACT_APP_DEBUG === 'true',
version: process.env.REACT_APP_VERSION
}
};
export default config[process.env.NODE_ENV || 'development'];Feature Flags
// Feature flags implementation
const features = {
newDashboard: process.env.REACT_APP_FEATURE_NEW_DASHBOARD === 'true',
betaFeatures: process.env.REACT_APP_FEATURE_BETA === 'true',
analytics: process.env.REACT_APP_FEATURE_ANALYTICS === 'true'
};
export const isFeatureEnabled = (feature) => {
return features[feature] || false;
};
// Usage in components
if (isFeatureEnabled('newDashboard')) {
return <NewDashboard />;
}
return <OldDashboard />;security Best Practices
- Never expose sensitive data in client-side code — a critical concept in component-based UI development that you will use frequently in real projects
- Use environment variables for configuration — a critical concept in component-based UI development that you will use frequently in real projects
- Validate all environment variables — a critical concept in component-based UI development that you will use frequently in real projects
- Use different keys for different environments — a critical concept in component-based UI development that you will use frequently in real projects
- Implement proper CORS policies — a critical concept in component-based UI development that you will use frequently in real projects
- Use HTTPS in production — a critical concept in component-based UI development that you will use frequently in real projects
Mini-Project: Environment Configuration System
// Complete environment configuration system
import { z } from 'zod';
// Environment schema validation
const envSchema = z.object({
NODE_ENV: z.enum(['development', 'production', 'staging']),
REACT_APP_API_URL: z.string().url(),
REACT_APP_DEBUG: z.string().transform(val => val === 'true'),
REACT_APP_VERSION: z.string(),
REACT_APP_FEATURES: z.string().optional()
});
// Parse and validate environment variables
const parseEnv = () => {
try {
return envSchema.parse(process.env);
} catch (error) {
console.error('Invalid environment configuration:', error);
throw new Error('Environment configuration is invalid');
}
};
// Configuration factory
const createConfig = () => {
const env = parseEnv();
return {
api: {
baseUrl: env.REACT_APP_API_URL,
timeout: env.NODE_ENV === 'production' ? 10000 : 30000
},
app: {
version: env.REACT_APP_VERSION,
debug: env.REACT_APP_DEBUG,
environment: env.NODE_ENV
},
features: {
newDashboard: env.REACT_APP_FEATURES?.includes('new-dashboard') || false,
betaFeatures: env.REACT_APP_FEATURES?.includes('beta') || false
}
};
};
export const config = createConfig();
export default config;