Micro frontends - Module Federation runtime, plugins, dynamic remotes and preloading

[@StingSting844]

I really like the pace. It feels like you actually want the users to understand module federation well! Been watching all your videos top G. Keep going!

[@russellcanfield]

Thanks! The videos to me always feel long but I try to walk through doing the work. I appreciate it.

[@StingSting844]

@@russellcanfield IMO the module federation videos are primarily for us senior devs and slower pace is good for us.

[@markcampbell2491]

Any chance you could provide a tutorial for configuring a react host application that can load standalone remote Angular mfes as routes in nx? I can't find anything anywhere else that makes sense

[@mayank.agrawal]

Can we also import cross platform, Like Host in React and One MF is on Angular with Module Federation 2.0 ?

[@russellcanfield]

Yes you can, check out the official examples

[@tranvansi6302]

I'm wondering if the authentication part should be separated into an MFE or left on host. Thanks bro

[@russellcanfield]

I would let the host handle the majority of the work, login, token renewal, etc. and remotes should just have access to the tokens/general auth state. Few ways to share the state, but you don’t want multiple consumers trying to perform refreshes

[@tranvansi6302]

@@russellcanfield If I separate an auth MFE, is there any problem? In my case, I will manage the app host and the members will work on a separate MFE. If there is an MFE that needs authentication, I can remote to the auth MFE, but is there any problem?. Thank bro ❤❤❤❤❤❤

[@russellcanfield]

@@tranvansi6302 you probably could, I’ve used packages for it usually and shared them as singleton. But it could be a MFE I suppose, you’d just need to be careful controlling versions

[@tranvansi6302]

@@russellcanfield Thanks for the great answer

[@moristar]

Great video, helped me a lot. However there is one scenario I struggle with. I want to be able to dynamically register remotes and then reload the module so that it now displays my other newly registered module. It works well on the federation side, however the module itself stays put and doesn't update (no matter if I use Suspence or not. Would it be interexsting for you to explore this scenario? The idea is to create a system with dynamic plugins that can be registered and deregistered at any time, so the client gets updates on currently active plugins and lets the user choose a plugin with automatic refresh of the plugin widget area. It's very easy to do with an iFrame, but it's a much more heavy solution.

[@russellcanfield]

@@moristar maybe introduce some sort of simple state, that when it registers it will update and trigger a re-render

[@moristar]

​@@russellcanfield I almost gave up until I realized that my two widgets have the same name in the rspack config :) It seems that if the modules have the same name where they were defined it will still work on the consumer side, but only for the first assignment and after that it will be stuck on the first remote no matter what. Here is the sample code for the module consumer. import './App.css'; import { lazy, useState, Suspense } from 'react'; import { loadRemote, registerRemotes } from '@module-federation/enhanced/runtime' const App = () => { const [CurrentWidget, setCurrentWidget] = useState(() => null); const [port, setCurrentPort] = useState(() => 3001); registerRemotes([ { name: "widgets", entry: "localhost:3000/mf-manifest.json" }, { name: "widgets_new", entry: "localhost:3001/mf-manifest.json" } ]); const reloadWidget = async () => { if (port === 3000) setCurrentPort(() => port + 1); else setCurrentPort(() => port - 1); const widgetName = 'widgets'+ (port === 3001 ? '_new' : '') + '/button'; console.log('Port: ' + port + '. Reloading from: ' + widgetName); setCurrentWidget(() => lazy(() => loadRemote(widgetName))); console.log(CurrentWidget); } return ( Rsbuild with React Start building amazing things with Rsbuild. Reload {CurrentWidget && } ); }; export default App;

[@AlanRutter-h2m]

Thanks Russell, these are excellent videos. I have been trying to use Nx for module federation, this seems easier to understand. There are two areas though that I can't find any decent information about anywhere that you could make a couple of videos following on from this. So let's assume I have a host and multiple remotes running perfectly on my localhost but now I want to deploy them into another environment, like Azure Container Services using Docker. Firstly - what is the CORRECT way to dockerize and deploy them and secondly, how can we use the features here to switch the paths to remotes between dev (localhost) and different environments (e.g. staging or production).

[@russellcanfield]

Thanks! So you probably want to avoid dockerizing a react app, I would say put them in Azure Storage under separate folders inside a Container and drop a CDN infront of it. It's likely cheaper and easier to deploy; plus no vulnerabilities in docker images and managing NGINX inside of the image to serve the static content. Then deciding which remote to load involves either "hard coding" them at build time in the host. Or use a dynamic loader which allows you to make HTTP calls and pass in user information or hit some configuration service to retrieve the URL, then pass that down into federation. If it's v2 federation, you can call registerRemote with the URL, then loadRemote after :)

[@AlanRutter-h2m]

@@russellcanfield - not sure how to do that. BTW It's an Angular 18 application.

[@pouryaghazizadeh8027]

thanks alot for your video please make more video about micro frontend

[@russellcanfield]

Sure thing!