State Management for Module Federation Four Ways

[@Crevulus]

More architecture stuff, please! I think a lot of people come to your channel at an intermediate level. And to take the next step up in our careers, we're increasingly asked about how to architect apps, e.g. separating out layers so you just have dumb components in one layer, processing in another, data fetching in another etc. I'd really love to see some of your takes on how enterprise architecture works.

[@tarunsukhu2614]

When ever I need to refresh something Jack is the go to person. Thank you Jack.

[@jherr]

And I appreciate all your comments and your viewership! Thank you!

[@PauloSilva-um5wl]

Hey Jack. thanks so much. you explained so clearly how to implement this feature. I'd like to see more content about federation with next in complex app

[@sleepwalkergt]

Thanks for good ovwrview. One of options to consider as well - avoid shared state. And make it event driven, using things like custom browser events - to let apps share stuff when needed.

[@jherr]

IMHO in most cases the most shared state you need is enough user info to show in the header and the JWT. Everything else should be local to the Micro-FE.

[@FootballerThe10]

Please do a second part where you discuss the solutions for sharing states between apps that are from different frameworks.

[@StrayVegan]

Thank you so much for this lesson! Always very comfortable watching your videos! Keep on rolling!

[@KozaKrisz]

I haven't heard about Zustand before. Thanks!

[@KLR_OFFICIALS]

Thank you Amazing demo showing the strength of module federation!

[@bonarhymetechhub7786]

I appreciate the efforts you put into making this video. GOD bless you!

[@herbertpimentel]

OMG it is really pretty straight forward. I am all crazy to slice into mf some of my own projects. Thanks man, you always provide valuable content ❤

[@AliAbbas-vp4bm]

Great video! Actually all your videos on module federation are great. Looking forward to reading your (and Zach’s) book on it

[@danayudelevich2941]

Amazing, great demos showing the strength of module federation!

[@chope811]

Thanks for the video Jack - very informative 👍

[@mainendra]

Really good 👍Thank you. How about next video on module federation using vitejs or any other bundler (or mix and match if possible). Also how about using it in production and how to protect it? etc.

[@thiccboi6211]

I dont thnk using the Module federation plugin in Vite would be a good idea for any serious application since its officially supported by the author.

[@jherr]

I can do the production one. The protection one is simple, it has the same security footprint as a split bundle (federated modules are just JavaScript files and are deployed like any JavaScript file, to an asset store). As for Vite, I can't do Module Federation on that because it doesn't support it.

[@Sadaf_ziya]

Great video. Big help for our team. Thanks alot❤

[@somewonderfulguy]

Good for module federation that it can have shared the same instance. I wonder how to manage shared state in monorepo. It might be needed to share such things as theme, lang or other config between apps/modules. The only way I see this day is unfortunately is not very nice, but rather complex. You pass as prop object instance(s) and then you create in sub-application(s)/module(s) a context to share it through all app. I guess I'm going to try what I've wrote in Turborepo soon.

[@DaniloMongelli]

The best Dev chan!!! Thank you

[@bartoshdoesdev7212]

Thank you Jack! You have gift to knowledge sharing

[@rorymullan]

What is the plugin you used for code suggestion/ auto complete in VSCode. I know you told us but I didn't write it down at the time and can't find where you mention it. It looks fantastic. Excellent video. Thank you.

[@rorymullan]

GitHub Copilot - I see it's been asked. Thank you.

[@jherr]

GitHub Copilot.

[@svapnilraut4368]

Firstly great work @jherr , thank you for sharing this video, I only have a question on using useEffect to update the context post axios call and sharing the updated context to remote apps, what is happening is it only sharing the default context and not updated context post useEffect axios call.

[@ygormendes5885]

I have the same problem

[@sijjshawn]

Thanks jack for always bringing some informative videos . Much appreciate ur effort 💌

[@phucluu5919]

The content is very good but please check it carefully. The example in zustand state count doesn't change, and it doesn't seem to work well

[@phucluu5919]

Exactly, the state count in the nav is not synchronized with that of the host. Please, can you check it again?

[@kerrypatrick7702]

Great video! We ran into the same state problem with zustand where two modules couldn't share the same state instance, but we solved it by making the zustand library a shared dependency, like React, instead of adding the self-remote like you did in the video. Is there a disadvantage to our solution?

[@jherr]

That's fine as well. No disadvantage that I can think of.

[@NazrulMuhaiminRahmat]

