API Reference Client

API Reference: Client

Package: @microfrontend/client Version: 1.6.0 Install: npm install @microfrontend/client Peer dependency: @microfrontend/common ^1.6.0

This package is installed in each microfrontend application.

---

RoutedApp

The main class for the microfrontend side. Provides methods to communicate with the shell's MetaRouter via postMessage.

import { RoutedApp } from '@microfrontend/client';

Constructor

constructor(config: RoutedAppConfig)

Parameter	Type	Description
config	RoutedAppConfig	Configuration for the routed app

On construction, if the app is running inside an iframe (has a parent window), it creates a MessagingApiBroker to listen for messages from the shell. If running standalone, the messaging broker is not created.

Properties

hasShell: boolean (readonly)

Returns true if the microfrontend is running inside a shell (i.e., inside an iframe with a parent window). Use this to implement graceful degradation when running standalone.

if (routedApp.hasShell) {
  routedApp.sendRoute(currentUrl);
}

Methods

sendRoute(url: string): void

Reports the current internal route to the shell so the URL hash stays synchronized.

// Call this on every navigation event
routedApp.sendRoute('/settings/profile');

goTo(metaRoute: string, subRoute?: string): void

Requests the shell to navigate to a different microfrontend.

// Navigate to microfrontend 'admin'
routedApp.goTo('admin');

// Navigate to microfrontend 'admin' with subroute 'users'
routedApp.goTo('admin', 'users');

broadcast(tag: string, data: object, recipients?: string[]): void

Sends a broadcast message through the shell to other microfrontends.

// Broadcast to all microfrontends
routedApp.broadcast('user-logged-in', { userId: 42 });

// Broadcast to specific microfrontends
routedApp.broadcast('cart-updated', { items: 3 }, ['checkout', 'header']);

setFrameStyles(styles: IMap<string>): void

Requests the shell to update the iframe's CSS styles. Useful for dynamic resizing.

routedApp.setFrameStyles({
  'height': '800px',
  'background-color': 'white'
});

changeState(hasState: boolean, subRoute?: string): void

Reports to the shell whether the microfrontend has unsaved state (is "dirty"). The shell uses this to prevent accidental navigation away from unsaved work.

// Mark as dirty
routedApp.changeState(true, 'edit-form');

// Mark as clean
routedApp.changeState(false, 'edit-form');

See State Management for details.

requestCustomFrameConfiguration(): void

Requests the custom configuration data that the shell has associated with this microfrontend's iframe (via FrameConfig.custom). The response arrives asynchronously via the callback registered with registerCustomFrameConfigCallback.

routedApp.requestCustomFrameConfiguration();

Callback Registration

registerRouteChangeCallback(callback): void

Registers a callback invoked when the shell activates this microfrontend or navigates to a subroute.

routedApp.registerRouteChangeCallback((activated: boolean, subRoute?: string) => {
  if (subRoute) {
    router.navigateByUrl(subRoute, { replaceUrl: true });
  }
});

Parameter	Type	Description
activated	boolean	true if the microfrontend is being activated
subRoute	string | undefined	The subroute to navigate to

registerBroadcastCallback(callback): void

Registers a callback invoked when a broadcast message is received.

routedApp.registerBroadcastCallback((metadata, data) => {
  console.log(`Broadcast from ${metadata.source}: ${metadata.tag}`, data);
});

Parameter	Type	Description
metadata	MessageBroadcastMetadata	Metadata including tag, source, recipients, isRecipientVisible
data	object	The broadcast payload

registerCustomFrameConfigCallback(callback): void

Registers a callback invoked when the shell responds to a requestCustomFrameConfiguration() call.

routedApp.registerCustomFrameConfigCallback((config) => {
  console.log('Frame config:', config); // e.g., { apiKey: 'abc123' }
});

registerDiscardStateCallback(callback): void

Registers a callback invoked when the shell tells the microfrontend to discard its unsaved state (after the user confirms navigation).

routedApp.registerDiscardStateCallback(() => {
  form.reset();
  routedApp.changeState(false);
});

registerMicrofrontendLoadedCallback(callback): void

Registers a callback invoked when a microfrontend has finished loading.

routedApp.registerMicrofrontendLoadedCallback((metaRoute: string) => {
  console.log(`Microfrontend ${metaRoute} loaded`);
});

---

RoutedAppConfig

Configuration class for RoutedApp.

import { RoutedAppConfig } from '@microfrontend/client';

Constructor

constructor(
  metaRoute: string,
  parentOrigin: string,
  logLevel?: Level
)

Parameter	Type	Default	Description
metaRoute	string	—	Required. The meta route identifier — must match the corresponding IAppConfig.metaRoute in the shell
parentOrigin	string	—	Required. The origin URL of the shell application (for postMessage security)
logLevel	Level	Level.INFO	Logging verbosity

Throws: Error if metaRoute is empty.

import { Level } from '@microfrontend/common';

const config = new RoutedAppConfig(
  'dashboard',
  'https://shell.example.com',
  Level.DEBUG
);