ReactJS #

Vite + ReactJS dikenal sebagai kombinasi frontend modern yang sangat cepat untuk development. Startup time instan, HMR (Hot Module Replacement) agresif, dan konfigurasi minimal membuat DX (Developer Experience) terasa jauh lebih ringan dibandingkan setup frontend generasi lama.

Namun, ketika aplikasi mulai dikerjakan secara tim, lintas OS (macOS, Linux, Windows), dan butuh konsistensi environment, menjalankan Vite langsung di mesin lokal sering jadi sumber masalah:

• Versi Node.js berbeda-beda
• Perilaku file watcher tidak konsisten
• Dependency global bocor
• Setup environment baru memakan waktu

Di sinilah Docker untuk local development menjadi masuk akal — bukan untuk performance, tapi untuk konsistensi dan reproduktabilitas.

Artikel ini membahas secara mendetail dan rasional bagaimana menyusun:

• Dockerfile untuk aplikasi Vite + ReactJS (dev mode)
• docker-compose.yml sebagai orkestrator local development

Fokus utama: development, bukan production.

Karakteristik Vite #

Sebelum menulis Dockerfile, penting memahami sifat Vite:

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

Implikasinya di Docker:

• Dev server harus bind ke 0.0.0.0
• Port harus di-expose secara eksplisit
• Volume mount wajib agar HMR bekerja
• Node image sebaiknya slim, tapi tidak terlalu minimal

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 ada agar dependency reproducible.

Dockerfile untuk Vite + ReactJS #

FROM node:20-alpine

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm install

COPY . .

EXPOSE 5173

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

Penjelasan Baris per Baris #

FROM node:20-alpine #

• Node LTS modern
• Alpine cukup ringan untuk dev
• Tidak disarankan pakai scratch atau distroless untuk dev

WORKDIR /app #

• Direktori kerja konsisten
• Menghindari path hardcode

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

• Memanfaatkan layer caching
• Dependency tidak di-install ulang setiap perubahan kode

RUN npm install #

• Untuk local dev, tidak perlu --production
• Dev dependency (Vite, ESLint) tetap dibutuhkan

COPY . . #

• Source code masuk setelah dependency

EXPOSE 5173 #

• Port default Vite
• Dokumentatif, bukan security control

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-react-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 #

• Image dibangun dari Dockerfile lokal
• Konsisten antar developer

ports #

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

volumes #

- .:/app
- /app/node_modules

Makna penting:

• Source code di-mount agar HMR bekerja
• node_modules diisolasi di container, tidak tercampur host

Ini adalah pola paling aman untuk frontend Docker dev.

environment #

• Menandai mode development
• Berguna untuk conditional config

command #

• Override CMD Dockerfile
• Memastikan dev server selalu pakai --host

Workflow Development #

docker compose up --build

Lalu:

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

Stop:

Ctrl + C
docker compose down

Kapan Setup Ini Tepat Digunakan? #

Cocok jika:

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

Tidak wajib jika:

• Solo developer
• Project sangat kecil

Penutup #

Vite + ReactJS sudah cepat secara default. Docker tidak membuatnya lebih cepat, tapi membuatnya:

• Lebih konsisten
• Lebih mudah direproduksi
• Lebih aman untuk kerja tim

Gunakan Docker di frontend secukupnya dan dengan sadar, bukan karena tren.

Jika digunakan dengan benar, setup ini memberi DX yang stabil tanpa mengorbankan kenyamanan Vite.