@appshell/react-federated-component

React utilites for dynamically loading federated components for Webpack Module federation micro-frontends.

Working examples can be found here.

Getting Started

To begin, you'll need to install @appshell/react-federated-component:

npm install @appshell/react-federated-component --save-dev

or

yarn add -D @appshell/react-federated-component

or

pnpm add -D @appshell/react-federated-component

FederatedComponent

React component that dynamically loads federated components.

import { FederatedComponent, ManifestProvider } from '@appshell/react-federated-component';

<App>
  <ManifestProvider manifest={manifest}>
    <FederatedComponent remote="PingModule/Ping">
    <FederatedComponent remote="PongModule/Pong">
  </ManifestProvider>
</App>

useManifest

For access to the manifest.

import { ManifestProvider, useManifest } from '@appshell/react-federated-component';

const MyComponent = () => {
  const manifest = useManifest();

  ...
}

<ManifestProvider manifest={manifest}>
  <MyComponent />
</ManifestProvider>

jsonResource

Helper function for loading json resources in React Suspense components.

import { jsonResource } from '@appshell/react-federated-component';

const resource = jsonResource('http://test.com/appshell.manifest.json');

const MyComponent = () => {
  const value = resource.read();

  if (!value) {
    return null;
  }

  if (isError(value)) {
    return <ErrorMessage message={`${value}`} />;
  }

  return <div>my component</div>;
};

<React.Suspense fallback="Loading...">
  <MyComponent />
</React.Suspense>;

Where does the manifest come from?

See @appshell/cli

appshell generate manifest --configsDir appshell_configs