Belajar Angular - Configuration & Environment

#Pendahuluan

Aplikasi yang sama berjalan di lingkungan berbeda: development, staging, dan production. URL API, feature flags, dan pengaturan lain harus berubah sesuai lingkungan tanpa mengubah kode.

Episode 11 membahas environment files dan build configurations, pengaturan Angular CLI dan build targets, pengelolaan feature flags dan API endpoint, serta praktik aman untuk secrets dan production settings. Konfigurasi yang baik membuat perpindahan antar lingkungan menjadi mulus.

#Environment Files dan Build Configurations

#Struktur Environment Files

Sejak Angular 15, project memiliki dua file environment di src/environments:

src/environments/environment.ts
src/environments/environment.development.ts

environment.ts dipakai untuk production, sementara environment.development.ts untuk development. Isi file dengan nilai spesifik lingkungan:

environment.ts

export const environment = {
  production: true,
  apiUrl: 'https://api.toko-online.example.com',
  namaAplikasi: 'Toko Online',
};

File environment hanya berisi nilai yang aman untuk publik, seperti URL API dan nama aplikasi. Nilai yang sensitif tidak boleh berada di sini karena file ini ikut masuk ke bundle.

#Build Configurations di angular.json

Setiap environment dipetakan lewat fileReplacements di angular.json. Build production mengganti file environment dengan versi production.

{
  "production": {
    "budgets": [],
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.development.ts"
      }
    ]
  }
}

Saat ng build --configuration=production dijalankan, Angular menukar file environment sesuai mapping. Kalian juga bisa menambahkan konfigurasi custom, misalnya staging, dengan ng build --configuration=staging.

#Angular CLI Configuration dan Build Targets

#Menjalankan Konfigurasi Tertentu

ng build --configuration=production
ng build --configuration=staging --output-path=dist/staging

--output-path memindahkan hasil build ke folder berbeda agar staging dan production tidak tertimpa. Untuk development, ng serve memakai konfigurasi development secara otomatis.

#Build Targets dan Options

Setiap konfigurasi bisa mengatur target seperti output-hashing, source-map, optimization, dan budgets. Contoh production yang mengaktifkan optimasi:

{
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "buildOptimizer": true
}

outputHashing: 'all' memberi nama file dengan hash konten sehingga browser menyimpan cache dengan benar dan tidak menampilkan versi lama setelah deploy.

#Feature Flag, API Endpoint, dan Runtime Config

#Feature Flags

Feature flag mengontrol fitur mana yang aktif di lingkungan tertentu. Contoh sederhana dengan environment:

Feature flag berbasis environment

export const environment = {
  production: true,
  fitur: {
    checkout: true,
    promo: true,
    notifikasi: false,
  },
};

Gunakan flag di komponen: if (environment.fitur.checkout). Untuk kontrol tanpa redeploy, tarik konfigurasi runtime dari server — pola yang disebut runtime config.

#Runtime Config

Alih-alih meng-hardcode di environment, aplikasi memuat konfigurasi dari endpoint saat startup:

Memuat runtime config

export interface RuntimeConfig {
  apiUrl: string;
  fitur: Record<string, boolean>;
}
 
export async function muatConfig(): Promise<RuntimeConfig> {
  const res = await fetch('/assets/config.json');
  if (!res.ok) {
    throw new Error('Gagal memuat konfigurasi runtime');
  }
  return res.json();
}

muatConfig mengambil config.json dari folder assets. Admin bisa mengubah API endpoint atau menyalakan fitur tanpa membangun ulang aplikasi — sangat berguna untuk kendali flag di production.

#Secrets Management dan Production Settings

#Jangan Masukkan Secret ke Bundle

Kode di frontend bisa dibaca siapa saja. API key, token, dan credential tidak pernah boleh disimpan di environment files atau NEXT_PUBLIC_*-style variables, karena semuanya ikut ter-bundle. Secret harus dipakai di backend atau disuntikkan lewat server-side rendering.

#Proxy Dev Server

Untuk development, CLI menyediakan proxy agar request API tidak kena CORS:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true
  }
}

Jalankan dengan ng serve --proxy-config=proxy.conf.json. Request /api/... diteruskan ke localhost:8080 — tanpa membocorkan URL internal ke frontend production.

#Production Settings

Untuk production: aktifkan optimasi dan hashing, nonaktifkan source map, setel bundle budgets, dan audit dependencies dengan npm audit. Secrets untuk pipeline (misalnya token deploy) dikelola di sistem CI/CD — bukan di dalam repository.

#Penutup

Inti yang harus dibawa pulang:

• Environment files memisahkan nilai per lingkungan; fileReplacements menukarnya saat build.
• Build configurations di angular.json mengatur target seperti optimasi dan hashing.
• Feature flags memutuskan fitur aktif tanpa mengubah perilaku kode utama.
• Runtime config memuat pengaturan dari server sehingga tidak perlu redeploy.
• Secret tidak boleh masuk ke bundle frontend; gunakan backend atau SSR.
• Audit dependencies dan setel budgets sebagai bagian dari production readiness.

Di episode 12 selanjutnya kita akan membahas security dan auth — pola autentikasi dengan JWT, melindungi rute dengan auth guards, penyimpanan token dan HTTP calls yang aman, serta role-based authorization dan permission checks.