Kenapa Dev Container penting untuk DX SvelteKit?

Dengan Dev Container, seluruh tim bekerja di lingkungan yang konsisten: versi Node, dependensi global, dan perilaku tooling tidak lagi bergantung pada mesin masing-masing. Dalam konteks SvelteKit, fokus utama adalah memastikan lint otomatis berjalan sebelum commit, test cepat bisa dieksekusi tanpa setup panjang, dan preview lokal tetap terhubung ke hot reload saat pengembangan fitur.

Langsung ke inti: bangun .devcontainer yang meng-install dependensi, caching node_modules, menjalankan lint/test dari script npm, dan menyediakan preview via npm run dev yang bisa diakses dari host.

Struktur Dev Container yang praktis

Gunakan folder .devcontainer dengan dua file utama: Dockerfile untuk environment kustom dan devcontainer.json untuk konfigurasi editor.

Dockerfile minimal

FROM node:20-alpine
WORKDIR /workspace
COPY package*.json ./
RUN npm install --legacy-peer-deps

Copy awal hanya package.json agar layer install bisa di-cache. Selain itu, tambahkan npm install lagi jika pnpm atau yarn digunakan; tinggal ganti perintah sesuai package manager tim.

.devcontainer/devcontainer.json

{
  "name": "SvelteKit DX",
  "build": { "dockerfile": "Dockerfile" },
  "customizations": {
    "vscode": {
      "extensions": [
        "svelte.svelte-vscode",
        "dbaeumer.vscode-eslint"
      ]
    }
  },
  "forwardPorts": [4173],
  "postCreateCommand": "npm run setup:hooks",
  "mounts": [
    "source=${localWorkspaceFolder}/.npm,target=/workspace/.npm,type=volume",
    "source=${localWorkspaceFolder}/node_modules,target=/workspace/node_modules,type=volume"
  ]
}

Mount volume khusus untuk .npm dan node_modules menjaga cache antar sesi tanpa memaksa npm rebuild di setiap container start. postCreateCommand menjalankan setup hooks linting; pastikan script tersebut idempotent.

Lint otomatis, test cepat, dan preview lokal

Basisnya adalah skrip npm terotomasi di package.json yang dipanggil dari container dan commit hooks.

{
  "scripts": {
    "lint": "eslint src --ext .js,.ts,.svelte",
    "test": "npm run lint && vitest run",
    "preview": "svelte-kit dev --host 0.0.0.0 --port 4173",
    "setup:hooks": "husky install && lint-staged"
  },
  "lint-staged": {
    "*.{js,ts,svelte}": ["npm run lint"]
  }
}

Dengan Husky mengaktifkan pre-commit hook, lint-staged memastikan hanya file yang berubah diperiksa. Pastikan npm run lint dan npm run test dapat berjalan cepat dengan membatasi scope dan memanfaatkan cache module.

Untuk preview, jalankan npm run preview di terminal Dev Container. Karena port 4173 diforward, hot reload tetap berfungsi dari browser host.

Caching dependensi dan troubleshooting build image

Masalah umum:

  • Build Docker sering gagal akibat key dependencies yang berubah. Solusi: pisahkan npm install ke layer terpisah dan gunakan package-lock.json yang konsisten. Gunakan docker build --no-cache hanya saat upgrade besar.
  • Cache rusak jika node_modules pada host tidak cocok. Gunakan volume tersendiri dan pastikan tidak ada file lock di workspace yang mengunci versi.
  • Hot reload tidak merespons perubahan karena mount tidak mengizinkan watch. Pastikan port binding aktif dan VS Code Dev Container menyertakan --host 0.0.0.0.

Debugging image: jalankan docker build manual dengan argumen --progress=plain untuk melihat step mana gagal. Untuk caching, tinjau volume dengan docker volume ls dan hapus node_modules jika bermasalah.

Praktik tim untuk konsistensi lint/test/preview

  1. Dokumentasikan perintah Dev Container di README. Cantumkan cara memulai linting, testing, dan preview dari command palette VS Code.
  2. Integrasi CI: pastikan pipeline CI menjalankan script yang sama npm run lint dan npm run test agar dev container mencerminkan realita build.
  3. Periksa hook secara periodik agar Husky tidak ter-disable saat install ulang. Tambahan script npm run setup:hooks menjamin hook di-reinstall di setiap container baru.
  4. Simpan konfigurasi lint/stylus di repo (misalnya .eslintrc.cjs) dan jangan override lokal tanpa konfirmasi tim.
Referensi resmi: Docs Dev Containers dan Dokumentasi SvelteKit.

Dengan pendekatan ini, setiap anggota tim mendapatkan lint otomatis, test cepat, dan preview lokal stabil sebelum push, sehingga kualitas kode tetap konsisten sekaligus meminimalkan friction dalam pengembangan fitur.