Root App

Overview

The Root App is a pure JavaScript application based on the Single-SPA framework. It serves as the primary orchestrator for loading and managing multiple micro frontends within a single-page application (SPA). The application uses Single-SPA's layout engine and micro frontend configuration to dynamically load and render micro frontends based on a predefined layout.

Components

1. Single-SPA Core

   • Purpose: Provide the core functionalities for registering, loading, and managing micro frontends.

   • Responsibilities:

     • Register micro frontend applications.

     • Start the Single-SPA application orchestrator.

     • Manage lifecycle events of the micro frontends.

2. Single-SPA Layout

   • Purpose: Define the layout structure of the microfrontends.

   • Responsibilities:

     • Parse the layout configuration.

     • Construct routes based on the layout.

     • Activate the layout engine to manage micro frontend positioning and rendering.

3. Micro frontends Applications

   • Purpose: Individual micro frontend applications that provide specific functionalities within the root app.

   • Responsibilities:

     • Implement specific business logic and UI components.

     • Be dynamically loaded based on the route and layout configuration.

4. Custom Properties

   • Purpose: Provide dynamic properties to microfrontends.

   • Responsibilities:

     • Extract and pass the root tenant information from the URL.

     • Provide the base application URL to micro frontends.

Key Functions & Configuration

1. getRootTenant Function

   • Purpose: Extract the root tenant from the URL.

2. Layout Configuration

   • Purpose: Define the layout structure using Single-SPA layout configuration.

3. Micro frontend Applications

   • Purpose: Define and register micro frontends based on the layout configuration.

4. Layout Engine

   • Purpose: Manage the positioning and rendering of microfrontends.

5. Register Applications

   • Purpose: Register each micro frontend application with custom properties.

6. Start Single-SPA

   • Purpose: Start the Single-SPA orchestrator.

Data Flow

1. Initialization

   • On application start, the getRootTenant function extracts the root tenant from the URL.

   • The constructRoutes function parses the micro frontend layout configuration.

2. Application Registration

   • The constructApplications function constructs the applications based on the routes.

   • Each application is registered with custom properties, including rootTenant and baseAppURL.

3. Layout Management

   • The constructLayoutEngine function activates the layout engine to manage micro frontend positioning.

4. Application Start

   • The start function initializes the Single-SPA framework, enabling micro frontend orchestration.