introduction-to-micro-frontends-project

Companion code for the book:

An Opinionated Introduction to Micro-frontends

Architecture

This project demonstrates a custom micro-frontends approach without import maps. Each micro-frontend is an independently built and served JavaScript module that the container-app loads dynamically at runtime via <script type="module"> injection. A shared postbox library handles cross-module pub/sub communication.

See ARCHITECTURE.md for a full technical breakdown.

Project dependency graph

Getting started

Install dependencies

Install from the root (NX monorepo — one install covers all projects):

npm install

Then install each project's own dependencies:

cd postbox && npm install
cd ../root-styles && npm install
cd ../container-app && npm install
cd ../microfrontend1 && npm install
cd ../microfrontend2 && npm install
cd ../microfrontend3 && npm install
cd ../mock-api && npm install

Build postbox first

postbox is a local file: dependency — it must be built before any other package:

cd postbox && npm run build

Development

From the root directory:

npm run serve

NX runs all watch-and-run scripts in parallel, first building any stale dependencies in the correct order. Each package's watch-and-run concurrently runs a Vite build watcher and a Vite dev server. The container-app auto-reloads any micro-frontend whose output changes.

Building

# Build all projects (respects dependency order, uses cache)
npm run build

# Build only projects affected by your changes
npm run affected:build

# Build a single project
npx nx run microfrontend1:build

NX task graph

npm run graph

Opens the interactive NX project graph in your browser. Unchanged projects are restored from the local build cache — no redundant rebuilds.

Tech stack

• NX — monorepo task orchestration and build caching
• Vite — build tool for all projects
• TypeScript — used across all projects
• Tailwind CSS v4 — shared styles via root-styles
• postbox — custom pub/sub library (local package)
• concurrently — parallel watch + serve within each micro-frontend