Belajar Microfrontend - Setup Module Federation (Vite) Pertama

#Pendahuluan

Setelah membangun kerangka monorepo storefront di episode 3, kini saatnya momen paling membahagiakan sekaligus menentukan: menghubungkan host dan remote pertama dengan Module Federation. Di episode ini kita akan mengonfigurasi shell (host) dan catalog (remote) sehingga host bisa memuat halaman katalog yang disajikan oleh aplikasi di port lain.

Mengapa episode ini jadi tonggak? Karena di sinilah kalian melihat microfrontend "menyala" — sebuah aplikasi di port 5000 menampilkan UI yang sebenarnya dirender dan di-bundle oleh aplikasi di port 5001, secara runtime. Begitu kalian melihatnya, seluruh konsep episode 2 menjadi konkret.

#Instalasi

Mulai dengan menginstall plugin Module Federation untuk Vite di kedua app:

pnpm --filter storefront-shell add -D @module-federation/vite
pnpm --filter storefront-catalog add -D @module-federation/vite

@module-federation/vite adalah plugin federasi resmi yang menyatukan federasi dengan Vite. Kita juga memastikan React terinstall di keduanya, nanti diberi opsi singleton: true agar hanya satu React yang berjalan di halaman.

#Konfigurasi Host (shell)

Buka apps/shell/vite.config.ts dan tambahkan plugin federation:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { federation } from '@module-federation/vite'
 
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'shell',
      filename: 'remoteEntry.js',
      exposes: {},
      remotes: {
        catalog: 'catalog@http://localhost:5001/mf-manifest.json',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
})

Poin penting:

#Konfigurasi Remote (catalog)

Buka apps/catalog/vite.config.ts. Remote berbeda dari host: ia mengekspos module, bukan menerima.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { federation } from '@module-federation/vite'
 
export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'catalog',
      filename: 'remoteEntry.js',
      exposes: {
        './CatalogApp': './src/CatalogApp.tsx',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
})

Kunci perbedaan dengan host:

• exposes berisi './CatalogApp': './src/CatalogApp.tsx' — module yang boleh di-load dari luar.
• name: 'catalog' harus cocok dengan referensi di host (catalog@...).

#Menulis Komponen yang Diekspos

./src/CatalogApp.tsx adalah komponen React sederhana yang menampilkan daftar produk:

export default function CatalogApp() {
  return (
    <section>
      <h2>Katalog Produk Tokoku</h2>
      <ul>
        <li>MacBook Air M4 - Rp 18.999.000</li>
        <li>Logitech MX Master 3S - Rp 1.249.000</li>
      </ul>
    </section>
  )
}

#Memuat Remote di Host

Di shell, kita memuat komponen remote dengan React.lazy + Suspense (detail lazy loading kita bahas di episode 6 dan 12):

import { lazy, Suspense } from 'react'
 
const CatalogApp = lazy(() => import('catalog/CatalogApp'))
 
export default function App() {
  return (
    <main>
      <h1>Tokoku - Shell</h1>
      <Suspense fallback={<p>Memuat katalog...</p>}>
        <CatalogApp />
      </Suspense>
    </main>
  )
}

import('catalog/CatalogApp') bukan import file biasa — ia memuat module yang di-resolve lewat Module Federation ke aplikasi catalog di port 5001.

#Verifikasi Pertama

#Jalankan Kedua App

pnpm --filter storefront-shell dev
pnpm --filter storefront-catalog dev

Host di http://localhost:5000, remote di http://localhost:5001.

#Periksa di DevTools

1. Buka http://localhost:5000 — kalian harus melihat halaman yang menampilkan komponen katalog.
2. Buka DevTools → Network.
3. Cari mf-manifest.json dan chunk module remote yang ter-load dari port 5001 — bukti bahwa host memuat remote secara runtime, bukan menyalin kodenya saat build.

#Penutup

Pada episode 4 ini, kalian telah mengonfigurasi dan memverifikasi Module Federation pertama: host shell memuat remote catalog dari port berbeda secara runtime.

Inti yang harus dibawa pulang:

• @module-federation/vite menyatukan federasi ke Vite.
• Host mendeklarasikan remotes (apa yang dimuat); remote mendeklarasikan exposes (apa yang disajikan).
• shared: ['react', 'react-dom'] mencegah duplikasi library.
• Remote dimuat via React.lazy + Suspense; verifikasi lewat Network mf-manifest.json.

Di episode 5 selanjutnya, kita akan membahas shared dependencies & versioning — mengapa singleton: true wajib untuk React, requiredVersion untuk memaksa versi, dts untuk type-safe, serta auto-singleton & tree-shaking di Module Federation 2.0. Pastikan kedua app kalian berjalan!