@genesisx/mfe-loader
TypeScript icon, indicating that this package has built-in type declarations

1.0.1-beta0.1 • Public • Published

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

  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.

Dependents (0)

Package Sidebar

Install

npm i @genesisx/mfe-loader

Weekly Downloads

1

Version

1.0.1-beta0.1

License

SEE LICENSE IN LICENSE

Unpacked Size

16.7 kB

Total Files

20

Last publish

Collaborators

  • varkisebi
  • devesh.kaushal
  • paribhasika
  • sophiacmcg
  • shashixt
  • vigneshpushkaranps
  • tolalitnegi
  • nareshbhatia
  • iamdavidjackson
  • genesisy
  • venkateshmishra
  • dreamzmaster
  • harshi14
  • areai51