MF Live Reload Plugin

Installation

1. Download this package as a dev dependency

> npm i -D @module-federation/fmr

2. Add the plugin to your webpack plugin configuration

const { ModuleFederationPlugin } = require("webpack").container;

// import the plugin
const { MFLiveReloadPlugin } = require("@module-federation/fmr");

module.exports = {
  //...webpack configs
  plugins: [
    // configure the plugin
    new MFLiveReloadPlugin({
      port: 8081, // the port your app runs on
      container: "dashboard", // the name of your app, must be unique
      standalone: false, // false uses chrome extention
    }),
    new ModuleFederationPlugin({
     // ...module federation configs
    }),
  ],
};

3. Install the chrome extension Module Federation Live Reload (currently under review) - you can use standalone:true

4. Start your webpack development server and if everything goes according to plan, you should see this output in your console.

> MF - starting server
> MF - connecting to containers

API

The API for this plugin consists of three configs:

1. port: this is the port that your application is hosted on
2. container: this is the name of your Module Federation container
3. standalone: use this plugin without the MF Dev Tools chrome extension. This config option defaults to true, so if you would like to use the MF Dev Tools chrome extension, you will need to set standalone: false in the MFLiveReloadPlugin config.

Trouble-shooting

Sometimes a browser refresh may be necessary to open a socket connection to the MF Live Reload dev server.