Eugenia

An example of microfrontend architecture using Angular and Nx workspace with Module Federation.

Overview

This project demonstrates how to implement a microfrontend architecture with:

• Shell Application: Host application with layout (top bar and sidebar)
• Todo Microfrontend: Complete todo management with list and kanban views
• Users Microfrontend: User management interface

Architecture

Module Federation Setup

The project uses Webpack Module Federation to enable microfrontends:

• Shell (Host) - Port 4200

  • Manages the overall application layout
  • Routes to remote microfrontends
  • Provides navigation and shared UI components

• Todo (Remote) - Port 4201

  • Todo list view
  • Kanban board view
  • Todo management service

• Users (Remote) - Port 4202

  • User management interface
  • User service

• Projects (Remote) - Port 4203

  • Project list
  • Project service

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm

Installation

npm install

Development

Start all applications (shell + remotes):

npx nx serve shell

This will start:

• Shell application on http://localhost:4200
• Todo remote on http://localhost:4201 (built and served)
• Users remote on http://localhost:4202 (built and served)
• Projects remote on http://localhost:4203 (built and served)

Building

Build all applications:

npx nx build shell

Build individual applications:

npx nx build todo
npx nx build users

Nx Graph

View the project dependency graph:

npx nx graph

Technologies Used

• Angular: Frontend framework
• Nx: Monorepo tooling and build system
• Module Federation: Runtime microfrontend integration
• TypeScript: Type-safe development

Useful Links

• Nx Documentation
• Module Federation
• Angular Documentation