Live Reload by Webpack-Dev-Server when editing a Federated Module

Question

I am working on an app leveraging micro-frontends with the Webpack Module Federation.

My "host" app provides a login screen and a layout with menu, header and footer. My "modules" are sections of my app that accessible by a click on a menu's item.

While my default view is the "host" app, most of the work will be done in modules. The problem I am facing is that once I change a remote module's code - the app (host that I am looking at) does not live-reload which makes developer experience not as comfortable.

I could open the module individually (on its own port) and the live-reload will work but it is not a good developer experience for me as well because I'd like to see the whole picture, not only the sub-app (micro-frontend).

Is there a way to let the host know that a module has been changed and the reload should occur?

Answer 1

I don't know if you found a solution, I had the same problem and I managed to solve it using Chokidar.

here, "mf-sectors" is the folder of remote app

You need to install chokidar with npm (or yarn)

in webpack.config of host app :

const chokidar = require('chokidar');

[...]
module.exports = { 
  devServer: {
      contentBase: path.join(__dirname, "public"),
      port: 3001,
      hotOnly:true,
      open:true,
      overlay: false,
      after: (app, server) => {
        chokidar.watch(
          [path.resolve(__dirname, '..', 'mf-sectors', 'dist')]
        ).on('all', () => {
          server.sockWrite(server.sockets, 'content-changed');
        });
      }
   },
}

And in the app remote webpack config :

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, "public"),
    port: 3002,
    writeToDisk: true,
  },
  output: {
    publicPath: "http://localhost:3002/",
  },
}

With this, chokidar will look at the contents of the "dist" folder of your app remotes and will rebuild the app host right afterwards.