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?

Did you ever find a solution to this? – tallkid24 Feb 08 '21 at 23:30 — tallkid24, Feb 08 '21 at 23:30

score 3 · Answer 1 · edited Feb 21 '21 at 18:35

3

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.

edited Feb 21 '21 at 18:35

Dharman

30,962
25
85
135

answered Feb 21 '21 at 18:29

Minos

216
2
11

1

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 }, }` – oyalhi Sep 13 '21 at 19:20
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 ? – coma Nov 11 '21 at 06:42
I posted another alternative here: https://stackoverflow.com/a/73557391/12737833, very similar from what @oyalhi suggested :) – alexandre_anicio Aug 31 '22 at 14:24

score 2 · Answer 2 · answered Nov 11 '21 at 08:45

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.

answered Nov 11 '21 at 08:45

coma

165
2
10

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

2 Answers2

Linked