Module Federation Example

module-federation.js

/ App1 - Docker container 1

const App1 = () => <div>App 1</div>;

export const getFederatedModule = name => {
return {
'./App1': App1
};
};

// App2 - Docker container 2

const App2 = () => <div>App 2</div>;

export const getFederatedModule = name => {
return {
'./App2': App2
};
};

// Shell

const remotes = {
app1: 'http://app1_container:3000/remoteEntry.js',
app2: 'http://app2_container:3001/remoteEntry.js'
};

const ModuleFederationPlugin =
new ModuleFederationPlugin({
remotes
});

// Lazily load apps

const App1Lazy = async () => {
const { App1 } = await import('app1/App1');
return <App1 />;
};

const App2Lazy = async () => {
const { App2 } = await import('app2/App2');
return <App2 />;

};