How to add a main remote entry for a monorepo of remote apps?

[felipeloge]

Hey guys,
I have a doubt about the usage of module federation with a host app and remote apps that are in a monorepo.
So basically I have two different repositories:

• The first repo is the host app
  https://github.com/felipeloge/host
• The second is a monorepo of remote apps
  https://github.com/felipeloge/remotes-monorepo

In the remotes monorepo, I have multiples React apps that I federate through module federation. For example:

• remote-one
• remote-two

The build generates the remote apps builded inside /dist folder. In my case, I have a vhost that I can access the remote entry files:

• http://local.remotes-monorepo.com/remote-one/remoteEntry.js
• http://local.remotes-monorepo.com/remote-two/remoteEntry.js

In host app, if I create many remote apps inside the monorepo, I need to include the urls it in the webpack module federation configuration:

remotes: {
    'remoteOne': `remote_one@http://local.remotes-monorepo.com/remote-one/remoteEntry.js`,
    'remoteTwo': `remote_two@http://local.remotes-monorepo.com/remote-two/remoteEntry.js`,
    // ...
},

My doubt is about if there is something that simplify the load of all remote apps inside a "main" remote entry in host app.
I would like to load only main file from http://local.remotes-monorepo.com as remote app (e.g. remotes-monorepo) that will be responsible to load all remote entries (or when necessary). So in host app, I could load the components through this main remote app, for example:

import HelloWorld from 'remotes-monorepo/remote-one/HelloWorld'
// or
import HelloWorld from 'remote-one/HelloWorld'

Is this possible? Is there a way to handle with this situation?
Thanks in advance

[ScriptedAlchemy]

To re-map remotes or change the request, you can use the beforeRequest hook:
You can see the full example here: https://github.com/module-federation/module-federation-examples/tree/master/runtime-plugins/remote-router

/**
 * Remote Router Runtime Plugin for Module Federation
 * -------------------------------------------------
 * This plugin extends the capabilities of the module federation runtime by customizing the behavior of the application at runtime.
 *
 * Functionality:
 * 1. The plugin provides several hooks to customize the behavior of the application at runtime.
 * 2. It handles the loading of remote microfrontends and provides a way to handle errors that may occur during this process.
 *
 * How it Works:
 * - The 'errorLoadRemote' method is called when there's an error loading a remote microfrontend. It logs the error and returns a module that displays an error message.
 * - The 'beforeRequest' method is called before a request is made to load a remote microfrontend. It modifies the entry property of the remotes to point to the correct URLs.
 *
 * Usage:
 * - The plugin is a crucial part of the host application as it handles the loading of remote microfrontends.
 *
 * Notes:
 * - This plugin provides a flexible way to control the loading of remote microfrontends, optimizing the loading process and handling errors efficiently.
 */
export default function () {
    const remoteEntries = {
        'remote_one': 'http://localhost:4200/remoteEntry.js',
        'remote_two': 'http://localhost:4201/remoteEntry.js',
        // Add more remote entries here as needed
    };

    const getErrorMessage = (id, error) => `remote ${id} is offline due to error: ${error}`;

    const getModule = (pg, from) => {
        if (from === 'build') {
            return () => ({
                __esModule: true,
                default: pg,
            });
        } else {
            return {
                default: pg,
            };
        }
    };

    return {
        name: 'remote-router',
        errorLoadRemote({id, error, from, origin}) {
            console.error(id, 'offline');
            const pg = function () {
                console.error(id, 'offline', error);
                return getErrorMessage(id, error);
            };

            return getModule(pg, from);
        },
        beforeRequest(args) {
            console.log('before request', args);
            args.options.remotes.forEach((r) => {
                const name = r.name;
                if (remoteEntries[name]) {
                    r.entry = remoteEntries[name];
                }
            });
            return args;
        },
    };
}

If you want to manage this globally, where you can register the plugin in one application and it take effect on all of them:

import { registerGlobalPlugins } from '@module-federation/runtime';
const remoteIngressPlugin = function () {
    const remoteEntries = {
        'remote_one': 'http://localhost:4200/remoteEntry.js',
        'remote_two': 'http://localhost:4201/remoteEntry.js',
        // Add more remote entries here as needed
    };

    const getErrorMessage = (id, error) => `remote ${id} is offline due to error: ${error}`;

    const getModule = (pg, from) => {
        if (from === 'build') {
            return () => ({
                __esModule: true,
                default: pg,
            });
        } else {
            return {
                default: pg,
            };
        }
    };

    return {
        name: 'remote-router',
        errorLoadRemote({id, error, from, origin}) {
            console.error(id, 'offline');
            const pg = function () {
                console.error(id, 'offline', error);
                return getErrorMessage(id, error);
            };

            return getModule(pg, from);
        },
        init(args) {
            return args;
        },
        beforeRequest(args) {
            console.log('before request', args);
            args.options.remotes.forEach((r) => {
                const name = r.name;
                if (remoteEntries[name]) {
                    r.entry = remoteEntries[name];
                }
            });
            return args;
        },
    };
}
registerGlobalPlugins([remoteIngressPlugin()]);
export default () => ({
  name: 'empty-plugin',
});

[felipeloge]

Thanks @ScriptedAlchemy. The runtimePlugin works fine to my case.