Micro Front-end Loader

Micro Front-end Loader (or MFE Loader) is a powerful utility that simplifies the process of loading remote apps or modules dynamically within a host/container app at runtime using Webpack 5's Module Federation. It also provides a lot of control and flexibility to the developers with its configurable options.

This tool can be used in any client side rendered app that uses Webpack's ModuleFederationPlugin for federating modules.

Table of Contents

• Features
• Consumers Section
  • Usage
  • RemoteModuleProps
  • Sample
• Contributors Section

Features

1. Lightweight - MFE Loader is a lightweight package with 0 dependencies.
2. Dynamic Loading - Load remote apps or modules on demand at runtime.
3. Automatic Environment Handling - Automatically detects the current environment and accordingly, builds the base remoteUrl.
4. Error Boundary - It comes with a default Error Boundary component that will handle the errors while loading the modules. You can also create your own custom Error Boundary component and use it instead of the default one.
5. Lazy Loaded - The remote modules are lazy loaded by default using React's lazy and Suspense components. A static SkeletonLoader component is used as a fallback while the module is being loaded. You can also provide your own custom fallback component.
6. Caching - Caches the loaded modules to avoid loading them again.

NOTE:

• No need to wrap the components in an asynchronous boundary (like creating a bootstrap.js file) to load remote modules as MFE Loader will handle that for you.
• If you want to import remotes statically (not recommended), then you might need an asynchronous boundary.
• No need to configure the remotes in the Webpack configuration file of your host/container app (i.e. no need to define remotes in host module federation config).

Consumers Section

Usage

1. Install the package using npm install @genesisx/mfe-loader or yarn add @genesisx/mfe-loader.

2. Import FederatedComponent and RemoteModuleProps from the package where you want to load any exposed module.

   import { FederatedComponent, RemoteModuleProps } from '@genesisx/mfe-loader';

3. Create an object that will contain the information of the remote module to be loaded and then, provide it to the FederatedComponent as a prop.

   const config: RemoteModuleProps = {
     scope: 'remote_app1',
     module: 'Header',
     url: `http://localhost:3000/remoteEntry.js`, // manually add the url of the remoteEntry.js file
   };

   <FederatedComponent {...config} />

RemoteModuleProps

| Prop | Required | Type | Description | | ---------------- | -------- | ---------------------------------- | -------------------------------------------------------------------------------------- | | scope | Y | string | The scope of the remote app. | | module | Y | string | The name of the module to be loaded. | | url | Y | string | The URL of the remoteEntry.js file of the remote app. | | suspenseFallback | N | () => JSX.Element or ReactNode | The fallback component to be rendered while the module is being loaded. | | errorFallback | N | () =>JSX.Element or ReactNode | The fallback component to be rendered if there is an error while rendering the module. | | ErrorBoundary | N | ComponentType<any> | A custom Error Boundary component to be used instead of the default one. |

Sample

import React, { useState } from 'react';
import { FederatedComponent, RemoteModuleProps } from '@genesisx/mfe-loader';
import { Button, Loader } from 'my-ui-lib'; // change the import accordingly

const ErrorFallback = <div>Something went wrong!</div>;

const config: RemoteModuleProps = {
  scope: 'remote_app1',
  module: 'Header',
  url: `http://localhost:3000/remoteEntry.js`,
  suspenseFallback: Loader, // optional but recommended
  errorFallback: ErrorFallback, // optional
};

const App = () => {
  const [load, setLoad] = useState(false);

  return (
    <div>
      <Button onClick={() => setLoad(true)}>Load Component</Button>
      {load && <FederatedComponent {...config} />}
    </div>
  );
};

FEW POINTS TO NOTE:

• If you want to create and use your own custom Error Boundary component, then make sure to include ErrorBoundary in the config object.
• You do not have to provide errorFallback if you are using your own custom Error Boundary component.
• I would recommend using the react-error-boundary package to create your own custom Error Boundary component. Also, use this amazing blog by Kent C. Dodds as a reference.

Contributors Section

Follow the below steps to test and run the package locally:

1. Build the package using

   nx build mfe-loader

   OR if you do not have nx installed in the system, use

   # using yarn
   yarn nx build mfe-loader
   
   # using npm
   npx nx build mfe-loader

2. Create a symlink using (one time only)

   nx link mfe-loader

   OR if you do not have nx installed in the system, use

   # using yarn
   yarn nx link mfe-loader
   
   # using npm
   npx nx link mfe-loader

3. Go to an application where you want to use and test the package and run

   npm link mfe-loader

4. Start using the package in your application. Refer to the usage section for more details.