DEV Community

karoon sillapapan
karoon sillapapan

Posted on

Simple Environment Configuration

Run your app with different environments: Development, UAT, and Production.

📁 Files Structure 

project/
├── frontend/
│   ├── .env                 # Production
│   ├── .env.development     # Development
│   ├── .env.uat            # UAT
│   └── vite.config.ts
├── backend/
│   ├── .env                 # Production
│   ├── .env.development     # Development
│   ├── .env.uat            # UAT
│   └── src/config/configuration.ts
Enter fullscreen mode Exit fullscreen mode

🎯 Frontend Setup

1. Environment Files 

# .env
VITE_API_URL=https://api.yourapp.com

# .env.development
VITE_API_URL=http://localhost:3000

# .env.uat
VITE_API_URL=https://api-uat.yourapp.com
Enter fullscreen mode Exit fullscreen mode

2. vite.config.ts 

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig(({ mode }) => {
  loadEnv(mode, process.cwd(), '');

  return {
    plugins: [react()],
    resolve: {
      alias: { '@': '/src' }
    }
  };
});
Enter fullscreen mode Exit fullscreen mode

3. package.json 

{
  "scripts": {
    "dev": "vite",
    "dev:uat": "vite --mode uat",
    "build": "vite build",
    "build:uat": "vite build --mode uat"
  }
}
Enter fullscreen mode Exit fullscreen mode

4. Usage 

// In any component
const apiUrl = import.meta.env.VITE_API_URL;

// Check environment
console.log('Environment:', import.meta.env.MODE);
Enter fullscreen mode Exit fullscreen mode

🚀 Backend Setup

1. Environment Files 

# .env
NODE_ENV=production
DATABASE_URL=postgresql://user:pass@prod-db:5432/myapp

# .env.development
NODE_ENV=development
DATABASE_URL=postgresql://user:pass@localhost:5432/myapp_dev

# .env.uat
NODE_ENV=uat
DATABASE_URL=postgresql://user:pass@uat-db:5432/myapp_uat
Enter fullscreen mode Exit fullscreen mode

2. Configuration 

// src/config/configuration.ts
export default () => {
  const env = process.env.NODE_ENV || 'production';

  require('dotenv').config({ 
    path: env === 'production' ? '.env' : `.env.${env}` 
  });

  return {
    environment: env,
    port: parseInt(process.env.PORT, 10) || 3000,
    database: process.env.DATABASE_URL
  };
};
Enter fullscreen mode Exit fullscreen mode

3. App Module 

// src/app.module.ts
import { ConfigModule } from '@nestjs/config';
import configuration from './config/configuration';

@Module({
  imports: [
    ConfigModule.forRoot({
      load: [configuration],
      isGlobal: true,
    }),
  ],
})
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

4. package.json 

{
  "scripts": {
    "start:dev": "NODE_ENV=development nest start --watch",
    "start:uat": "NODE_ENV=uat nest start",
    "start:prod": "NODE_ENV=production node dist/main"
  }
}
Enter fullscreen mode Exit fullscreen mode

5. Usage 

// In controllers
import { ConfigService } from '@nestjs/config';

@Controller()
export class AppController {
  constructor(private config: ConfigService) {}

  @Get('health')
  getHealth() {
    return {
      environment: this.config.get('environment'),
      status: 'ok'
    };
  }
}
Enter fullscreen mode Exit fullscreen mode

🎮 Commands

Frontend 

npm run dev        # Development environment
npm run dev:uat    # UAT environment  
npm run build      # Production build
Enter fullscreen mode Exit fullscreen mode

Backend 

npm run start:dev  # Development environment
npm run start:uat  # UAT environment
npm run start:prod # Production environment
Enter fullscreen mode Exit fullscreen mode

🔍 Check Environment

Frontend 

console.log('Environment:', import.meta.env.MODE);
// Output: development, uat, or production
Enter fullscreen mode Exit fullscreen mode

Backend 

console.log('Environment:', process.env.NODE_ENV);
// Output: development, uat, or production
Enter fullscreen mode Exit fullscreen mode

🐳 Docker 

# Frontend Dockerfile
FROM node:18-alpine as builder
ARG BUILD_MODE=production
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build -- --mode ${BUILD_MODE}

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Enter fullscreen mode Exit fullscreen mode 
# Build commands
docker build -t myapp:dev --build-arg BUILD_MODE=development .
docker build -t myapp:uat --build-arg BUILD_MODE=uat .
docker build -t myapp:prod .
Enter fullscreen mode Exit fullscreen mode

✅ Best Practices

  1. Use VITE_ prefix for frontend environment variables
  2. Keep .env for production as default
  3. Never commit secrets - use .env.local for sensitive data
  4. Check console logs to verify which environment is running
  5. Use TypeScript for better development experience

🚨 Common Issues

  • Missing variables: Check file names (.env.development, not .env.dev)
  • Wrong environment: Check console output for confirmation
  • Docker not working: Make sure to pass BUILD_MODE argument

That's it! Simple environment configuration without complex setup.

Top comments (0)