Hey, I like this idea but I didn't know much on state management, I see Zustand can be much simpler with less code to setup, if you can guide me on how to do it same like what Jack was doing at the last section of the video, that would be much appreciated

[@jherr]

@@NazrulMuhaiminRahmat If you have specific questions about the implementation you can ask them on my Discord server discord.gg/txUYUADr in the #module-federation channel.

[@alexsuarez667]

Hi Jack! Outstanding presentation, as usual, I wonder if you can include NextJS in the Frameworks list?

[@jherr]

For create-mf-app? To me NextJS is a React framework. And unfortunately, at this time, it doesn't natively support Module Federation.

[@alexsuarez667]

@@jherr Thank you so much for the response! Hopefuly lastest versions using webpack 5 can allow this in some point. Thanks again que keep with the great job!

[@jherr]

@@alexsuarez667 There is a ticket you can thumbs up - github.com/vercel/next.js/issues/16368#issuecomment-1002482125

[@josevl4125]

hi great video. Could you made a video sharing the state between microfrontnds with react-query

[@muratasarslan2359]

Awesome 😎 Thank you Jack. What do you think about using Apollo Client cache in module federation?

[@jherr]

Should work just fine.

[@HolySl0w]

this is amazing and so elegant...

[@peigengjiang3021]

Hi Jack, thank you so much for this detailed video. I would like to ask a question. The idea of the module federation is the reusability and independently developable of these module federation components. If we reference state from these remote containers, will it impact the idea of reusable and independently developable? Because they will require either store or shell page to use the same state management library in order for the remote container to function. If so, is there a better way to manage states between these remote containers? Thank you very much.

[@jherr]

My recommendation is to use as little shared state between the modules as possible, often just user identity and the JWT. Using that model you can do everything with just props. But, that being said, there are ways to share state. It's doable, I just wouldn't recommend it. Or at least not recommend sharing large state stores.

[@mortezasabihi5159]

Thank you Jack. I'm looking for a way to use module federation in nextjs ssr/ssg applications. do u have any plan to create a video about this?

[@jherr]

When it's out, and apparently it is, so I nee to do some research here. ;)

[@ganaraj]

@@jherr Eagerly awaiting this - please do. Even if you can do a short video about framing the general problems of why its not as simple as doing 'create-mf-app' that would be great.

[@MrAtul2011]

hi jack..if we use redux toolkit inside both remote and host.. and if we import host inside remote then host state through redux toolkit doesnot work!

[@jherr]

IMHO, don't use Redux for MFEs.

[@poria3547]

Thank you for the nice Video. What is your VSCode's theme?

[@jherr]

Night Wolf [black] and operator mono.

[@varunc1231]

Great video! what shell and plugin are you using for your terminal?

[@jherr]

oh-my-posh with a theme of powerlevel10k_rainbow

[@varunc1231]

@@jherr thanks! Looks cool

[@sumanth3036]

Amazing.. loved it

[@vuluu4066]

Hi Jack. Thanks for sharing. Do you think using single store for a micro frontend application is a good idea? I mean that each micro frontend should has its own store to reduce the coupling.

[@jherr]

Absolutely. Every micro-fe should manage its own state and have very little state shared with other Micro-FEs. Probably just the user ID and API JWT.

[@miguelship3]

Hey Jack tahnks for the video, I have a question about the create-mf-app project, there is a text saying "These projects are not production complete. They are designed as lightweight projects that can be used to quickly prototype a new feature or library." Is this just a lib to build prototypes with mf or is it ok to start a project with this tool? Since create-react-app is deprecated I'm exploring some options and this is really optimal for the microfrontend project I'm starting, but I would like to know if I will face some issues with it in the future

[@failist9570]

I like your new look!

[@hk_build]

Great content 👍👍 What if I want to expose whole redux store from remote app how to do that....?? Since I want expose whole remote app along with store currently am only able to expose static hello world but not component which is connected to store...

[@shivashankargalla3326]

Hi Jack, impressive stuff as always. I have a question, I am developing a new application with MFE architectural style where we will have more than 5 micro apps all are developing using react and redux toolkit. What is the best way to communicate across 5 micro apps? RxJS/ReduxStore/LeanJS/EventBus/PropsCallback/windowObservable/others?

[@jherr]

Currently I think the best option is nanostores. The basic store types are agnostic to frameworks. And there are connectors to all the popular frameworks. Of course, I think it's important that the data you share is really limited to the smallest possible amount. For example, just the JWT for service access, and the user identity if that's required.

[@ShaggyKris]

