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?

Stimulus

Did you ever find a solution to this? – Evolution

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.

Ics

don't necessarily need chokidar. we can utilize watchFiles property of devServer. So, in the host, removing after and replacing it with watchFiles: [path.resolve(__dirname, '..', 'mf-sectors', 'dist')] should suffice. And for the remote I had to use devServer: { devMiddleware: { writeToDisk: true, // needed for HMR }, } – Demaggio

With this solution, the remote app's update will cause full reload instead of hmr.Is there a solution to keep hmr in remote app ? – Lumbago

I posted another alternative here: https://mcmap.net/q/1796612/-webpack-module-federation-hot-reloading-between-apps, very similar from what @Demaggio suggested :) – Selfgovernment

Answer 2

https://github.com/facebook/create-react-app/pull/11325

Found a solution to use HMR between sub applications.

Add CORS headers at webpack-dev-server's config.

Lumbago