In previous post, we discussed what is micro-frontend architecture and its pros and cons. In this post, we'll go through the steps required in setting up the project - how to initialize the main container app and a sample module using React.
We'll assume that our complex app needs some booking functionality. let's start with one module (booking-module) and a container(or master) app
Initialize Booking module with
npx create-react-app booking-module
cd booking-module && npm start make sure everything is working as expected.
Create a Counter component which will be exposed to main container app.
// src/Counter.js import React, { useState } from 'react' const Counter = () => { const [count, setCount] = useState(0); const handleIncrement = () => setCount(count + 1); const handleDecrement = () => setCount(count - 1); return ( <div className='counter'> <h3>This is Counter App Module</h3> <p><strong>{count}</strong></p> <div> <button onClick={handleIncrement} className='counter-btn'>+</button> <button onClick={handleDecrement} className='counter-btn'>-</button> </div> </div> ) } export default Counter; Update your App.js
import './App.css'; import Counter from './Counter'; function App() { return ( <div className="App"> <h3>This is Booking module</h3> <Counter/> </div> ); } export default App; Next step: Introduce webpack
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin
Create webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin; const deps = require('./package.json').dependencies module.exports = { mode: 'development', devServer: { port: 8082, }, output: { filename: 'main.js', }, module: { rules: [{ test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: [ '@babel/env', ["@babel/preset-react", {"runtime": "automatic"}] ] }, }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }], }, plugins: [ new ModuleFederationPlugin({ name: "bookingModule", filename: "remoteEntry.js", remotes: {}, exposes: { "./Counter":"./src/Counter.js" }, shared: { ...deps, react: { singleton: true, requiredVersion: deps.react, }, "react-dom": { singleton: true, requiredVersion: deps["react-dom"], }, }, }), new HtmlWebpackPlugin({ template: './public/index.html' }) ] }; Here ModuleFederationPlugin will expose your components as a separate bundle. Note - name field inside ModuleFederationPlugin will be used while importing components, so make sure you have a unique module name.
We exposed Counter component like this
exposes: { "./Counter":"./src/Counter.js" } Multiple components can also be exposed just like
exposes: { "./Counter":"./src/Counter.js", "./Timer":"./src/Timer.js" }, Next Step -
npx webpack serve - this will run your module instance on given port. 8082 in my case
Restructure your module's entry point file.
By default, src/index.js is the entry file and it contains multiple import which creates problem while building bundle
Modify src/index.js file as follow -
import('./bootstrap') Create bootstrap.js file with following content -
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); Initialize Main Container app
npx create-react-app container
cd container
Install Webpack dependencies
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin
Create webpack.config.js file
const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin; const deps = require('./package.json').dependencies module.exports = { mode: 'development', devServer: { port: 8080, }, output: { filename: 'main.js', }, module: { rules: [{ test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: [ '@babel/env', ["@babel/preset-react", {"runtime": "automatic"}] ] }, }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }], }, plugins: [ new ModuleFederationPlugin({ name: "container", remotes: { bookingModule:"bookingModule@http://localhost:8082/remoteEntry.js", }, exposes: { }, shared: { ...deps, react: { singleton: true, requiredVersion: deps.react, }, "react-dom": { singleton: true, requiredVersion: deps["react-dom"], }, }, }), new HtmlWebpackPlugin({ template: './public/index.html' }) ] } We are now telling webpack to import module from this url and multiple modules can be imported similar to how we did in booking module.
remotes: { bookingModule:"bookingModule@http://localhost:8082/remoteEntry.js", }, Now you are ready to consume booking-module's component, but before we need to change the entry point of the project similar to how we did in booking module.
create a bootstrap.js file with content
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); modify index.js file as below
import('./bootstrap') Now import Counter from booking module and consume component
import Counter from 'bookingModule/Counter'; function App() { return ( <div className="App"> <h3>This is Container App</h3> <Counter/> </div> ); } Output:
Top comments (0)