Single Spa + Federated Modules = Wow!

What do you get when you put Single Spa and Federated Modules in Webpack 5 together? Any framework on any app in a way that makes it much easier to maintain.

Hope you folks enjoy this!
👉 If you enjoy this video, please like it and share it.
👉 Don't forget to subscribe to this channel for more updates.

#single-spa #federated-modules #module-federation #webpack-5 #react #javascript

[edarioq]

Would love to see this with Angular and React

[jeronimocarrizo]

What a beautiful video and your advice at the end, really nice job Jack! Really Inspiring!

[jemesmemes]

NGL, i did the thing people do where something they _were_ watching became background noise and I got jolted out of space-out mode by hearing "OINK OINK SQUEEK SQUEEK" with no context XD

That was helpful lol, gonna watch again with no distractions this time :)

[mirceabereveanu]

Much love for this project ser !!! WADAFAK SO AWESOME!!!

[vlky]

Thanks Jack! The code just worked out of the box! Perfect for my proof of concept for my eventual graduation project! I didn't know you could have the MFE's as packages and not bother with "yarn install" in all the respective MFE's. Really adds simplicity to development! I take it it has something to do with those ws scripts, I'm looking into it! Thanks again. This was great!

[bobbyduff]

Hey Jack, I have just started learning to code! Some of the topics are a little too advanced for me right now, but they get me excited for the future! I think I've found my new favourite channel! The quality of your videos are tremendous! You are a treasure to the community!

[AlexanderGharibashvili]

Thank you very much Jack. Really helpful and informative as usual. I really enjoy this new feature of Webpack and just fallen in Micro frontends world. At job going to make changes and working on it.

Thank you again to make such great video based on my question. Wish you health !

[petelometo]

Can you make a video like this one about React & AngularJS or React & Angular?

[JnsWndlmth]

Thanks for your great explanation. Very good job!

[ReadWriteExercise]

Love your videos, they're really well produced, and this one is no exception. Thanks for providing the code link. Let me know if you'd ever be interested in a collab!

[sandeepks]

Can we use different versions of angular and react inside a single-spa application using module federation

[IshantSharma]

Hi Jack. Nice Video. I am still trying to understand the overall setup. How would this setup work for a real world application ? I have a few questions on deployment and sharing. Hope you can help. Q1) Would you maintain those 5 projects in separate repo (separate teams managing deployment). Is that the reason of dividing ? (Q2) If they are all in different repo, how do I run everything together ? In Single-Spa + Import Maps approach, I can use import maps override to run everything together without actually having all of them setup in local (Q3) How would we dynamically deploy only one app without making a change anywhere else and still everything works together ? It seems the host app has hardcoded config. Is there a way to make it an external config ? (Q4) If application size increases, every time somebody uses a common module part of another MFe and that common module needs more abstraction, would it not slow down other teams to put abstraction layers. Some folks in Industry suggest that there should be No Sharing across MFe and share code only within MFe. What is your view ? Can you provide an example for a Single Spa + MF approach for an Angular Application ? Thanks a lot.

[sangameshwarpuramwar]

Hi Jack, i have cline the git repo and ran it but getting app-errors.js:11 Uncaught Error: application 'product-image' died in status LOADING_SOURCE_CODE: Module "./ProductImage" does not exist in container.
while loading "./ProductImage" from
at container-entry:12:1
at async Promise.all (:3001/index 0) error for all products.
Am i Missing anything here

[ajalbani]

Excellent Demo Jack... I am interested to see if we can mount a Vue Page on a React Router using wp5 and single-spa

[santhoshpodduturi]

I have a micro-frontend app written using Single Spa with Module Federation. Now I just want to use a directive from another app which has Module Federation configuration but not Single Spa. So can I just use this directive in micro front-end app?

[amirtorabi]

Please make some cool projects using these two techs

[fengxue]

Very nice video! Do you have any plan to explain how to make it production and deploy to server?

[gamehogaya]

Just a beginner's question
Why are we combining both approaches (Single SPA + Federated Module)?
Can't we use the Module Federation alone?
Is there any advantage of combining both single spa + federation?

[clublati]

Jack, question. How would you go about integrating a JS project that doesn't play that nicely with Webpack (It's built on Stylable - which has preference for its own builder - and currently incompatible with WP-5). This project has a set of very useful components for other personal projects which I want to built on but can't see how they could fit those pieces together.
Your guidance would be appreciated.

[IonMasuna]

I have an issue with federated modules. Let's say that multiple teams are working on different projects at the same time. How can you keep track of which components are in each project or make components discoverable in a way an external library + Styleguidist would allow? Really cool videos! Keep it up!