Readme.md

About

Library is a set of webpack plugins which gives support of Module Federation into NodeJS.

Usage example with NextJS https://github.com/telenko/node-mf-example

Here is also my article about this library.

Purpose of creating

Release of Webpack Module Federation really have made a shift in modern architecture of web applications. But what about NodeJS and such frameworks like Next? What about SSR? I see for now a gap in webpack, so pure ModuleFederation plugin can not be used inside NodeJS environment. Muliple examples of NextJS+MF here https://github.com/module-federation/module-federation-examples with NextJS using only client-side rendering or not using remote deployed build at all.

What can I propose

I have implemented 2 plugins for webpack:

1. NodeAsyncHttpRuntime - Plugin which should be used on a remote side to build remote scripts for NodeJS. But the main key of plugin is resolution of modules - it is done via http requests, so NodeJS can dynamically resolve child modules, load them and perform.
2. NodeModuleFederation - Plugin is wrapper around origin WebpackModuleFederation plugin and adds NodeJS specific resolution of remote modules (same thing: resolution is done via http requests)

Getting started

1) On remote library:

1.1) Install package (remote can be either pure JS application or NodeJS application - doesn't matter) npm i --save-dev @telenko/node-mf

1.2. Customize webpack configuration, so it should now build 2 targets: for web (if you want legacy browser build) and for node (webpack for now doesn't support universal targets)

1.3) For node build add NodeAsyncHttpRuntime plugin and set webpack's 'target' flag to false

    //pseudocode
    module.exports = [
        {
            target: "web",
            ...webOptionsWebpack
        },
        {
            target: false,
            plugins: [
                new NodeAsyncHttpRuntime() //this is instead of target to make it work
            ],
            ...nodeOptionsWebpack
        }
    ];

1.4) Serve both builds

Full example is here https://github.com/telenko/node-mf-example/blob/master/remoteLib/webpack.config.js

2) On NodeJS application:

2.1) Install library npm i --save-dev @telenko/node-mf

2.2) Add NodeModuleFederation plugin to the webpack config (api parameters schema is same) !Note, remote script url should point to 'node' build (which should be built with NodeAsyncHttpRuntime)

  module.exports = {
      plugins: [
          new NodeModuleFederation({
              remotes: {
                  someLib: "someLib@http://some-url/remoteEntry.node.js"
              },
              shared: {
                  lodash: {
                      eager: true,
                      singleton: true,
                      requiredVersion: "1.1.2"
                  }
              }
          })
      ],
      ...otherWebpackOptions
  };

Usage with Next.js

As Next.js use an internal version of webpack, it's mandatory to use their version. To do so, use the second argument of the 2 plugins to send the "context" of the webpack options.

// next.config.js
module.exports = {
    webpack: (config, options) => {
        config.plugins.push(
            new NodeAsyncHttpRuntime({}, options)
        );
        return config
    },
}

// next.config.js
module.exports = {
    webpack: (config, options) => {
        config.plugins.push(
            new NodeModuleFederation({
                remotes: {
                    someLib: "someLib@http://some-url/remoteEntry.node.js"
                },
                shared: {
                    lodash: {
                        eager: true,
                        singleton: true,
                        requiredVersion: "1.1.2"
                    }
                }
            }, options)
        );
        return config
    },
}

Full example of setuping NextJS with SSR here https://github.com/telenko/node-mf-example/blob/master/host/next.config.js

Usage with runtime uris

If you do not know the real uri during the build step, you can use a promise which will be executed at runtime.

Here is an example based on telenko/node-mf-example to have an url according to the dev or CDN host. On the CDN, the assets are stored in a path according to the remote app name. The environment variable CDN_URL is only known on the production server so we set an alternative for the development env.

// host
module.exports = {
    webpack: (config, options) => {
        // [...]
        if (isServer) {
            // Set the public path of the remote as auto
            mfConf.remotes.remoteLib = "remoteLib@auto";
            // Parse the remote uri and return a promise template string with the runtime data
            mfConf.getRemoteUri = function (remoteUri) {
                const remoteName = remoteUri.split("@")[0];
                return `new Promise(r => {
                    const uri = "${process.env.CDN_URL ? `${process.env.CDN_URL}/${remoteName}` : 'http://localhost:3002'}";
                    r("${remoteName}@${uri}/node/remoteEntry.js");
                })`
            }
        }
        // [...]
    }
};

// remoteLib
const getConfig = (target) => ({
    plugins: [
        ...(target === "web"
            ? [
                new HtmlWebpackPlugin({
                    template: "./public/index.html"
                })
            ]
            : [
                new NodeAsyncHttpRuntime({
                    getBaseUri = function () {
                        // Return a promise template string with the runtime data
                        return `new Promise(r => {
                            const uri = "${process.env.CDN_URL ? `${process.env.CDN_URL}/remoteLib` :  'http://localhost:3002'}";
                            r("${uri}/${target}/");
                        })`
                    }
                })
            ]
        )
    ]
});

Risks

Aren't 2 build makes build-time 2 times longer?

Yes, if we speak about NextJS and SSR - we need both builds: for web and for node, and we have to start entire build separately without sharing built chunks. That will increase build time 2 times.

Security

Since NodeJS out of the box doesn't support remote scripts execution (like in browser we can add script tag) it looks like a hack calling http request then 'eval'-ing it. I'm not sure if it is safe to add remote script execution on server side, but it is the only one possible way to make it on server.

Roadmap

1. https support
2. Next.js support for NodeAsyncHttpRuntime plugin