Full Site Federation in Webpack 5

When we moved from monoliths to micro-sites we lost out on easy code sharing, single page applications, and it made it much harder to end-to-end test, and to understand the system as a whole. See how Module Federation brings all that back while still maintaining the ability to independently deploy applications.

#webpack-5 #module-federation #react #spa #monolith #micro-site

[AaronRoberson]

This is absolutely amazing! Still picking it apart but.. wow! Really appreciate all of the diagrams too. My north star looks like this but with SSR with fragment chunking, streaming, and cacheing from S3, as well as dynamic system remotes.

[matthew]

Really appreciate all the effort here. The shared routing layer for independent apps into a SPA experience is amazing. Going to try my best to implement this use case for work.

[klub]

Amazing! Can't wait for SSR support.

[clublati]

Jack, I'm loving your videos! Great stuff, very interesting and well-put-together. No non-sense. Just pure goodness.

This is massive, rock solid. Straight to the repo!

[OussamaElkhalifi]

I'm loving your videos. really appreciate all the effort here. Thanks for sharing. I have some questions :
- How we can share a common ui components used by more than one application ?
- How we can handle SSO with multiple application
- Do we need to extract the store and common ui component into a separate shared federated module ?

[PaweWaszczynski]

Awesome stuff Jack! Just to be clear that I understand correctly: this fully federated sites looks awesome, but the requirement tradeoff is that all MFEs must have always up-to-date & the same module federation configuration (all remotes, sharing etc). This is more cumbersome compared to single Shell MFE that loads them. E.g introducing new remote / MFE would require updates in all MFEs, if you have dozens on MFEs in separate repos that could be hard to align. Is it worth compared to single shell MFE approach?

[ayrtonmercury]

Would there be any issues if the sites had bffs/csrf cookies and had to call home, given that the client code is hosted at another URL?

[nonen]

Great video, thanks. I found your content and it has been a blessing. I am curious about sharing store across subdomains, isn't that coupling? For a simple cart number increase, it seems to work, but what about a larger application?

[kobrakalle]

Thanks a lot for your videos, Jack. I really enjoy watching them. Module federation is something that I have been wanting for a long time. Been struggling to get this to work with vuejs though. Seems like the vue-loader is not compatible with wp5 yet. Have you tried getting this to work as well. Would love to see a video how that can be done using vuejs.

[francisarant]

Looking at the linked code, I'm curious is there a reason you are using ScriptedAlchemy's fork of html-webpack-plugin? Great videos! I appreciate your content.

[prashantkandathil]

Hey Jack, may be you already covered this but how do you deal with environment variables. Assume your logic component requires some env variables, do they get packaged and sent to the consumers of the modules?

[mmmmmmm]

This was great. The dashboard is so impressive. I have a gap understanding the deployment concept. I see one spa like project w/home, hosting the other modules like cart, etc. The gap is with docker or cloud deployment i suppose ... is it possible to have home in one repo, cart in a 2nd, both running in cloud on separate docker containers, then module federation can link them together as a cohesive whole? Instead of hosting all modules home, cart, etc in one repo, is it possible to host in separate repos, separate cloud containers, then have module federation bring them together in a spa like experience in browser? Sorry, im sure this is covered in the book, or other areas. I do see the wp5-starter kit does have docker configuration file and scripts in package.json, just trying to understand the docker side.

[noherczeg]

How would you orchestrate your index.html in production? Would it be in a separate repo / artifact? Does it work with importmaps?

[designgods]

Jack, thank you for these videos. They have been great companions to the book chapters. In one of Zack's Medium posts, he mentions the ability to do versioning of remotes. Is there a way to do this through some advanced remotes API? I would like to be able to specify an unreleased version of a remote for manual or E2E testing before promoting it to full. Or just to lock a specific version of a remote regardless of other updates coming along from the remote app.

[EveryDayAIProgrammer]

Wonderful video we are already running a MFE using Single SPA so what do u think in ur honest opinion about other frameworks in future because i see i can do all the stuff with just React router and module federation

[vitormalencar]

Amazing video Jack, one question, there is this concept of not creating dependencies between microservices, what is your opinion about creating dependencies on micro-front-ends?
sharing the redux-store to me seems to make a lot of sense, but wouldn't that create a dependency between these micro-front-ends?

[manansoni]

Hey jack! I really like your content! Its full of informatio. I want you to make one video on webpack production config and development config also add how to setup async await in that!

[Biscuit]

Hi there. I was trying to run this code, but there seems to be some build errors. Can you confirm this? Would really like to play around with this...

[Wakkyguy]

Is the "library" property now removed from Module Fedearion Plugin?