![](\"https://github.com/module-federation/nextjs-mf/blob/main/packages/node/assets/banner.png\")
\n\n \n
![\"version\"](\"https://img.shields.io/npm/v/@module-federation/node\")
\n\t![\"license\"](\"https://img.shields.io/npm/l/@module-federation/node.svg?\")
\n \n ![\"downloads\"](\"https://img.shields.io/npm/dt/@module-federation/node\")
\n \nA package to bring the concept and power of module federation to NodeJS.\n
\n\n## ⚡ Features\n\n- Exposes two Webpack Plugins to enable Module Federation.\n- Can exported as UniversalFederationPlugin or NodeFederationPlugin with StreamingTargetPlugin\n- Allows server to fetch chunks across the network.\n- Allow distributed deployments of federated applications.\n\n## 📦 Installation\n\nTo install the plugin run one of the following commands in your terminal for your application.\n\n```bash\n# npm\nnpm install @module-federation/node\n\n# yarn\nyarn add @module-federation/node\n```\n\n## 🚀 Usage\n\nThere are two approaches to using the plugins exported from this package, dependent on your use case.\n\n### Use as Runtime Plugin\n\n`module-federation/enhanced` supports runtime plugins.\n\n```js\nconst { ModuleFederationPlugin } = require('@module-federation/enhanced');\n\nconst options = {\n target: 'async-node',\n output: {\n chunkFilename: '[id]-[contenthash].js', // important to hash chunks\n },\n plugins: [\n new ModuleFederationPlugin({\n name: 'app1',\n exposes: {},\n remotes: {\n app2: 'app2@http://',\n },\n runtimePlugins: [require.resolve('@module-federation/node/runtimePlugin')],\n remoteType: 'script',\n library: { type: 'commonjs-module', name: 'app1' },\n }),\n ],\n};\n```\n\nor you can enable it with some presets via UniversalFederation\n\n```js\nnew UniversalFederationPlugin({\n name: 'website2',\n library: { type: 'commonjs-module' },\n isServer: true, // or false\n remotes: {},\n filename: 'remoteEntry.js',\n useRuntimePlugin: true, // uses the module-federation/enhanced runtime plugin api\n exposes: {\n './SharedComponent': './remoteServer/SharedComponent',\n },\n});\n```\n\n### UniversalFederationPlugin\n\nThis plugin is an abstraction over both `NodeFederationPlugin` and `ModuleFederationPlugin`. It will alternate between which it uses based on where the build is intended to be used.\n\nIf the build is intended to be used on the `browser`, it will use the standard `ModuleFederationPlugin` and bundle your code accordingly, however, if it is intended for `server` usage, it will use `NodeFederationPlugin` to create the bundle.\n\nThis simplifies the code required in your `webpack.config.js` to enable SSR Module Federation. It determines which platform it needs to build for based on two things:\n\n1. If the options passed to the plugin has specified `isServer: true`\n2. If the name assigned to the config being used is `server`\n\nIt accepts the other standard options from `ModuleFederationPlugin` as well. You can see an example usage below:\n\n```js\nconst { UniversalFederationPlugin } = require('@module-federation/node');\n\nconst config = {\n target: isServer ? false : 'web',\n plugins: [\n new UniversalFederationPlugin({\n name: 'website2',\n library: { type: 'commonjs-module' },\n isServer: true, // or false\n remotes: {},\n filename: 'remoteEntry.js',\n useRuntimePlugin: true, // uses the module-federation/enhanced runtime plugins\n exposes: {\n './SharedComponent': './remoteServer/SharedComponent',\n },\n }),\n ],\n};\n```\n\n### NodeFederationPlugin and StreamingTargetPlugin\n\nYou can also use each of the underlying plugins individually if you need more control over when they are used.\n\nAt build time, you need to be aware if you're building for the `server` or for the `browser`.\nIf it's building for server, we need to set `target: false` to allow the plugins to function correctly.\n\nThe `NodeFederationPlugin` follows the same API as the [Module Federation Plugin](https://webpack.js.org/plugins/module-federation-plugin) and therefore should be a drop-in replacement if you already have it set up in your `webpack.config.js`.\n\n### 🔧 Config Example\n\nAn example configuration is presented below:\n\n```js\nconst { NodeFederationPlugin, StreamingTargetPlugin } = require('@module-federation/node');\n\nconst config = {\n target: isServer ? false : 'web',\n plugins: [\n new NodeFederationPlugin({\n name: 'website2',\n library: { type: 'commonjs-module' },\n remotes: {},\n filename: 'remoteEntry.js',\n exposes: {\n './SharedComponent': './remoteServer/SharedComponent',\n },\n }),\n new StreamingTargetPlugin({\n name: 'website2',\n library: { type: 'commonjs-module' },\n remotes: {},\n }),\n ],\n};\n```\n\n## Utilities\n\nThis package also exposes a few utilities to help with the setup of your federated application.\n\n### revalidate\n\nUsed to \"hot reload\" the federated application.\n\n- This is useful when you're developing your federated application and want to see changes without having to restart the server.\n- Also useful for production environments where you want to be able to update the federated application without having to restart the server.\n\n```js\nimport { revalidate } from '@module-federation/node/utils';\n\n// we automatically reset require cache, so the reload callback is only if you need to do something else\nrevalidate().then((shouldReload) => {\n // do something extra after revalidation\n if (shouldReload) {\n // reload the server\n }\n});\n```\n\n_Note_: To ensure that changes made to files in remotes are picked up `revalidate`, you can set the remotes webpack [output.filename](https://webpack.js.org/configuration/output/#outputfilename) to `[name]-[contenthash].js` (or similar). This will cause the remoteEntry.js file to be regenerated with a unique hash every time a new build occurs. The revalidate method intelligently detects changes by comparing the hashes of the remoteEntry.js files. By incorporating [contenthash] into the remote's webpack configuration, you enable the shell to seamlessly incorporate the updated files from the remotes.\n\n**Hot reloading Express.js**\n\nExpress has its own route stack, so reloading require cache will not be enough to reload the routes inside express.\n\n```js\n//express.js\nconst app = express();\n\nglobal.clearRoutes = () => {\n app._router.stack = app._router.stack.filter((k) => !(k && k.route && k.route.path));\n};\n\n// in some other file (within the scope of webpack build)\n// wherever you have your revalidation logic\nrevalidate().then((shouldReload) => {\n if (shouldReload) {\n global.clearRoutes();\n }\n});\n```\n\n### Overriding default http chunk fetch\n\n```js\nconst chunkFetcher = globalThis.webpackChunkLoad || globalThis.fetch || fetchPolyfill;\n// then it will pass one argument to the function, the url to fetch\n\nchunkFetcher(url)\n .then((res) => res.text())\n .then((text) => {\n // do something with the text\n });\n```\n\nIf you want to use your own custom fetch, or add fetch headers, either in the entrypoint of webpack or outside of webpack scope, like in express server you can override the default chunk fetcher by setting the `globalThis.webpackChunkLoad` variable.\n\n```js\nglobalThis.webpackChunkLoad = async (url) => {\n const res = await fetch(url, {\n headers: {\n 'x-custom-header': 'custom-header-value',\n },\n });\n return res.text();\n};\n```\n\n## 🔑 License\n\n- MIT @[ScriptedAlchemy](https://github.com/ScriptedAlchemy)\n\n## 👨💻 Contributors\n\nList of our amazing contributors 💥\n\n\n