Woah, what is that plugin you have for your terminal? How did you customized it what way?

[@jherr]

That's oh-my-posh. And the theme is powerlevel10k_rainbow. And the font is SpaceMono NF.

[@enmaboya]

cool of course, but the value that is passed to the remote application is set in the createContext. How do I share the value that I, let's say, get through the api?

[@jherr]

You have to get the original context so that you can do useContext on it, and that means having the host application, or some shared federated module, manage that context so that both host and remote can get the exact same context. That context could also be in a shared build time library through something like a monorepo.

[@shinmessiah]

Great and super interesting content!

[@chinoviteri7139]

Thanks for sharing your knowledge. I have a question. Lets just say there are 5 microfrontends and I want to develop a new one. Is it posible for the container app in the remote:{} to have all 5 microfrontends from a deployed url and one from localhost? Or do I have to download all the mfes and running everything in localhost? Thank you in advanced

[@jherr]

I'm not quite sure I follow your question. You should add a little more specificity when you post in the #module-federation channel on the Discord channel. Of course, be sure to read the #rules first.

[@chinoviteri7139]

​@@jherr sorry about that. Let me try again. In the host/container app webpack config can we have a mix of remote entries from deployed sites and localhost? Something like this const devConfig = { plugins: [ new ModuleFederationPlugin({ name: 'container', remotes: { // using remoteEntry from deployed URL 'auth-mf': '[e-mail]/remoteEntry.js', // using remoteEntry from deployed URL 'dashboard-mf': 'dashboard@mydashboardapp/remoteEntry.js', // using remoteEntry from localshot 'payments-mf': 'dashboard@localhost:8082/remoteEntry.js' } I have tried but I get a promise error. The reason I would do something like will be if I have 10 microfrontends and I want to develop a new one, I would download the repo for the container/host and work with localhost to develop a new one. Or do I need to download all the microfrontends and run all of them locally?

[@jherr]

@@chinoviteri7139 This would be a lot easier to talk through on the Discord server in the #module-federation channel.

[@sharadbhor88]

Hi Jack, I have authorization data using api call in my host app. I am including my remote app components into host app, and running my host app then state sharing is working fine. But when I individually run my remote app then Authorization data becomes undefined. Please suggest how I can fix this. Thanks in advance.

[@jherr]

Feel free to ask your question on the BCC Discord server discord.gg/BTSDq5xF but please read and follow the #rules first.

[@sharadbhor88]

@@jherr i have posted my question.

[@willurban837]

That's great, thank you so much for this video! =)

[@pradeepgorai5885]

Thank you Jack. Nice video and good explanation. I have one question. Can we do state management between Angular and react component?

[@jherr]

Yeah, you just have to pick a state sharing library that works across both. One suggestion would be RxJS.

[@pradeepgorai5885]

@@jherr Thanks Jack for quick reply. Could you please share some example explaining the same or if you have already any video created will be helpful for me.

[@jherr]

@@pradeepgorai5885 I don't have any examples of that off the shelf or in a video. Sorry.

[@MayOcampo]

Great video, thanks!! Question: Is there a way to use the "Redux" approach to share store between an Angular MFE and a React MFE? understanding that Angular uses NgRx instead of redux library directly. Thank you so much in advance

[@uome2k7]

seeing some content with MFEs with mixture of frameworks or even languages (angular, react, flask, django, svelte etc) would definitely be helpful but I think Jack is mainly a React guy. I was able to find some material on using React context in Angular though, so hopefully you have been able to as well. The module federation plugin should make this all fairly straightforward, the main difference being in how each implements the use of the shared store.

[@Ilovepelepenz]

How are you getting some recommendations when using terminal commands? I've seen your other videos that it's working on terminal and also on vs code terminal.

[@jherr]

Fig.

[@nabloler]

Nice one! What's the terminal theme?

[@jherr]

oh-my-posh with a theme of powerlevel10k_rainbow

[@louiefigz]

Hey! Thanks for this info! Very much appreciated and I have one question. When attempting to built this from scratch, I am getting an error similar to “Shared module is not available for eager consumption”. I’ve looked at your code and mine and I’m just having trouble finding out what I’m missing. I can add a new shared module to your existing code without any issues. Have you run into this issue?

[@jherr]

You need to bootstrap your index.js. So take the contents of index.js and put it in realIndex.js (or whatever). And then in index do `import('./realIndex');`

[@kwang3297]

Hi Jack, this was a super helpful video! Would it also work to pull the store out into a separate app using any of the other options, not just Redux?

[@jherr]

IMHO, the primary using/managing application should own the very small shared store that it exports for data that it shares with other applications.

[@gavinbonneville2993]

Just got v1.4 of your book two weeks ago. Can you reply with the Revision History for v2.0?

[@jherr]

v2.0.0 - 12/26/2021: Massive content overhaul and upgrade Updated all the code for all chapters Completely rewrote the introductory chapter Added a new chapter on using Create React App Added a new chapter on deployment Added a new chapter on non-React frameworks Added more state managers to the state management chapter Rewrote the code and copy for the CMS chapter Rewrote the code and copy for the Full Site Federation chapter Migrated all the examples to create-mf-app Cleaned up many inconsistencies across the chapters Re-structured the book to be more easily updatable

[@dtasevski]

Any thoughts on having the context in the remote app, which is then used by the host app? I'm not sure if that's a good idea or not, but I have a use case for it - multiple remote applications using the same context (different instances, tho), so in order to reduce code duplication I was thinking to put the Context code in the shared remote module.

[@Unnikrishnand-uberccooluk]

@Jack Herrington Awesome !! by the way is there any way to have a shared store like this along with a isolated store ? for example nav has its own exclusive store and host has a centralized store which is shared between both nav and host ?

[@uome2k7]

There should be no reason why this wouldn't work assuming the nav exclusive store was completely independent state from the centralized store. You can have as many providers as you desire within an application. Likewise, I dont see reason why you couldnt have multiple centralized stores being present from the 'store" app or from any number of other store apps. Obviously you would need to give them different names when you specify the remote.

[@hansmeyer2]

@9:50 ln5 how is it that div is accepting a class prop instead of className?

[@a-c-sreedhar-reddy]

Hi, How can we import modules via module federation in a typesafe way?

[@jherr]

I'll be covering that soon. It's not straightforward because, as with NPM modules, the built federated modules are just JavaScript. So you need to get the TypeScript types around through a build time process. In the meantime have a look at kzbin.info/www/bejne/fIWqiHx-abeffsk

[@itamar82]

How would you handle breaking changes between state or header props?

[@jherr]

Error Boundaries at runtime. Code Reviews before that. And if you are using TypeScript then using a build time NPM library of "contract" types to enforce the props and state.

[@cintron3d]

Have you looked at Piral? MF is cool, but I think I like Piral better for the bundler independence since I like Vite better than webpack. Also type safety.

[@jherr]

Have you looked at Single-SPA?

[@cintron3d]

@@jherr I have actually, I see Single-Spa as more comparable to Module Federation (both are good at helping you load JS modules), while Piral is a more "batteries included" kind of thing. I see now that my argument for Vite is nill. I really brought it up because my team and I are in the process of evaluating Piral against our home grown Single-Spa based architecture. I don't want to be locked in to webpack when Vite looks so much better, and I like how a lot of our current pain points are solved problems in Piral. Not that we couldn't solve them in MF or SingleSpa too. I'm just curious if you have any experience with Piral and if there are any red-flags you see with it?

[@jherr]

@@cintron3d I checked Piral out a lonnng time ago, haven't looked at it since. Sounds like I should give it another look. Until I do that I don't think I could give you an honest answer one way or the other on it.

[@RishiAnand-wo1qt]

Thanks Man

[@mahendranath2504]

Thank you so much 👍🏼🎉🙏⭐

[@peripona]

Crisp Thanks

[@pramoddevaraj82]

Hello Jack, im trying to implement this in next js 13. But the problem is shared Store is not in sync. ie host app has updated state and trying to fetch that store in MFE and it has initial state instead of updated state. Please let me know if I'm missing anything. Also added zustand inside shared in module federation plugin

[@jherr]

Are you talking about two different deployed applications? Module Federation won't synchronize a store between two different sites. Module Federation shares code, not state.

[@ozzolim]

Hello Jack, nice content. I have tested your solution and i would like to know why state is not reflected into the nav app when we click on add to cart button? i see that the dispatch goes to the store app but each app has his own values. Can we really have one store app that renders automatically our components even if they are not plugged into another app?

[@jherr]

Oh, because those are two separately deployed applications that are sharing code, but not running state.

[@ozzolim]

@@jherr thank you for your quickly response. Is there a way that we can share running state?

[@jherr]

@@ozzolim You'd have to use traditional state sharing mechanisms. Rest APIs, GraphQL APIs, service APIs like Firebase or Supabase. Module Federation shares code. That's all. It doesn't handle routing, or state management, or any of that. It's just about sharing code.

[@Gil707]

Is it possible to use redux store not only in separate app, but also in another module app (host, checkout...). I mean merge local store from host for example with global store from store app in one store into the provider?

[@jherr]

It is possible but I wouldn't recommend it it. IMHO the state of micro-frontends should be self-contained.

[@Gil707]

Agreed,..but i have some global store in entry of all apps and it has some context data (dates, user), each module wonder to use these properties, (and able to change dates for example), and also has own store. Each module should have some specific data, but allow to read and change some global parameters...

[@jherr]

@@Gil707 Cool, so why do you need to merge the local and global scope? Just use the local scope when it's something specific to the MFE, and global when it's that small amount of data you need globally.

[@bastiboydiaz7]

why did you import react even in component didn't use it, like header?

[@prathapreddy244]

Hi @Jack, is there a way to share context from nav to Host ?

[@jherr]

React Context works just fine. The trick is in getting to the right context object. So one of the remotes needs to share the context so the other remotes can consume it because it has to be the EXACT SAME OBJECT not the exact same code. Another option is to put it in a shared NPM library. And make sure that all the projects have it in `shared` and have the right version and have it marked as a singleton. The plus with that approach is that it's good for TypeScript.

[@hitendrapatil9991]

I believe this content and awesome explanation is not even going to be provided in a paid course. 👌😂 Thanks Jack 🙌

[@dattaghadage-r2u]

in nested routing when i refresh the page then page looking blabk white page???

[@nightmoves]

How would you do the useStore hook if the redux store is split into different slices? In this video there is only a single slice. I am wondering about how I should approach splitting up my app which has multiple slices. Each slice exposes actions and a reducer. So should I move the useStore and provider exports into a different file and import all actions in that file? Or is there a cleaner way to do this?

[@jherr]

You just have multiple hooks. One per slice.

[@quocvunguyen688]

HI Jack, I wonder how 2 MFE apps could share the same store in the Redux example. As I know that Store MFE app just pass to nav and host the js code and nav (or host) will use this js code to create its store variable (I mean store in nav and host will have the difference memory address) so they can't reference to the same store, fix my if i'm wrong. Could you explain it?

[@jherr]

I recommend against having MFEs share large Redux stores. That creates a lot of inter-dependence.

[@vasiloconnell281]

The best

[@beinspired9063]

Is it possible to fetch data from header mfe to host mfe? If yes, then how?

[@shahzaibimran2662]

Is this possible to use redux in nextjs V12. As I have implemented but it stopped the SSR.

[@techknowledgebase4504]

Great. Can we use MF with Nextjs? Can you do same nextjs

[@jherr]

You can do NextJS client side with a pay for extension. And I think zack is coming out with an SSR plug-in soon.

[@sijjshawn]

@@jherr Its already out there Jack but with a paid version :-)

[@jherr]

@@sijjshawn Right, client client side version is out there as a paid for plugin. I haven't seen an SSR extension. If you have, please provide a link.

[@MrAtul2011]

hi jack, how we can expose mixins functions in scss files across MFE ?. I am not able to expose them.

[@jherr]

Module Federation in webpack doesn't do CSS.

[@yepyep5927]

I'm having problems with redux when dispatching an action (which contains an API call) in a useEffect hooks which depends of a state inside my store. Infinite loop. I'm exporting my global state (useSelector(state => state)) and my useDispatch from the useStore custom hooks

[@jherr]

You should jump into the discord server and post your question there. But be sure to read the #rules first so that your question is structured in a way where it can be answered easily.

[@yepyep5927]

@@jherr Thanks! Didn't know about it

[@ness-ee]

I think what’s stopping me from using this over a monorepo is that it doesn’t have semver

[@androidgeeking]

Is Practical Module Federation an ebook?

[@jherr]

Yes.

[@irvinwaldman4233]

Yes

[@androidgeeking]

@@jherr Awesome. Just purchased.

[@jherr]

@@androidgeeking Thank you!!!!

[@redda2]

Examples with Angular plz

[@jherr]

kzbin.info/www/bejne/e6utd2N_itSMnrM

[@jpmc4715]

It's magic

[@onlywilddrift9506]

gold

[@ИльяИваник-ф8ф]

What if you need a real-world application? With FSD, RTK Query and other complicated things. Your approach works only on this primitive example.

[@CODEWITHSPEED]

Can you be my coach