Federated Module Reloading.
Spend time building, not manually refreshing.
TL;DR We’ve released an alpha version of Federated Module Reloading, a Webpack plugin that keeps distributed applications in-sync when one of their components changes. Alongside FMR, we’ve also created the foundation for more MF developer tooling. We’re excited to show you what we have today and what is still to come.
Alpha version: https://www.npmjs.com/package/@module-federation/fmr
What is Federated Module Reloading (FMR)?
FMR is a Webpack plugin that keeps distributed apps up-to-date in the browser whenever one of their parts updates. For example: let’s pretend we’re building an app that consumes a footer component, which is coming from a different application over HTTP at runtime.
During local development, whenever the footer component updates, FMR plugin will automatically reload the browser window of all applications that consume the footer. Finally, no more manually refreshing all those tabs!
But wait! There’s more™. FMR plugin will work with any codebase built with Webpack, not just MF apps. Additionally, FMR will work hand-in-hand with mono-repo task runners such as Lerna and Concurrently.
Show me the demo!
In this example, there are three federated applications; dashboard (blue), nav (yellow), and footer (red). Each of our apps uses MF to consume pieces of the others. The goal is we want all of them to update whenever one changes.
First lets see what this is like without FMR
A change to the footer app is not propagated across consuming apps. Time to manually refresh ☹️.
With FMR
Changes to one application trigger updates to consuming applications. No manual intervention required 😀.
Alright! Much better. Now, how do we add this to our webpack apps?
- Download the FMR plugin and install it in your webpack.config.js: https://www.npmjs.com/package/@module-federation/fmr
From here, specify the name of your container as well as the port that this webpack server is hosting your app on and…
Tada! You now have FMR reload. 🔥🎉
How does FMR work?
Future State of FMR, Chrome Dev Tools.
In the near future, users of FMR can opt-in to the optional, and first-ever chrome extension designed for building distributed apps. With this extension, devs will be able to pick and choose which remote apps to receive updates from at runtime.
Show me the demo!
In the image below, our host app is running on 8080 (see purple text) and the host app is subscribed to updates coming from a remote container hosted on 8081. Clicking the toggle in the “Subscribe” column will subscribe or unsubscribe from updates coming from the build hosted on 8080. This can also go both ways, say if we want to block updates coming to 8081 from 8080. 🤯
How do I get this chrome extension?
Once google has approved this extension, users of FMR can opt-in to it by downloading the extension and specifying a third option in the FMR webpack plugin config called “standalone.” We set standalone option as false because it is the default behavior.
Towards a better DX
We’re passionate about making Module Federation easier and more enjoyable to use. Based on user feedback, we knew FMR was the perfect place to start.
There is a lot to look forward to when it comes to the future of Module Federation and the tooling that enables MF development. FMR reload plugin is only the beginning. In addition to adding more features to the chrome extension there is another item on our product roadmap that we would like to call-out, which is upgrading FMR to be closer to a “hot” reload experience.
Right now, we use the term live reload to describe the plugin. This is because while FMR reloader is a “live” reloader at the moment, we plan to incrementally work towards an experience closer to “hot” reloading.
With that said, we’re thrilled to release the alpha version of FMR while we continue to iterate. If you have any ideas about how we can make this tool better please let us know! Send me a note on twitter @alexux_ui. I’d love to hear your feedback 🙏.
Wrapping Up
That’s it for this update. For more info on the Module Federation ecosystem, stop by: https://module-federation.github.io/
For more MF code see: https://github.com/module-federation
Shout-out Zack Jackson for designing this feature, and many more to come!
