Luca Del Puppo
Luca Del Puppo
Luca Del Puppo
Love sport: running, hiking
Love animals
Context
Context
Context
Context
Context
Micro Frontend is a type of architecture in which a web application is divided into different modules or individual functions, implemented autonomously.
This allows frontend teams the same flexibility and speed that microservices provide backend teams.
Header
Footer
Wall
Ads
Requests
Landing
Sign in
Sign up
Catalog
ORIGIN
CDN
CLIENT
ORIGIN
CDN
CLIENT
R
R
R
R
Header
Wall
Ads
Requests
Footer
Header
Wall
Ads
Requests
Footer
WebStorage / Cookies
Query String
Module Federation is an architectural pattern for the decentralization of JavaScript applications. It allows you to share code and resources among multiple JavaScript applications (or MFE).
This can help you:
⚡ Code sharing & Dependency reuse
📝 Manifest
🎨 Module Federation Runtime
🧩 Runtime Plugins System
🚀 Dynamic type prompt
🛠️ Chrome Devtool
🦀 Rspack and Webpack Support
Producer (Remote)
Consumer (Host)
An application that exposes other modules to be consumed by other JavaScript applications through the Module Federation build plugin with the exposes configuration is referred to as a Provider (Producer) in Module Federation.
A Producer can also act as a Consumer.
// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
export default defineConfig({
server: {
port: 3000,
},
dev: {
// It is necessary to configure assetPrefix, and in the production environment, you need to configure output.assetPrefix
assetPrefix: 'http://localhost:3000',
},
tools: {
rspack: (config, { appendPlugins }) => {
// You need to set a unique value that is not equal to other applications
config.output!.uniqueName = 'federation_provider';
appendPlugins([
new ModuleFederationPlugin({
name: 'federation_provider',
exposes: {
'./button': './src/button.tsx',
},
shared: ['react', 'react-dom'],
}),
]);
},
},
plugins: [pluginReact()],
});An application that consumes modules from other Producers through the Module Federation build plugin with the remotes configuration is referred to as a Consumer (Consumer). A Consumer can also act as a Producer.
// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
export default defineConfig({
server: {
port: 2000,
},
tools: {
rspack: (config, { appendPlugins }) => {
appendPlugins([
new ModuleFederationPlugin({
name: 'federation_consumer',
remotes: {
federation_provider:
'federation_provider@http://localhost:3000/mf-manifest.json',
},
shared: ['react', 'react-dom'],
}),
]);
},
},
plugins: [pluginReact()],
});new ModuleFederationPlugin({
name: '@demo/button',
shared: {
react: {
singleton: true,
requiredVersion: '~18.2.0',
eager: true,
},
},
//...
});import './App.css';
// The remote component provided by federation_provider
import ProviderButton from 'federation_provider/button';
const App = () => {
return (
<div className="content">
<h1>Rsbuild with React</h1>
<p>Start building amazing things with Rsbuild.</p>
<div>
<ProviderButton />
</div>
</div>
);
};
export default App;Webpack
Rspack
Rsbuild
@puppo92
Luca Del Puppo
Puppo_92
@puppo
By Luca Del Puppo
