or run

npx @tessl/cli init
Log in

Version

Files

tile.json

task.mdevals/scenario-8/

Micro-frontend Host Routing Shell

A host configuration that wires micro apps through a customizable router and shared layout while supporting runtime app list changes.

Capabilities

Router fallbacks and cleanup

  • While a micro app is loading its assets, render a host-provided loading view that includes the target route path. @test
  • If a micro app fails to load or throws during mount, render an error view that surfaces the failure message and offers a retry callback that re-attempts loading. @test
  • Unmatched host routes render a not-found view without attempting to load a micro app. @test
  • After leaving a micro app route, previously injected assets for that app are removed. @test

Layout wrapping micro apps

  • Micro apps render inside a shared layout that adds a header showing the current host pathname and the name of the last entered and last left micro apps. @test

Runtime app list updates

  • A control in the layout can append a new micro app definition at runtime via the provided updater, and the router immediately recognizes its routes after the update. @test

Implementation

@generates

API

export interface MicroAppConfig {
  name: string;
  title?: string;
  url: string;
  routes: string[];
}

export interface HostOptions {
  apps: MicroAppConfig[];
  extraProps?: Record<string, unknown>;
}

export function createHostConfig(options: HostOptions): unknown;

Dependencies { .dependencies }

@ice/plugin-icestark { .dependency }

Provides framework configuration helpers for routing micro apps and wrapping them with host layouts.