Hackforge Academy

Explanation

The Host Application is the main application that loads and integrates one or more micro frontends. It usually manages the overall layout, navigation, and application-level concerns.

Code:

Host Application
├── Header
├── Navigation
├── Product Remote
├── Cart Remote
└── Payment Remote

Explanation

A Remote Application is an independently developed frontend that provides a specific feature or business domain to the Host Application.

Code:

Product Remote
├── ProductList
├── ProductDetails
└── ProductSearch

Explanation

The Host loads the required Remote Application and displays it as part of the overall user interface. The user experiences them as a single application.

Code:

User
  ↓
Host Application
  ↓
Product Remote
  ↓
Product UI

Explanation

The Host and Remote applications can have separate build and deployment processes. A Remote can be updated without necessarily rebuilding the entire Host application.

Code:

Host Team
   ↓
Build → Deploy Host

Product Team
   ↓
Build → Deploy Product Remote

Explanation

The Host provides the application shell and integration, while the Remote provides a specific feature. This separation allows teams to work and deploy independently.

Code:

Host → Integration + Layout + Navigation

Remote → Feature + Components + Business Logic