Micro Front-End: Module Federation


What is Module Federation? 

To understand Module Federation, we need to first know some basics of webpack: Webpack Basics

Now that we know that webpack 

  1. bundles all the source files 
  2. the bundled files sits in a /dist folder (or as configured in webpack.config.js)
  3. We need to add plugins if we need to bundle HTML files
  4. We need to add "rules" if we need to bundle CSS files
  5. Just like how we had to add a special plugin to bundle HTML files, we also need a special plugin for Module Federation

Basic idea behind Module Federation

  1. An app can have multiple "micro apps". Each containing its own "package.json".
  2. Each of these apps run on their own in their own port.
  3. These apps can still share some code and talk to each other.
  4. To summarize, each of these apps can expose certain modules and consume certain modules
  5. They share these modules at runtime. They don't depend on the contents of the "dist" folder

GITHUB

EXAMPLE


Create 2 folders (remote-app, host-app)

In each of these folders

  1. Create a blank HTML, JS, webpack.config.js files in each of these folders
  2. npm init -y
  3. npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
  4. In package.json file add a new script => "build": "webpack"

Contents that go in these files

In both the index.html files
<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script src="bundle.js"></script>
    </body>
</html>

remote-app\remoteModuleIndex.js
//A simple Module that exposes a function
export function remoteModuleGreet() {
  return "Hello from remote module!";
}

host-app\index.js
import("remoteApp/Module").then((module) => {
    document.body.innerHTML = module.remoteModuleGreet();
})

Finally comes the WebPack config. 

  1. Host app consumes the remote module dynamically.
  2. Remote app exposes remoteModuleIndex.js as ./Module

host-app\webpack.config.js

const path = require("path");
const { ModuleFederationPlugin } = require("webpack").container;
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: "development",
  entry: "./index.js",
  output: {
    publicPath: "http://localhost:8080/",
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "hostApp",
      remotes: {
        remoteApp: "remoteApp@http://localhost:8081/remoteEntry.js",
      },
    }),
    new HtmlWebpackPlugin({
        template: './index.html',  
        filename: 'index.html'
    })
  ],
  devServer: {
    port: 8080,
    host: "0.0.0.0",
    static: path.join(__dirname, "dist"),
  },
};

remote-app\webpack.config.js

const path = require("path");
const { ModuleFederationPlugin } = require("webpack").container;
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: "development",
  entry: "./remoteModuleIndex.js",
  output: {
    publicPath: "http://localhost:8081/",
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "remoteApp",
      filename: "remoteModuleIndex.js",
      exposes: {
        "./Module": "./remoteModuleIndex.js",
      },
    }),
    new HtmlWebpackPlugin({
        template: './index.html',
        filename: 'index.html'    
    })
  ],
  devServer: {
    port: 8081,
    host: "0.0.0.0",
    static: path.join(__dirname, "dist"),
  },
};

Now, host app runs on http://localhost:8080/

Remote app runs on http://localhost:8081/

Finally in both the apps, run 

  • npm i
  • npm run build
  • npx webpack serve --mode development




Comments

Post a Comment

Popular posts from this blog

Inside the JavaScript Memory Box: Visualizing Variables, References, and Copies

Image
There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...
Read more

React & State Management: All Concepts

Section 1: Fundamentals 1. Counter with increment, decrement, reset — useState Remember: prev is needed when the new state depends on the old state. When you're setting a hardcoded value like 0, you just pass 0 directly. Why:  reason prev matters — if multiple state updates happen in the same render cycle, React batches them. Using prev guarantees you're working off the latest state, not a stale snapshot. 2. Toggle show/hide paragraph — useState Remember: onClick={toggle} — pass the function reference, not the call. onClick={() => toggle()} — also fine, arrow function that calls toggle when clicked. onClick={toggle()} — calls toggle immediately during render, setVisible triggers re-render, toggle calls again, infinite loop. Why: JSX evaluates expressions inside {} during render. toggle() is an expression that executes immediately. React doesn't get a chance to attach it as a handler — it just runs it right there, state updates, component re-renders, runs again. ...
Read more

React: Communication between components

Parent to Child: Props Child to Parent Callback Props (advanced props) Controlled Components useImperative hook  Nested Tree: useContext Sibling: Lift State Up PARENT TO CHILD: Props App.jsx Users.jsx <User name ={user} /> function User({ name }) {  return <h1> {name} </h1> } CHILD TO PARENT a) Callback Props (Advanced Props) Parent.jsx Child1.jsx export function Parent() {   function sayHello () {     alert(“hello triggered”)   }   <Child1 onSayHello ={ sayHello } /> } function Child1({ onSayHello }) {   return <button onClick={ onSayhello() }>          Click       </button> } b) Controlled Components Usually used in forms. Controlled components mean the parent owns the state, the child renders inputs, and every ch...
Read more