Belajar Microfrontend - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Microfrontend! Series ini akan membawa kalian menguasai arsitektur microfrontend — pola memecah aplikasi frontend besar menjadi unit-unit independen yang bisa di-deploy, dimiliki tim, dan diintegrasikan saat runtime. Total ada 28 episode yang tersusun dalam enam fase, dari fondasi konsep sampai production readiness.

Tapi sebelum menulis remote pertama atau mengonfigurasi Module Federation, ada sejumlah skill dasar dan perangkat lunak yang wajib kalian siapkan. Mengapa prasyarat ini penting? Karena microfrontend bukan sekadar "satu framework tambahan" — ia membungkus hampir seluruh toolchain frontend: bundler, monorepo, package manager, routing, dan deployment. Kalau fondasi kalian lemah di salah satu lapisan, kelak akan sulit mendiagnosis masalah.

Episode 0 ini adalah peta jalan kalian: kita memastikan skill dasar terpenuhi, menyiapkan Node.js dan pnpm, lalu menyiapkan tooling Module Federation dan struktur monorepo yang akan dipakai sepanjang series. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dimiliki

#React & TypeScript yang Solid

Microfrontend paling banyak dipakai di ekosistem React, karena pola komponen dan hooks-nya cocok dipecah menjadi unit-unit independen. Kalian wajib nyaman dengan komponen, props, state, hooks seperti useState dan useEffect, serta routing (react-router). TypeScript penting karena salah satu daya tarik Module Federation 2.0 adalah type-safety lintas remote — jika kalian masih memakai any di mana-mana, manfaat itu akan hilang.

interface User {
  id: string
  name: string
  role: "admin" | "customer"
}
 
const sapa = (u: User): string => `Halo, ${u.name}`

#Dasar Bundler: Module, Entry, Build Output, Code Splitting

Microfrontend dibangun di atas bundler. Kalian harus paham apa itu module, entry point, build output, dan code splitting. Konsep ini menjadi pusat Module Federation: setiap remote di-bundle secara terpisah menjadi chunk yang dimuat host saat runtime.

node --version
npm --version

#npm/pnpm: Workspaces, Install, Scripts

Kita akan memakai monorepo untuk proyek storefront sepanjang series. Karena itu kalian wajib paham konsep workspaces — folder-folder apps/ dan packages/ dalam satu package.json root yang di-install bersama-sama. Kita memilih pnpm karena manajemen dependency dan workspace-nya yang bersih dan cepat.

#Git untuk Kolaborasi & Release

Microfrontend menyelesaikan masalah organisasi besar, dan Git adalah tulang punggung kolaborasi lintas tim. Kalian wajib paham branch, merge, dan PR. Di episode 14 dan 17 kita akan melihat bagaimana Git + release strategy bekerja pada level remote.

#Perangkat Software & Tools yang Disiapkan

#Node.js LTS dan pnpm

Pastikan memakai versi Node.js LTS (20.x atau 22.x). Install pnpm secara global atau via corepack:

npm install -g pnpm
pnpm --version

Versi pnpm yang stabil saat series ini ditulis adalah 9.x atau 10.x. pnpm bekerja dengan package.json root (workspace) plus file pnpm-workspace.yaml.

#Vite + React 19 + TypeScript 5.x

Kita memakai Vite sebagai bundler utama (DX terbaik di 2026), React 19 sebagai framework, dan TypeScript 5.x. Vite membawa ESM native yang sangat membantu saat kita membangun banyak remote sekaligus.

#Module Federation

Module Federation adalah inti series ini. Kita akan memakai paket-paket resmi:

• @module-federation/vite — plugin federasi untuk Vite.
• @module-federation/enhanced — versi enhanced untuk Webpack/Rspack.
• @module-federation/runtime — runtime-only untuk dynamic federation.

pnpm add -D @module-federation/vite
pnpm add @module-federation/runtime

#single-spa (Opsional)

single-spa kita bahas di episode 11 untuk pola polyglot (React + Vue + Angular berdampingan). Kalian boleh menyiapkannya nanti — bukan keharusan di episode 0.

#Chrome DevTools + Extension

Chrome DevTools adalah alat utama debugging. Ada extension resmi Module Federation (tersedia di Chrome Web Store) yang menampilkan remote yang termuat, shared dependencies, dan runtime manifest — kita pakai di episode 12 dan 24.

#Storybook (Opsional) untuk Design System

Di episode 8 kita membangun design system. Storybook membantu mendokumentasikan dan mem-preview komponen UI secara terisolasi. Opsional di episode 0, kita pasang saat tiba waktunya.

#Verifikasi Environment

Sebelum lanjut ke episode 1, jalankan verifikasi menyeluruh:

node -v
pnpm -v
git --version

Pastikan ketiganya berjalan tanpa error. Di episode 3 kita akan membuat monorepo storefront dan memverifikasi instalasi pertama Module Federation secara nyata.

#Penutup

Di episode 0 ini kalian sudah menyiapkan pijakan untuk seluruh series: memastikan skill React/TypeScript, bundler, package manager, dan Git; menyiapkan Node.js LTS, pnpm, Vite, serta tooling Module Federation.

Inti yang harus dibawa pulang:

• Microfrontend membungkus seluruh toolchain frontend: kuasai React, TypeScript, bundler, dan monorepo dulu.
• Node.js LTS + pnpm adalah fondasi install; Vite + React 19 + TypeScript 5.x adalah stack utama.
• Module Federation (Vite/enhanced/runtime) adalah inti series; single-spa dan Storybook adalah pelengkap.
• Chrome DevTools + extension Module Federation membantu debugging di episode-episode mendatang.
• Verifikasi terakhir: node -v, pnpm -v, git --version berjalan tanpa error.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan microfrontend — dari masalah frontend monolitik yang besar, ide yang dipinjam dari microservices, hingga alasan penting di 2026 dan contoh adopsi dari Spotify, Zalando, DAZN, dan Marriott. Pastikan environment kalian sudah siap, karena perjalanan Belajar Microfrontend baru saja dimulai!