MF Live Reload Plugin

Installation

1. Download this package as a dev dependency

``shell
> npm i -D @module-federation/fmr
`

2. Add the plugin to your webpack plugin configuration

`javascript
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.

`shell
> 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.