Youtube microfrontend using Angular, Module Federation. Turborepo edition.

About Project

Disclaimer:

This is project is for education purpose only and was made to illustrate example of building microfrontend using Angular, Module Federation.

NOTE:

For version 14 with standalone components use 14.x branch
For version 13 without standalone components use 13.x branch

There is 1 host (shell) and 3 remote apps (watch-app, likes-app, history-app). Each app is deployed to different hosting storage.

There are 4 versions of source codes available:
🏄 Turborepo (Current Repo)
🏄Nx
🏄Lerna
🏄NextJs (without microfrontend)

NOTE:

Server side rendering is implemented only on Lerna and Turborepo edition

Features:

✅ Multiple Angular applications on different domains
✅ Shared UI components and utils
✅ NgRx Store state management on each application
✅ Communication between angular applications
✅ Routing between applications
✅ Server Side Rendering

And others:
✅ Theming
✅ Keyboard shortcuts

Mission:

My mission is to make complex microfrontend app to have many use cases for developers.

Demo: ▶

https://youtube.vugar.app

NOTE:

Hosted application is using Turborepo edition repo

Getting Started 🚀

Prerequisites

NodeJs: v18+

1- Install turbo globally:

npm install [email protected] -g

2- On root project install dependencies:

npm install

3- Start project and navigate to localhost:4200:

npm run serve

Or you can start in SSR mode:

npm run serve:ssr

Other commands: please see package.json for other commands.

NOTE:

In case of error that components are not exported from youtube/common-ui, on project root run command npm run clean:cache and then npm run serve

Tech Stack:

Tooling Tradeoffs

Here is my experience working with Lerna, Nx, and Turborepo. This can be inaccurate.

Upgrade Guide

To upgrade angular applications. Example:

On root:

npx @angular/cli@13 update @angular/core@13 @angular/cli@13 --force

On each remote app:

ng update @angular/core --migrate-only=true --from=13 --to=14
ng update @angular/cli --migrate-only=true --from=13 --to=14

Common Questions

1- Why I pass data via Input to remote apps?
The microfrontends apps(such as history or likes app) are NOT meant to be dependent on shell app.The reason I put inputs there is that I did not want to create additional Rest API for this(or signals such as socketjs) since I waslazy. Nevertheless, there are some cases where putting data via Input is very useful such as the current app state(ex: current playing videoId). For example, in my case, I deliberately inform Shell app from video-app that that I click on Like button(in real life we would do this via API of course). Sole purpose of this to provide example for communication between apps.So I strongly agree that remote apps should not be dependent on shell app for Data and the only reason I put Input is to give example how can we pass data to remotes which could be done without Signals(socketjs) APIs. The rest cases should be done via APIs.

What is next?

Currently, the unit tests were not aded since the project was focused on main features such as module federation, managing state, intercommucation and so on. It can be started soon.

Backlog

1. Add I18n translations
2. Add secondary entry points for common-ui

Contribution guide 🌴

Want to contribute to improve community app? Looking forward for pull requests. Let's get started :)

Supporting guide

Found repo useful? :) Let's star it ⭐

References

Book: https://www.angulararchitects.io/en/book/
My blog: https://medium.com/p/258f331bc11e
Big thanks to https://github.com/manfredsteyer for his contribution for a lot of useful blogs + book for building microfrontend.

About author 🌴🏌️

Xtreme Junior Front end developer focused on nice architecture and long term webapps.