Single Spa + Federated Modules = Wow!

[@mirceabereveanu8943]

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

[@jeronimocarrizo5855]

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

[@jemesmemes9026]

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 :)

[@edarioq]

Would love to see this with Angular and React

[@bobbyduff3369]

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!

[@jherr]

Glad to hear it. What are you learning to code in? Javascript?

[@bobbyduff3369]

@@jherr I've focused on HTML/CSS for the last couple of weeks, and I'm just getting started with JS now!

[@jherr]

@@bobbyduff3369 Cool, well, should be some good foundational JS stuff coming up. Stay tuned! And thanks for the compliments.

[@bbcwilliam]

yes, Jack is truly a treasure to the community!

[@petelometo]

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

[@v0lky1]

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!

[@IshantSharma29]

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.

[@jherr]

Lots of questions. Lemme see what I can do with those: A1) The answer is that they would be in different repos most likely because they are managed by different teams. The whole idea here is to do live sharing between applications deployed by different teams. A2) You can use remotes from production, so that you are pulling in the live code from the site that you are integrating into your app. Check out more here: kzbin.info/www/bejne/g4abkH-GbbeSkKs A3) Check out the Module Federation into production video here - kzbin.info/www/bejne/g4abkH-GbbeSkKs - And in the live version of that video I also show how to apply switches to the remotes so that you can use either local or production versions of the remotes. A4) The sharing system baked into Module Federation is quite robust. It only brings in libraries when you bring in the dependency that needs them. So a federated module that adds a new dependency will only add to its own size, and then the runtime side of any host application that BOTH references it AND loads it. You don't download the remote module until you use it. I'll look into an Angular example. It's on the list. In the meantime Manfred Steyer has some great Module Federation with Angular examples.

[@IshantSharma29]

@@jherr Thanks Jack for a detailed answer. I checked out your video - "Module Federation into production". It helps. Let me try few things myself in Angular.

[@jherr]

@@IshantSharma29 Please do! And let me know if you come up with a good working example and I can roll it into a video.

[@IshantSharma29]

@@jherr Sure 👍

