Skip to main content

Shell Application Overview

The Citadel Shell Application is a minimalist, yet powerful, host for all first-party Micro-Frontends (MFEs) within the Citadel platform. Its primary purpose is to provide a consistent, secure, and configurable environment for composing a unified user experience from multiple, independently developed frontend applications.

Core Philosophy: A Minimalist Host​

The shell is intentionally designed to be as lean as possible. It does not contain business logic or complex UI components like navigation menus or dashboards. Instead, it focuses exclusively on providing core, cross-cutting services to the MFEs it hosts.

This minimalist approach ensures:

  • Maximum Flexibility: MFE teams have complete control over their application's UI, layout, and user experience.
  • Developer Autonomy: Teams can build their MFEs with their preferred tools and frameworks without being constrained by the shell's technology stack.
  • Long-Term Maintainability: By keeping the shell's responsibilities limited, we reduce its complexity and make it easier to maintain and evolve over time.

Key Responsibilities​

The shell application has three core responsibilities:

  1. Authentication: It manages the entire OIDC authentication lifecycle, including login, logout, and silent token refresh. It passes the authentication state and user information down to the hosted MFEs.

  2. Runtime Configuration: It fetches a config.json file at startup, which defines the application's behavior for a given environment. This includes OIDC settings, MFE locations, and routing rules. This configuration is also passed down to the MFEs.

  3. MFE Composition: It dynamically loads MFE components based on the current URL and the routing rules defined in the runtime configuration. It acts as the central router and composition engine for the entire user-facing platform.

The Integration Contract​

To ensure seamless integration, the shell provides a well-defined contract for MFEs. This includes a set of props passed to each MFE, a routing configuration schema, and a programmatic API for communication. For detailed information, please refer to the MFE Integration Guide.