Microfrontend Architecture Demo (Vue + React + Angular)

I came across the concept of Microfrontends during my journey learning about code bundlers. While skimming webpack’s documentation, I stumbled upon a section titled “Module Federation”. I googled it, got very excited about discovering a new architectural pattern, and — not gonna lie — something about combining multiple frameworks in the same app sounded really interesting.

I read a couple of articles that helped me grasp the general idea:

• https://micro-frontends.org
• https://www.freecodecamp.org/news/complete-micro-frontends-guide
• https://aws.amazon.com/blogs/compute/server-side-rendering-micro-frontends-the-architecture

Then I went back to webpack’s documentation to understand Module Federation in more depth:

• https://module-federation.io/index.html
• https://youtu.be/5IG4UmULyoA
• https://youtu.be/AZqRjdqa_D8

This tutorial was helpful as well:

• https://youtu.be/g6torucTdbc

After that, I wanted to build a simple demo that lets me actually experience how some of these concepts work in practice, such as:

• What the Webpack runtime actually does
• How Module Federation works at runtime
• How remotes are loaded dynamically
• How HMR behaves in a federated setup
• How to share state, not framework abstractions

So I built a small demo app that connects three different applications together, all sharing a single state.
The UIs are intentionally simple — the main goal here was to focus on understanding the “magic and unicorns” 🦄 happening inside code bundler configurations.

---

Project Structure

micro-frontends/
├── host/                 # Shell app (Webpack host)
│   └── exposes shared state + loads remotes
│
├── vue-module/            # Vue micro-frontend
│   └── Consumes shared state from host
│
├── react-module/          # React micro-frontend
│   └── Consumes shared state from host
│
├── angular-module/        # Angular micro-frontend
│   └── Consumes shared state from host
│
├── package.json           # Root-level orchestration scripts
└── pnpm-workspace.yaml    # pnpm workspace configuration

Each micro-frontend:

• Is built and served independently
• Has its own framework, webpack config, and dev server
• Is wired into the host via Webpack Module Federation
• Shares runtime state, not framework-specific abstractions

also the naming of the MFs with their tech stack isn't conceptually right Conceptually, they are capability-based, not tech-based:

• Mood Selector
• Mood Visualizer
• Mood Logger The frameworks are just how they happen to be implemented today.

I am just procrastinating updating the names :D

The host app is responsible for:

• Bootstrapping the Webpack runtime
• Defining shared dependencies
• Loading remotes dynamically at runtime
• Acting as the integration layer (not the owner of UI logic)

---

How to Run the Project

Prerequisites

• Node.js
• pnpm

If you don’t have pnpm: npm install -g pnpm

Install dependencies (from the root)

pnpm install

now Start everything at once

This spins up the host + all micro-frontends concurrently: pnpm start

Under the hood, this runs:

"start": "concurrently \
  \"pnpm --filter host start\" \
  \"pnpm --filter vue-module start\" \
  \"pnpm --filter react-module start\" \
  \"pnpm --filter angular-module start\""

Each app runs its own dev server, but they’re stitched together at runtime by the Webpack runtime + Module Federation.