Micro Frontends - Sample Code

This is an example Monorepo of micro frontends that each application developed using Next.js and shared their code using Module Federation.

NOTE: Next.js App Router is not currently supported in nextjs-mf.

Hosted examples

You can check the running example here:
https://micro-frontends-demo.vercel.app

Local machine

1. Clone this repository or download it to your local machine:

git clone https://github.com/farhoudshapouran/micro-frontends.git

2. Go into the main directory and install all required dependencies:

NOTE: This monorepo uses yarn as a package manager.

cd micro-frontends
yarn install

3. Now run the dev server:

yarn dev

Visit http://localhost:3000

Folder structure and ports

Each app has its folder inside the apps folder. Each app folder contains the actual application (e.g. product, inspire, checkout).

Different port numbers are used to host applications. The following table shows which teams own which application.

Port	Team	Responsibility
3000	- Host Application -	infrastructure (app shell)
3001	Team Product	shop page, product details page, search
3002	Team Checkout	cart, checkout process
3003	Team Inspire	recommendations, related and latest products

All shared reusable UI components, utils, configs, and data context are in the packages folder.