@appshell/react
React utilites for building micro-frontends with Webpack Module federation and Appshell.
Working examples can be found here.
Getting Started
To begin, you'll need to install @appshell/react:
npm install @appshell/react --save-devor
yarn add -D @appshell/reactor
pnpm add -D @appshell/reactAppshellComponent
React component that dynamically loads Appshell components.
import { AppshellComponent, ManifestProvider } from '@appshell/react';
<App>
<ManifestProvider manifest={manifest}>
<AppshellComponent remote="PingModule/Ping">
<AppshellComponent remote="PongModule/Pong">
</ManifestProvider>
</App>useGlobalConfig
For access to the global appshell config.
import { GlobalConfigProvider, useGlobalConfig } from '@appshell/react';
const MyComponent = () => {
const config = useGlobalConfig();
...
}
<RegistryProvider config={config}>
<MyComponent />
</RegistryProvider>useManifest
For access to the manifest.
import { ManifestProvider, useManifest } from '@appshell/react';
const MyComponent = () => {
const manifest = useManifest();
...
}
<ManifestProvider manifest={manifest}>
<MyComponent />
</ManifestProvider>Where does the registry come from?
Currently, the registry is a shared directory or mounted volume. It does support calling an http endpoint, but it has not yet been implemented.
See @appshell/cli
Each micro-frontend registers its manifest with the registry
appshell register --manifest dist/appshell.manifest.json