Server Side Module Federation Webpack Plugin
This plugin for Webpack will allow for servers to federation portions of the code. It is useful for server side rendering, in particular.
yarn add -D server-side-module-federation-plugin
const ServerSideModuleFederationPlugin = require('server-side-module-federation-plugin');
module.exports = {
entry: {}
output: {
libraryTarget: "commonjs-module",
chunkLoading: "async-http-node",
publicPath: 'http://some.cdn1.com/server/this-package/'
},
target: 'node',
plugins: [
new ServerSideModuleFederationPlugin({
name: "nameOfYourBundle",
library: {
type: 'commonjs-module'
},
exposes: {
'./exposed1': './src/exposed1'
}
remotes: {
remote1: 'http://some.cdn.com/server/remote1/remote-entry.js',
remote2: 'http://some.othercdn.com/server/remote2/remote-entry.js',
}
});
]
}
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
entry: {}
plugins: [
new ModuleFederationPlugin({
name: "nameOfYourBundle",
exposes: {
'./exposed1': './src/exposed1'
}
remotes: {
remote1: 'remote1@http://some.cdn.com/client/remote1/remote-entry.js',
remote2: 'remote2@http://some.othercdn.com/client/remote2/remote-entry.js',
}
});
]
}
// App.js
import React, { lazy } from "react";
import Component1 from "remote1/Component1";
const Component2 = lazy(() => import("remote2/Component2"));
export default () => {
return (
<React.Suspense fallback="loading">
<p>
Alice: <Component1 /> is the best!
</p>
<p>
Bob: no, <Component2 /> is the best!
</p>
</React>
);
};
App.js
inside a client bootstrapped code OR server bootstrapped code!git clone https://github.com/kenotron/server-side-module-federation-plugin.git
cd server-side-module-federation-plugin
yarn
yarn start
In another terminal:
yarn workspace app1 test