Setting Up Environment-Specific Configurations in Angular

{
  "title": "Setting Up Environment-Specific Configurations in Angular",
  "description": "Learn how to manage different configurations for development, testing, and production environments in Angular.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "name": "Define Environment Files",
      "description": "Create separate environment files for each environment to manage specific configurations.",
      "code": [
        {
          "filename": "src/environments/environment.ts",
          "content": "export const environment = {\n  production: false,\n  apiUrl: 'https://dev-api.example.com',\n  featureXEnabled: true,\n};"
        },
        {
          "filename": "src/environments/environment.prod.ts",
          "content": "export const environment = {\n  production: true,\n  apiUrl: 'https://api.example.com',\n  featureXEnabled: false,\n};"
        }
      ]
    },
    {
      "name": "Configure Angular CLI for Environment Files",
      "description": "Set up Angular CLI to replace environment files based on the build configuration.",
      "code": [
        {
          "filename": "angular.json",
          "content": "{\n  \"projects\": {\n    \"your-project-name\": {\n      \"architect\": {\n        \"build\": {\n          \"configurations\": {\n            \"production\": {\n              \"fileReplacements\": [\n                {\n                  \"replace\": \"src/environments/environment.ts\",\n                  \"with\": \"src/environments/environment.prod.ts\"\n                }\n              ]\n            }\n          }\n        }\n      }\n    }\n  }\n}"
        }
      ]
    },
    {
      "name": "Access Environment Variables in Code",
      "description": "Import and use environment variables in your application components and services.",
      "code": [
        {
          "filename": "src/app/app.component.ts",
          "content": "import { Component } from '@angular/core';\nimport { environment } from '../environments/environment';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n  title = 'angular-app';\n  apiUrl = environment.apiUrl;\n  featureXEnabled = environment.featureXEnabled;\n}"
        }
      ]
    },
    {
      "name": "Avoid Hardcoding Sensitive Information",
      "description": "Do not store sensitive data like API keys directly in environment files. Use secure methods to inject them at build or runtime.",
      "code": [
        {
          "filename": "src/environments/environment.ts",
          "content": "export const environment = {\n  production: false,\n  apiUrl: process.env.API_URL,\n  featureXEnabled: true,\n};"
        },
        {
          "filename": "generate-env.js",
          "content": "const fs = require('fs');\nconst dotenv = require('dotenv');\n\ndotenv.config();\n\nconst envConfig = `export const environment = {\n  production: ${process.env.PRODUCTION === 'true'},\n  apiUrl: '${process.env.API_URL}',\n  featureXEnabled: ${process.env.FEATURE_X_ENABLED === 'true'},\n};`;\n\nfs.writeFileSync('src/environments/environment.ts', envConfig);"
        }
      ]
    },
    {
      "name": "Use EnvironmentService for Configuration Management",
      "description": "Create a service to manage environment configurations, enhancing flexibility and maintainability.",
      "code": [
        {
          "filename": "src/app/services/environment.service.ts",
          "content": "import { Injectable } from '@angular/core';\nimport { environment } from '../../environments/environment';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class EnvironmentService {\n  get apiUrl(): string {\n    return environment.apiUrl;\n  }\n\n  get isProduction(): boolean {\n    return environment.production;\n  }\n\n  get featureXEnabled(): boolean {\n    return environment.featureXEnabled;\n  }\n}"
        },
        {
          "filename": "src/app/app.component.ts",
          "content": "import { Component } from '@angular/core';\nimport { EnvironmentService } from './services/environment.service';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n  title = 'angular-app';\n\n  constructor(private envService: EnvironmentService) {\n    console.log('API URL:', this.envService.apiUrl);\n    console.log('Production Mode:', this.envService.isProduction);\n    console.log('Feature X Enabled:', this.envService.featureXEnabled);\n  }\n}"
        }
      ]
    }
  ]
}