Building a Production-Ready Angular 21 Micro-Frontend Starter Kit with Native Federation

#angular #javascript #frontend #webdev

After 4 years building Micro-Frontend systems
for UAE government platforms and fintech
dashboards, I decided to package everything
into a reusable starter kit.

What is NgMFE Starter Kit?

A production-ready Angular 21 boilerplate that
gives you everything needed to build enterprise
Micro-Frontend applications.

Live Demo

🔴 https://ng-mfe-shell.vercel.app
(credentials: admin/admin)

Tech Stack

Angular 21 + Native Federation (Vite-based)
Angular Material + Tailwind CSS v3
JWT Authentication + Route Guards
NgRx Signals state management
Multi-language: English, French, Arabic RTL
Dark/Light mode with persistence
GitHub Actions CI/CD
13 unit tests passing

Why I Built This

Setting up MFE architecture from scratch
takes weeks. I've done it multiple times
for real enterprise clients in UAE and KSA.

The hardest parts are:

Configuring Native Federation correctly
Setting up shared libraries
Handling auth across micro-apps
Making RTL work with Tailwind

This kit solves all of that out of the box.

Architecture Overview

The kit has 3 apps:

Shell (host) — runs on port 4200
Auth (remote) — runs on port 4201
Dashboard (remote) — runs on port 4202

Each app is independently deployable.
The shell loads remotes dynamically
using Native Federation.

DEV Community