/youtube-webapp-turborepo

Youtube clone using Angular and Module Federation. Turborepo edition.

Primary LanguageTypeScript

Youtube microfrontend using Angular, Module Federation. Turborepo edition.

Youtube Angular brand

NOTE:

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

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 3 versions of source codes available:
Turborepo (Current Repo)
Nx
Lerna

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

Mission:

My mission is to make complex microfrontend app as much as possible to have many cases for developers.

Demo: ▶

http://youtube.vugar.app

NOTE:

Hosted application is using Turborepo edition repo

Getting Started 🚀

Prerequisites

Since workspaces are available from npm v7, you should have NodeJs 16+ installed.

1- Install turbo globally:

npm install turbo@1.1.4 -g

2- On root project install dependencies:

npm install

3- Start project and navigate to localhost:4200:

npm run serve

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 and then npm install

Tech Stack:

Angular Angular Material Angular Universal Angular Universal NgRx store NgRx store Turborepo

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)
✅ 100% Native. No need to change configuration of applications (such as angular.json) to make it work
❌ 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. Needs to change configuration of applications (such as angular.json).
Uses custom plugins instead of native angular/cli. Problems with adding new packages (such as ssr)
✅ Very fast development efficiency
✅ Poweful dependency graph

Turborepo

❌ Not supports both same and different versions of libraries (such as Angular, RxJs). Only Monorepo.
✅ Native. No need to change configuration of applications (such as angular.json).
✅ 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.

Backlog

  1. Add I18n translations
  2. Add Authorization with Auth0 to enable faster api fetcing and more features.

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 ⭐

About me 🌴🏌️

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