React Micro Frontend Application With Module Federation: A Step-By-Step Guide
Introduction:
Module Federation, a powerful feature introduced in Webpack 5, allows developers to load separate bundles of code at runtime, making it an ideal choice for implementing micro frontend architecture. This article will guide you through the process of creating a React micro frontend application using Module Federation, with a focus on providing clear code examples. We’ll also discuss the pros and cons of using Module Federation for your micro frontend application.
Step 1: Set up a new React project with Webpack 5
- Create a new directory for your project and navigate to it:
mkdir react-module-federation
cd react-module-federation2. Initialize a new npm project:
npm init -y3. Install the required dependencies:
npm install react react-dom webpack@5 webpack-cli webpack-dev-server html-webpack-plugin4. Create a ‘src’ directory and an ‘index.html’ file:
mkdir src
touch src/index.html5. Add the following content to ‘src/index.html’:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Module Federation</title>
</head>
<body>
<div id="app"></div>
</body>
</html>Step 2: Configure Webpack for Module Federation
- Create a ‘webpack.config.js’ file in the project root:
touch webpack.config.js2. Add the following content to ‘webpack.config.js’:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
publicPath: 'auto',
},
devServer: {
port: 3000,
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new ModuleFederationPlugin({
name: 'mainApp',
remotes: {
microApp: 'microApp@http://localhost:3001/remoteEntry.js',
},
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: 'babel-loader',
},
],
},
};Step 3: Create a micro frontend application
- Navigate to the project root and create a new micro frontend application:
npx create-react-app micro-app --template cra-template-pwa2. Change the ‘micro-app/package.json’ file to include the following scripts:
"scripts": {
"start": "webpack serve",
"build": "webpack --mode production"
}3. Update ‘micro-app/webpack.config.js’ to include the following plugins:
// ...
plugins: [
// ...
new ModuleFederationPlugin({
name: 'microApp',
filename: 'remoteEntry.js',
exposes: {
'./MicroApp': './src/App',
},
shared: ['react', 'react-dom'],
}),
// ...
],
// ...4. Update ‘micro-app/src/index.js’:
import React from 'react';
import ReactDOM from 'react-dom';
import MicroApp from './App';
if (process.env.NODE_ENV === 'development') {
ReactDOM.render(<MicroApp/>, document.getElementById('root'));
}
export default MicroApp;Step 4: Integrate the micro frontend into the main application
1. Create an ‘index.js’ file in the ‘src’ directory:
touch src/index.js2. Add the following content to ‘src/index.js’:
import React from 'react';
import ReactDOM from 'react-dom';
import MicroApp from 'microApp/MicroApp';
ReactDOM.render(
<React.StrictMode>
<MicroApp />
</React.StrictMode>,
document.getElementById('app')
);3. Start the micro frontend development server:
cd micro-app
npm start4. Start the main application development server:
cd ..
npm startPros:
- Built into Webpack 5, no additional libraries needed
- Allows sharing of dependencies between applications
- Improves performance by reducing bundle size
Cons:
- Requires Webpack 5
- Less mature compared to single-spa
Conclusion:
This step-by-step guide demonstrates how to create a React micro frontend application using Module Federation with Webpack 5. Module Federation offers a powerful way to implement micro frontend architecture, enabling code sharing and reducing bundle size. However, it requires Webpack 5 and is less mature compared to alternatives like single-spa. By evaluating the pros and cons of Module Federation, you can determine if it is the right approach for your micro frontend application.
Don’t forget to clap 👏
Happy coding 🚀
