Akinon App Shell Library

The app-shell library is designed to orchestrate the integration of micro-frontend applications, providing a unified shell for navigation, theming, and inter-app communication.

Installation

To incorporate the app-shell library into your main application, execute:

pnpm install @akinon/app-shell

Usage

Incorporate the AppShellProvider at the top level of your main application:

import React from 'react';
import ReactDOM from 'react-dom';
import { AppShellProvider } from '@akinon/app-shell';
import MainApp from './MainApp';

ReactDOM.render(
  <AppShellProvider apps={yourAppsConfig} navigation={yourNavigationHandler}>
    <MainApp />
  </AppShellProvider>,
  document.getElementById('main')
);

yourAppsConfig should be an array of app configurations, including IDs, URLs, and types.

API

AppShellProvider

Props:

• apps: An array of application configurations.
• navigation: Navigation handler for the shell.
• data: Optional shared data for micro-frontends.

Configuration

Define each micro-frontend application with:

• id: Unique identifier.
• url: Source URL for the iframe.
• type: Type of app, e.g., 'fullpage' or 'plugin'.

Extending

The app shell is designed to be extendable. Implement custom logic for navigation, theming, and more to fit the needs of your micro-frontend architecture.

For detailed documentation on extending the app shell, configuration options, and more advanced use cases, refer to the full documentation.