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., 'full_page' 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.