Svelte #

Vite + Svelte adalah kombinasi frontend yang sangat ringan dan cepat. Svelte memindahkan banyak kompleksitas ke compile time, sementara Vite menyediakan dev server modern dengan startup instan dan HMR agresif.

Dalam praktik tim, tantangan biasanya bukan di framework-nya, tetapi di environment development:

• Versi Node.js tidak seragam
• File watcher berbeda perilaku antar OS
• Setup project baru lama
• Dependency global bocor ke sistem

Di sinilah Docker untuk local development berperan — bukan untuk membuat Vite + Svelte lebih cepat, tapi untuk menyamakan kondisi kerja semua developer.

Artikel ini membahas secara mendetail, rasional, dan praktis:

• Dockerfile untuk aplikasi Vite + Svelte (dev mode)
• Docker Compose untuk menjalankan development environment lokal

Fokus utama: local development, bukan production.

Karakteristik Vite + Svelte #

Beberapa sifat penting Vite + Svelte yang berdampak langsung ke Docker:

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

Implikasi teknis:

• Dev server harus bind ke 0.0.0.0
• Volume mount wajib agar HMR bekerja
• Port harus di-expose secara eksplisit
• Image Node cukup ringan, tapi jangan terlalu minimal

Struktur Project #

Struktur minimal project:

.
├── 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 + Svelte #

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
• Hindari image ultra-minimal untuk dev (debugging sulit)

WORKDIR /app #

• Direktori kerja konsisten
• Menghindari path absolut tidak perlu

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

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

RUN npm install #

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

COPY . . #

• Source code dimasukkan setelah dependency

EXPOSE 5173 #

• Port default Vite
• Bersifat dokumentatif

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

• --host membuat Vite 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-svelte-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
• Environment konsisten di semua mesin

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 adalah best practice utama untuk frontend Docker dev.

environment #

• Menandai mode development
• Berguna 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
• ❌ Mencampur node_modules host & container
• ❌ Menggunakan Node versi lama

Docker untuk frontend bukan kewajiban, tapi alat.

Best Practice #

1. Gunakan Docker hanya untuk dev server
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 + Svelte sudah ringan dan cepat secara default. Docker tidak membuatnya lebih cepat, tapi membuat development environment:

• Konsisten
• Mudah direproduksi
• Aman untuk kerja tim

Gunakan Docker secara sadar dan proporsional. Jika tepat, DX tetap ringan tanpa mengorbankan keunggulan Svelte.