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.
To incorporate the app-shell
library into your main application, execute:
pnpm install @akinon/app-shell
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.
Props:
-
apps
: An array of application configurations. -
navigation
: Navigation handler for the shell. -
data
: Optional shared data for micro-frontends.
Define each micro-frontend application with:
-
id
: Unique identifier. -
url
: Source URL for the iframe. -
type
: Type of app, e.g., 'fullpage' or 'plugin'.
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.