[@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 !

[@jandresampaio]

Why are remotes defined with only a string value, like nav: "nav" ? With module federation should be nav@somehost:8080 right?

[@JnsWndlmth]

Thanks for your great explanation. Very good job!

[@RuiMarques]

Great job, keep it up!

[@jakemetz7035]

What tool did you use to create the visualization @ 1:07? I'd love to up my demo skills. p.s. thanks for answering again if someone already asked.

[@jherr]

After Effects. It's all very manual and time consuming. Worth the effort sometimes though to really illustrate the point. I don't do it much anymore. But I would definitely do it more if it were easier to do. At a technical level I create a new composition with the movie or the image. Then I put it into 3D mode with a camera to get that twist. Then I create new cropped layers for each of the pullout areas and animate their Z-index relative to the camera. And it's really just that.

[@sandeepks8878]

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

[@gamehogaya5202]

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?

[@maopuerta3430]

excellent video. thanks

[@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.

[@jherr]

I've been thinking about that. One idea I came up with was to have a very very small WP5 build that I would script on to the page. I mean like `index.js` is `export default true;` type small. And then that bundle is script tag loaded onto the page. That gives you a "Webpack environment". Then from there I'd use the standard dynamic module loading mechanics, as demonstrated here: github.com/module-federation/practical-module-federation/blob/master/chapter7/packages/home-wp4/src/App.jsx

[@clublati]

@@jherr Thanks so much for the fast response! awesome stuff. I think I understand the approach. I'll give it a try and see If I'm able to accomplish what I want. Thanks a ton!

[@jyotirmoypan826]

Lovely demostration...

[@tuyentestaccount1324]

Great1, thank you so much.

[@PradipkumarHinge]

I did not get the part where in product-image package we are re-writing mount for adding event listeners. What exactly is the issue if we don't do it ? I love your videos @Jack Herrington Thanks in advance.

[@jherr]

Can you give me a time reference?

[@PradipkumarHinge]

@@jherr @6:00

[@jherr]

@@PradipkumarHinge You mean passing through the original mount? That's just to make sure that single SPA has an opportunity to run its mount logic.

[@PradipkumarHinge]

@@jherr why in other packages we need not to do this?

[@jherr]

@@PradipkumarHinge Because they handle the mounting for that framework. We are using vanilla JS at this point, so we need to handle that for ourselves.

[@kirtisahai8745]

Hi Jack, Are we using runtime module federaton or build time module feration here?

[@sangameshwarpuramwar943]

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 webpack/container/reference/productImage at container-entry:12:1 at async Promise.all (:3001/index 0) error for all products. Am i Missing anything here

[@divyagoel3100]

I am also facing the same issue. Are you able to resolve that?

[@rob4174]

Hi Jack, thanks for the great video! I wanted to ask: what value does single-spa add over just using federated modules? The library seems to add a lot of boilerplate just to get some routing niceties, and it seems you can do a very similar thing with just federated modules. Here's an example of importing your Header into a React using WP5 federated modules. const header = React.lazy(() => import('Header')); What am I misunderstanding here?

[@jherr]

Single spa gives a uniform interface for props and rendering to all the different view frameworks. So you can bring the client library into your app and then import parcels from and view manager and single spa will make it work.

[@jherr]

If you are just using one view framework then there isn’t much of an advantage in using it.

[@rob4174]

@@jherr That makes sense, thank you so much for the explanation and great content, I really appreciate it :)

[@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

[@jherr]

That's definitely doable. Not sure if there is enough interest in that for a video tho.

[@santhoshpodduturi3889]

Your videos are great, I have a quick question is it possible to navigate to deep link route (i.e, child routes) from one micro frontend to another micro frontend

[@jherr]

Not sure within SingleSPA, but very likely. If you are just using Module Federation you can very easily do s within the MFEs: kzbin.info/www/bejne/n6izeIZjZ9CpiaM

[@santhoshpodduturi3889]

@@jherr thank you for the reply

[@santhoshpodduturi3889]

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?

[@jherr]

I don't think so. I think you need the Single SPA client for the appropriate framework wherever you deploy a Single SPA parcel.

[@CanxerStyle]

Great video Jack ! I am stuck trying to convert using systemJs from create-single-spa into using module federation. What's your take on converting into using module federation from create-single-spa? Is it easier to just install single-spa as a standalone package so that I do not need to worry the default webpack configuration done up by create-single-spa?

[@AVINASHKUMAR1]

@ Jack Herrington can you talk about deployment strategies of single spa micro-frontend with webpack federated modules. I have been looking into single spa, but i am not sure how production deployment would work.

[@jherr]

With federated modules you are going to want to change the output.publicPath value in the webpack.config.js based on the target environment. Other than that there should be no difference between development and deployment in terms of what's required to get the code out there and running. You may have other stuff that switches based on mode, like minification and what not. But for Federate Modules the key element is output.publicPath. webpack.js.org/guides/public-path/

[@bhushanbadhe7773]

Unable to resolve bare specifier How to resolve?

[@fengxue6809]

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

[@lowlandtech]

ok I'm sold... how would you dockerize something like this? Would you run everything in one single container or would you give each service its own container?

[@jherr]

Static preferably, but Docker for the server if you have to have a server. But even in that case I would put the JS on a static host like S3. Better for CDNs and perf in general.

[@remielevangelio4434]

Hey Jack, great video. Does that mean all other single-spa applications needs to be running on the background before you can use them?

[@jherr]

No. You just need to have the JavaScript files deployed somewhere like S3 so that they are always available.

[@remielevangelio4434]

@@jherr Oh that makes sense, thank you!

[@C4Par1]

So is this like a monorepo? I'd really love to have the micro apps ("./packages") in separate gitlab repositories. Can that be achieved with this pattern?

[@jherr]

They are in peer directories only for the sake of making it easier to manage on a video. They do not need to be in the same repo.

[@Alessandro_Russo]

Is there any way to version parcels like piles in Piral?

[@sudha483]

Hi Jack, Am trying to integrate React and Angular Single spa+Federated Modules. Can you post some sample examples

[@jherr]

I'm super busy and probably won't be able to handle your request. I would look for examples either in the Single SPA repos or in the Module Federation examples repo.

[@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!

[@jherr]

Thanks. If you have any ideas DM me on Twitter at @jherr.

[@dhira3768]

localhost remotentry.js is either hard coded in index.html or webpack.config.js. Is there a way to pull from json file has all entries like url, component name, etc and registerapplication?

[@bilalullahkhan5517]

Hi @jherr, i am working on my companies project. I have created a page builder up with react.js and webpback module federation. what they want to do is they want to connect this page builder application to other websites which made up of different frameworks like angular, vue etc. How can we achieve this do you have any idea.

[@heruhailiuhuang533]

Hello, i have a question : how to manage the router?

[@olavo.a.santos]

Hey Jack. Great videos and explanations. One wall I've been hitting is how to use SSR with micro frontends. Any ideas on how to solve this?

[@jherr]

OpenComponents is the only off the shelf Micro-FE framework that I know of that currently supports SSR. I know Single SPA is working on it. Maybe worth a check to see if they've gotten there. And Module Federation (which is not a Micro-FE framework but does the code loading part of it) also supports SSR, though I haven't done any videos on that yet. (I should).

[@olavo.a.santos]

Thanks for replying! I'd love to see an SSR related video. It's an important part of SPAs and I'm curious to see how that would be implemented. Definitely gonna check out those frameworks. I've been playing with it and trying to implement it myself to understand the mechanics of this. I just managed to get mfe modules dynamically imported during SSR. Haven't tested it in something realistic yet. Still trying to architect something that feels good to work with.

[@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!

[@jherr]

A playroom site using federated modules could be really interesting. Really interesting, actually. I might give that a go.

[@jimydolores7994]

A query, the projects must be in the same folder? When I used systemJs to perform the imports I had no problems, my projects are not in the same folder; Now that I want to use Federate Module ps it makes an error when trying to do the Import, I hope it helps me, thank you very much.

[@jherr]

I'd have to take a look at your project to try to diagnose what's going on. DM me, @jherr on Twitter, and you can send me a private repo and I'll take a look.

[@HiraMalik-r3i]

Thanks for the video! Helped a lot! I have a question, can we use systemjs import-maps to import existing MFE which are not using Module Federation and others(using module federation) using Webpack imports? Or is it that we can only import using one of these option at one time in our root app? Any advice would be much appreciated!

[@jherr]

I suppose, that's adding a lot of complexity though.

[@HiraMalik-r3i]

@@jherr True that! The problem is we are using single-spa-angular MFEs in a single-spa architecture and another team is developing the Module Federated modules that we have to add to this current architecture and do not have control over. If I import using webpack the module federated ones then what to do for the other existing ones. Either we add module-fed plugin to those as well or we add the module federated ones using systemjs somehow( I saw some article where they are doing it using this). Getting pretty confused on what approach would be best here. All of them seem complex to me really, no good approach I feel.

[@jherr]

@@HiraMalik-r3i TBH, this sounds like way more than we can tackle in a KZbin comment thread. My recommendation is to either get some help from the Single SPA folks to see if they have any recommendations on integration strategies. Or (and I don't work for these folks or even know them) try Valor Software since they seem to be doing a lot of good work in the Module Federation space.

[@HiraMalik-r3i]

@@jherr sure will try that! Thanks for suggestions!

[@rudrapratapsingh213]

Well this federated module approach looks pretty good, but I am having hard time in understanding where to start and my goal is little different, if you can help or make a video over it, it will be pretty helpful for me. My goals: 1.Need to implement module federation in such a way that those modules can be called in any project or even in html 2.As well a anyone should be able to pass the parameters to it, whether it be like passing parameters as we pass in functions , or whether it be like passing parameters through query string. 3.I am only a 6 month experienced react developer so can you make it as easy and as illustrative as possible Please, I have wasted 2 weeks in order to achieve the same.

[@jherr]

Have you looked at using Web Components? Seems like they are a better match given your constraints.

[@mandrak3Dev]

Hi Jack, I Just realized this project is using a webpack branch and not an lts version, if I change the webpack version the imports crash. Do you know What is the way to import the modules in webpack 5.0?

[@jherr]

The video is just old. The code on github is up to date. Webpack 5 released with Module Federation I want to say like June of last year... So it's been out for a while. Such is the nature of having a KZbin channel where I show off cutting edge stuff. The videos themselves can get dated.

[@mandrak3Dev]

Great job! I have a question for you, Is it possible to render a module standalone in a different path? e.g localhost:3001/header ?

[@jherr]

Module Federation doesn't really care where you put it. But when you build the remote components you need to make sure that `publicPath` is where the code is actually going to be deployed. This is because the `remoteEntry.js` doesn't contain the code. It contains pointers to the code which it then loads on-demand from locations relative to the `publicPath`. So the `publicPath` needs to be correct or you will not be able to load the modules.

[@alessandrogentil]

Great video! I just started to search for this! I was trying to understand how this is better than just work with systemjs, there is any performance gain over systemjs? Not only that, but I can't yet see exactly the benefits to use module federation over systemjs!

[@jherr]

The perf gain would be in not bringing in system JS to handle the asynchronous imports. And you don’t have to use systemjs for some modules and regular imports for everything else. Or coordinate sharing the vendor libraries, like react, with systemJS.

[@alessandrogentil]

@@jherr so it is problematic to use system JS to import the single spa MFE since it is an asynchronous operation?

[@jherr]

@@alessandrogentil Any MFE import is going to be asynchronous. To make it synchronous would mean that you would compile it into your bundle and that would defeat the whole purpose.

[@gustaff.weldon]

Hi Jack. I was wondering if it is possible to support different page layouts with single-spa or do I need to look elsewhere?

[@gustaff.weldon]

2) Also, how do you approach nesting of MFEs if at all? Sometimes, UI is designed in a way where one component utilises component from a completely different domain and it does that seamlessly. Think for example, you are showing a product description (catalog domain) and on the same page, you need a "users also like" (user engagemant) or "products similar to your purchases" (orders domain). It would be great if those can be separate, but quite often they just popup in their slots "inside" product domain view.

[@jherr]

I don't see why not. It's really up to the HTML inside the MFE and the layout of each page that consumes it. Or am I missing something?

[@jherr]

I know how to do it just in straight React using Module Federation. I _think_ Single SPA should handle nested application tags. I haven't tried it though.

[@gustaff.weldon]

1) By layouts I mean top page layouts. Say one with a sidebar, header, footer and main area, another without sidebar and main area being two columns (outlets). It looks to me as if SPA has one index.html where you place the tags with proper ids.

[@jherr]

@@gustaff.weldon Sure, but different applications could have different layouts where they position those IDs but still use the same Single SPA components.

[@vasanthakumarn]

How to combine MFE with parcel and webpack ?

[@jherr]

Unfortunately I don't think so, parcel is its own bundler and doesn't support Module Federation.

[@unraaat90]

What exactly is the difference between module federation and single spa, cant you do all that with just single spa?

[@jherr]

Single SPA sits on top of either Module Federation or System JS. If you want Micro-FEs but you are only going to be using one view framework (e.g. React, Vue, Svelte, etc.) then you can get by *without* Single SPA, but with Module Federation. If you want to be view platform agnostic, then bringing in Single SPA on top of Module Federation can get you there. But it is overhead, so think hard about whether you need it or not.

[@none0n]

A short video on Angular remote in a React shell with Webcomponents and Module Federation, no Single-SPA. 😪

[@santhoshpodduturi3889]

Hi Jack When I try to run two Single spa + module federation Angular apps, I am seeing following error A platform with different configuration has been created. Please destroy it first. This is happening when 2nd micro front-end is loading Can you please help with this? Thank you

[@jherr]

Angular Module Federation is not my strong suit, you should check with the Angular Architects folks. They are the folks who built the Angular module federation plugin.

[@lakshmich4644]

Hey Jack, I am recently started looking into the Module federation. I was wondering is it possible to import Federated module using single spa js.

[@jherr]

You can export/import the Single SPA wrapped code using Module Federation. In fact it's the other recommended alternative to SystemJS. single-spa.js.org/docs/recommended-setup/

[@lakshmich4644]

@@jherr Hey Jack Thanks for your reply. I am looking for a module loader function to unmount webpack federated modules with systemJs and import-maps

[@jherr]

@@lakshmich4644 Maybe singleSpa.unloadApplication?

[@DrDrovel]

Has anybody managed to setup sass-compilations for this project? I have tried all day and I just can't get it to work :-(

[@jherr]

My strong recommendation is to do a CSS in JS type solution for federated modules.

[@DrDrovel]

@@jherr It's weird. The scss-compilation works fine if I add it to the nav-application. But if I add the same thing to another application I get this error when running yarn start ERROR in ../hus/src/style.scss 1:0 [0] | Module parse failed: Unexpected token (1:0) [0] | You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See webpack.js.org/concepts#loaders [0] | > .hello { [0] | | color: #00ff00; [0] | | } [0] | @ ../hus/src/page.js 5:0-22 [0] | @ ./src/index.js 6:38-68 Webpack.config { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ], }

[@DrDrovel]

Turned out to be me not setting remotes and exposes correctly in webpack.config.... Now that problem is solved anyway

[@Super-wk6jx]

how to deploy it dynamicaly without always writing the index?

[@jherr]

Nowadays you don't have to put the script tag in the index. You can put the URL in the webpack.config.js and have webpack handle the script tag injection and loading for you. From there you can also change that URL based on development vs production.

[@Super-wk6jx]

@@jherr but then i would have to deploy the root config with new bundling? I would want to achieve that i just build one application provide that snippet: { name: "@breitseite/user", app: () => Import("@breitseite/user"), activeWhen: ["/user"], } and i would want to get a json from appregister.breitseite.io and loop through it and register and my only problem to solve would be the shared depencies.

[@jherr]

@@Super-wk6jx You can dynamically import stuff all you want with Module Federation, there are standard patterns for that. The only issue you are going to run into is that you need to know the name that each module is exported as. Here is an example that isn't dynamic - kzbin.info/www/bejne/jWG1k6V3j9mdbas - that loads components on-demand on a per-route basis.

[@Super-wk6jx]

@@jherr does module federation bundle each remote in the build process or does it load it dynamically via each given url in the webpack config?

[@Super-wk6jx]

@@jherr now it clicked thank you

[@rukshanabegum816]

Good job Sir

[@blockblock8314]

Thank you very much Jack，i have an issue, how can i dynamic load federated Modules in run time ? it's annoy me for a long time. I really like your videos，i'll follow your video.

[@blockblock8314]

i mean that don't know witch federated module should be loaded before run time . it's determined by some requirment of triggered in runtime event.

[@boogiman007]

whats the inside joke of the established date , on the logo?

[@jherr]

No joke. I started it in 2019, and they are handmade by me. ;)

[@boogiman007]

@@jherr the font you picked makes it read like 1819

[@jherr]

@@boogiman007 Fair, and thank you for the feedback. Given how much I squish that animation, at the very least I should use bold serif fonts for those. But honestly, I'm pretty tired of that logo. I might just change it up entirely. ;)

[@wimboful]

How can I share state between different spa applications? Imagine I need to build a login component. I need an ID component that validates the text input, then a slide effect to another component to input the password. If I want to do this using 2 different applications how could I do It and handle the state of the ID and password to finally send to a backend authentication service? Imagine I login succesfully. Then a dashboard is displayed. How can I share the user info between the navbar where the username is displayed, and the profile menu selected after click on navbar profile button If both are different applicaitons? *application in terms of single spa applications Thx for your content!

[@jherr]

Your going to need to drop something on window and have the two Micro-FEs connect to it. Could be a message bus. Could be a shared store. Really depends on where you want to go with it. But yeah, you're gonna need some type of shared global to provide a go-between.

[@wimboful]

@@jherr Thanks for your reply Jack. I've been reading much deeper single-spa doc. I think this two MFEs are candidate to be one because they are more coupled than I think. Maybe use ID and password components as "parcels" then wrap/import then in a spa-applicattion. Another question I have is when do you think webpack 5 will be released as latest stable version?

[@jherr]

@@wimboful That's more of a question for Zack, I'm not on that team. I like your instincts around picking your candidates. Make sure that your MFEs need to be MFEs. Simpler is almost always more maintainable if you can get away with it.

[@bhushanbadhe7773]

How I can link applications' components with each others eg I've a mf i.e. navbar which has an link portfolios How I can load that portfolio component on that click event and portfolio component is exist in another mf called admin mf

[@jherr]

You would use an asynchronous import that you would trigger on the click event.

[@bhushanbadhe7773]

@@jherr it's resolved

[@NikolaiAleksandrenko]

Can you make more of this conceptual talks? Less code - more ideas, comparisons and examples.

[@jherr]

I have in the past. Any particular topics you would be excited about?

[@amirtorabi3978]

Please make some cool projects using these two techs

[@thelavishcoder2553]

"I dusted off some old code..." :D