Belajar Microfrontend - Arsitektur Studi Kasus: storefront (Tokoku)

#Pendahuluan

Setelah memahami konsep dan arsitektur di episode 2, sekarang kita mulai hands-on. Episode ini adalah landasan proyek yang akan kalian bangun dan perbaiki sepanjang series: storefront dengan nama brand "Tokoku" — aplikasi e-commerce UI yang dipecah menjadi shell (host) dan beberapa remote.

Mengapa episode ini penting? Karena microfrontend tidak bisa dipelajari hanya dari teori — kalian harus menjalankan beberapa aplikasi sekaligus, melihat mereka saling berkomunikasi, dan merasakan sendiri bagaimana satu remote bisa di-deploy tanpa menunggu yang lain.

#Proyek Praktis Sepanjang Series (storefront)

#Skenario User Flow

storefront adalah e-commerce UI dengan alur user: user browse catalog → buka detail produk → tambah cart → checkout → akses profil/account. Setiap bagian menjadi remote tersendiri:

#Struktur Monorepo pnpm

Kita memakai monorepo pnpm dengan dua area: apps/ untuk aplikasi (host + remote) dan packages/ untuk library bersama.

storefront/
  apps/
    shell/            # host
    catalog/          # remote
    product-detail/   # remote
    cart/             # remote
    checkout/         # remote
    account/          # remote
  packages/
    design-system/    # UI kit bersama (Button, Card, Input, Badge)
    shared-state/     # utas state (auth, cart summary)
  pnpm-workspace.yaml

#Membuat Monorepo pnpm

Mulai dengan inisialisasi workspace root:

mkdir storefront && cd storefront
pnpm init
pnpm add -D @module-federation/vite @module-federation/runtime typescript

File pnpm-workspace.yaml mendeklarasikan area workspace:

packages:
  - "apps/*"
  - "packages/*"

Setelah file ini dibuat, pnpm install di root akan mengenali semua aplikasi dan package sebagai satu workspace.

#Scaffold Satu Remote: catalog

Kita scaffold dulu satu remote sebagai contoh, misalnya catalog, dengan Vite + React + TypeScript:

pnpm create vite apps/catalog -- --template react-ts
cd apps/catalog
pnpm add @module-federation/vite -D

Ulangi scaffold ini untuk masing-masing remote. Kita akan mengonfigurasi Module Federation-nya secara nyata di episode 4. Untuk saat ini, pastikan setiap app bisa berjalan sendiri di portnya masing-masing.

#Alur Development

#Menjalankan Semua Apps

Dengan workspaces pnpm, kita bisa menjalankan semua aplikasi sekaligus. Setiap app dijalankan di port berbeda:

pnpm --filter storefront-shell dev   # port 5000
pnpm --filter storefront-catalog dev # port 5001
pnpm --filter storefront-cart dev    # port 5002

#Host Mengintrospeksi Remote via mf-manifest.json

Ketika nanti Module Federation aktif, host membaca manifest (mf-manifest.json) dari tiap remote untuk tahu apa saja yang diekspos. Kita akan melihat detail manifest ini di episode 9 dan 14. Untuk sekarang, pahami bahwa setiap remote punya identitas sendiri yang bisa diakses host lewat URL.

#Verifikasi Awal

Sebelum lanjut, pastikan:

pnpm install
pnpm --filter storefront-catalog dev

Jika halaman Vite boilerplate muncul di http://localhost:5001, workspace kalian berfungsi. Di episode 4 kita akan menghubungkan catalog sebagai remote ke shell dengan Module Federation.

#Penutup

Pada episode 3 ini, kalian sudah membangun kerangka monorepo storefront (Tokoku) dan me-scaffold remote pertama.

Inti yang harus dibawa pulang:

• storefront punya satu host (shell) + enam remote (catalog, product-detail, cart, checkout, account) + dua packages (design-system, shared-state).
• Monorepo pnpm dengan area apps/ dan packages/, dideklarasikan lewat pnpm-workspace.yaml.
• Setiap app berjalan di port sendiri; host nanti mengintrospeksi remote via manifest.
• Mulai dari satu remote dulu, lalu tiru untuk yang lain.

Di episode 4 selanjutnya, kita akan mengonfigurasi Module Federation (Vite) pertama — instalasi, konfigurasi host shell, konfigurasi remote catalog, dan verifikasi pertama bahwa host bisa memuat remote dari port lain. Pastikan workspace kalian siap!