VueJS #

Vite + Vue.js adalah pasangan first-class citizen. Vite lahir dari ekosistem Vue dan menawarkan startup time nyaris instan, HMR super cepat, serta konfigurasi yang minim. Untuk development lokal, pengalaman ini terasa sangat menyenangkan — selama environment-nya konsisten.

Masalah mulai muncul ketika:

• Tim memakai OS berbeda
• Versi Node.js tidak seragam
• File watcher bertingkah aneh
• Setup project baru memakan waktu

Di titik ini, Docker untuk local development menjadi alat penyetara, bukan akselerator performa.

Artikel ini membahas secara mendetail dan rasional:

• Dockerfile untuk aplikasi Vite + Vue.js (dev mode)
• Docker Compose sebagai orkestrator environment lokal

Fokus utama: development, bukan production.

Karakteristik Vite + Vue #

Sebelum menulis Dockerfile, penting memahami sifat Vite:

1. Dev server berbasis native ESM
2. HMR melalui WebSocket
3. Sangat bergantung pada file system watcher
4. Default bind ke localhost

Implikasinya 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 ringan tapi tidak ekstrem

Struktur Project #

Struktur minimal yang diasumsikan:

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

Lock file wajib agar dependency reproducible.

Dockerfile untuk Vite + Vue.js #

FROM node:20-alpine

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm install

COPY . .

EXPOSE 5173

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

Penjelasan Dockerfile #

FROM node:20-alpine #

• Node LTS modern
• Alpine cukup ringan untuk development
• Tidak disarankan image ultra-minimal untuk dev

WORKDIR /app #

• Direktori kerja konsisten
• Menghindari path absolut berantakan

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

• Mengoptimalkan layer caching
• Dependency tidak di-install ulang saat kode berubah

RUN npm install #

• Menginstall dev dependency (Vite, Vue, plugin)
• Jangan gunakan --production untuk dev

COPY . . #

• Source code baru dimasukkan setelah dependency

EXPOSE 5173 #

• Port default Vite
• Bersifat dokumentatif

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

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

Docker Compose #

version: "3.9"

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

Penjelasan docker-compose.yml #

build #

• Build image dari Dockerfile lokal
• Konsisten di semua mesin developer

ports #

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

volumes #

- .:/app
- /app/node_modules

Makna penting:

• Source code di-mount → HMR berjalan
• node_modules tetap di container

Ini best practice wajib untuk frontend Docker dev.

environment #

• Menandai mode development
• Bisa dipakai untuk conditional config

command #

• Override CMD Dockerfile
• Memastikan --host selalu aktif

Workflow Development #

Menjalankan project:

docker compose up --build

Lalu:

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

Menghentikan:

Ctrl + C
docker compose down

Kapan Setup Ini Tepat Digunakan? #

Cocok jika:

• Tim lintas OS
• Onboarding developer sering
• Banyak frontend project paralel

Kurang perlu jika:

• Solo developer
• Project sangat kecil

Anti-Pattern #

• ❌ Menjalankan vite build di Docker dev
• ❌ Tidak pakai volume → HMR mati
• ❌ Node versi lama
• ❌ Mencampur node_modules host & container

Docker untuk frontend bukan keharusan, tapi alat.

Best Practice #

1. Gunakan Docker hanya untuk dev server, bukan build
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 + Vue.js sudah cepat dan ringan. Docker tidak membuatnya lebih cepat, tapi membuat environment:

• Konsisten
• Mudah direproduksi
• Aman untuk kerja tim

Gunakan Docker dengan sadar. Jika tepat, DX tetap enak tanpa kehilangan keunggulan Vite.