Youtube clone with Nx

NOTE:

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

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

There is 1 host (shell) and 3 remote apps (watch-app, likes-app, history-app).

There are 3 versions of source codes available:
Turborepo
Nx (Current Repo)
Lerna

NOTE:

Server side rendering is implemented only on lerna and Turborepo edition

Demo: ▶

http://youtube.vugar.app

NOTE:

Hosted application is using Turborepo edition repo

Getting Started 🚀

1- Install nx globally:

npm install [email protected] -g

2- On project root to install root dependencies

npm ci

3- Start project and navigate to localhost:4200:

nx serve shell:serve-mfe

4- To lint all apps:

npm run lint:all

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

Tech Stack:

Pros and cons of Nx, Turborepo and Lerna tools

Below are just my experiences working in those tools. They can be inaccurate.

Lerna

✅ Supports both same and different versions of libraries (such as Angular, RxJs)
✅ Native - Use Angular CLI
❌ Configuration of applications required a change to angular.json to make it work. Switched to ngx-build-plus builders to support custom webpack config.
❌ Slow development efficiency. Rebuild everytime you make changes to common packages such as UI
❌ No dependency graph

Nx

❌ Not supports both same and different versions of libraries (such as Angular, RxJs). Only Monorepo.
❌ Not native. Uses Nx CLI
❌ Configuration of applications required a change to angular.json to make it work. Switched to Nx Officially Supported Builders to support custom webpack config.
Problems with adding new packages (such as ssr)
✅ Very fast development efficiency
✅ Powerful dependency graph

Turborepo

❌ Not supports both same and different versions of libraries (such as Angular, RxJs). Only Monorepo.
✅ Native - Use Angular CLI
❌ Configuration of applications required a change to angular.json to make it work. Switched to ngx-build-plus builders to support custom webpack config.
✅ Fast development efficiency
✅ Dependency graph

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.

Contribution guide 🌴

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

About me 🌴🏌️

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