Angular #

Angular dikenal sebagai framework frontend yang opinionated, lengkap, dan enterprise‑ready. Dalam beberapa tahun terakhir, Angular mulai mengadopsi Vite sebagai dev server (menggantikan Webpack) untuk meningkatkan startup time dan HMR.

Kombinasi Vite + Angular menghadirkan DX yang jauh lebih cepat, namun tetap membawa tantangan klasik di level environment development:

• Versi Node.js dan npm berbeda antar developer
• Perilaku file watcher tidak konsisten lintas OS
• Setup Angular CLI dan dependency global
• Onboarding developer baru memakan waktu

Docker di sini bukan alat optimasi performa, melainkan alat untuk standarisasi environment lokal.

Artikel ini membahas secara mendetail dan rinci:

• Dockerfile untuk aplikasi Vite + Angular (development mode)
• Docker Compose sebagai orkestrator local development

Fokus artikel ini adalah local development, bukan production.

Karakteristik Vite + Angular #

Beberapa karakteristik penting yang memengaruhi konfigurasi Docker:

1. Dev server Vite berbasis native ESM
2. HMR via WebSocket
3. Angular cukup sensitif terhadap file watcher
4. Default bind ke localhost

Implikasi teknis di Docker:

• Dev server harus bind ke 0.0.0.0
• Volume mount wajib agar HMR bekerja
• Port harus di‑expose eksplisit
• Image Node sebaiknya modern dan stabil

Struktur Project #

Struktur minimal yang diasumsikan:

.
├── Dockerfile
├── docker-compose.yml
├── angular.json
├── package.json
├── package-lock.json / yarn.lock / pnpm-lock.yaml
├── vite.config.ts
├── index.html
└── src/

Lock file wajib ada agar dependency reproducible.

Dockerfile untuk Vite + Angular #

FROM node:20-alpine

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm install

COPY . .

EXPOSE 5173

CMD ["npm", "run", "start", "--", "--host"]

Penjelasan Dockerfile #

FROM node:20-alpine #

• Node LTS modern
• Alpine cukup ringan untuk local dev
• Hindari image terlalu minimal untuk debugging Angular

WORKDIR /app #

• Menjaga path kerja konsisten
• Menghindari konfigurasi absolut

COPY package.json package-lock.json ./ #

• Memaksimalkan layer caching
• Dependency tidak di‑install ulang setiap perubahan kode

RUN npm install #

• Menginstall seluruh dependency Angular dan Vite
• Dev dependency wajib untuk local dev

COPY . . #

• Source code dimasukkan setelah dependency

EXPOSE 5173 #

• Port default Vite
• Bersifat dokumentatif

CMD ["npm", "run", "start", "--", "--host"] #

• --host membuat dev server bind ke 0.0.0.0
• Tanpa ini, aplikasi tidak bisa diakses dari host

Docker Compose #

version: "3.9"

services:
  web:
    container_name: vite-angular-dev
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "5173:5173"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development
    command: npm run start -- --host

Penjelasan docker-compose.yml #

build #

• Image dibangun dari Dockerfile lokal
• Environment konsisten di semua mesin developer

ports #

• Mapping port container ke host
• Akses aplikasi via http://localhost:5173

volumes #

- .:/app
- /app/node_modules

Makna penting:

• Source code di‑mount → HMR berjalan normal
• node_modules tetap di container

Ini adalah best practice utama untuk frontend Docker dev.

environment #

• Menandai mode development
• Digunakan untuk conditional config

command #

• Override CMD Dockerfile
• Menjamin --host selalu aktif

Workflow Development #

Menjalankan aplikasi:

docker compose up --build

Aktivitas sehari‑hari:

• Edit file di src/
• Browser auto reload via HMR
• Tidak perlu restart container

Menghentikan:

Ctrl + C
docker compose down

Kapan Setup Ini Tepat Digunakan? #

Cocok jika:

• Tim lintas OS
• Project Angular skala menengah–besar
• Onboarding developer sering

Kurang perlu jika:

• Solo developer
• Prototype sangat kecil

Anti‑Pattern #

❌ Menjalankan build production di Docker dev ❌ Tidak pakai volume → HMR mati ❌ Mencampur node_modules host dan container ❌ Menggunakan Node versi lama

Docker untuk Angular bukan kewajiban, tapi alat standarisasi.

Best Practice #

1. Gunakan Docker khusus dev server, bukan build production
2. Selalu pakai volume mount
3. Pastikan --host aktif
4. Jangan commit node_modules
5. Gunakan .dockerignore

Contoh .dockerignore:

node_modules
.git
dist
.env

Penutup #

Vite membawa Angular ke level DX yang lebih modern. Docker tidak membuat Angular lebih cepat, tapi membuat environment development:

• Konsisten
• Mudah direproduksi
• Stabil untuk kerja tim

Gunakan Docker secara proporsional. Jika tepat, Angular + Vite tetap terasa ringan tanpa kehilangan kekuatan enterprise‑nya.