@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-dev

or

yarn add -D @appshell/react

or

pnpm add -D @appshell/react

AppshellComponent

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