Establishing Environment Configuration for Angular Projects

{
  "title": "Establishing Environment Configuration for Angular Projects",
  "description": "Learn how to set up environment configurations in Angular to streamline development, testing, and production deployments effectively.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "name": "Define Environment Interfaces",
      "description": "Create a TypeScript interface to enforce a consistent structure across all environment files, ensuring type safety and maintainability.",
      "implementation": [
        "export interface Environment {",
        "  production: boolean;",
        "  apiUrl: string;",
        "  // Add other environment-specific properties here",
        "}"
      ]
    },
    {
      "name": "Centralize Environment Configuration",
      "description": "Utilize Angular's environment files to manage environment-specific settings, such as API endpoints and feature flags, to facilitate seamless transitions between development, testing, and production environments.",
      "implementation": [
        "export const environment: Environment = {",
        "  production: false,",
        "  apiUrl: 'http://localhost:3000',",
        "  // Other development-specific settings",
        "};"
      ]
    },
    {
      "name": "Implement File Replacements",
      "description": "Configure Angular's build system to replace environment files based on the build target, ensuring the correct environment settings are applied during the build process.",
      "implementation": [
        "{",
        "  \"configurations\": {",
        "    \"production\": {",
        "      \"fileReplacements\": [",
        "        {",
        "          \"replace\": \"src/environments/environment.ts\",",
        "          \"with\": \"src/environments/environment.prod.ts\"",
        "        }",
        "      ]",
        "      // Other production-specific configurations",
        "    }",
        "  }",
        "}"
      ]
    },
    {
      "name": "Use Dependency Injection for Environment Variables",
      "description": "Avoid direct imports of environment files in components and services. Instead, provide environment variables through Angular's Dependency Injection system to enhance testability and maintainability.",
      "implementation": [
        "import { InjectionToken } from '@angular/core';",
        "",
        "export const API_URL = new InjectionToken<string>('apiUrl');",
        "",
        "import { environment } from '../environments/environment';",
        "",
        "providers: [",
        "  { provide: API_URL, useValue: environment.apiUrl }",
        "]"
      ]
    },
    {
      "name": "Secure Sensitive Information",
      "description": "Never store sensitive information, such as API keys or passwords, directly in environment files. Instead, use secure methods like server-side environment variables or secret management services to handle sensitive data.",
      "implementation": [
        "// Avoid storing sensitive data in environment files",
        "export const environment: Environment = {",
        "  production: true,",
        "  apiUrl: 'https://api.example.com',",
        "  // Other production-specific settings",
        "};"
      ]
    },
    {
      "name": "Automate Environment Variable Management",
      "description": "Integrate environment variable management into your CI/CD pipelines to streamline configuration changes across different environments, ensuring consistency and reducing manual errors.",
      "implementation": [
        "// Example CI/CD pipeline step to set environment variables",
        "steps:",
        "  - name: 'Set Environment Variables'",
        "    run: |",
        "      export API_URL='https://api.example.com'",
        "      // Set other environment variables as needed"
      ]
    }
  ]
}