Mastering Micro-Frontends With RSpack and Module Federation

[@jakemetz1742]

Sidebar: You make the best videos. The time and effort you put in to make it concise but also visually easy to understands helps more than you know! Would love to see a video on your process! Would help improve other's demoing skills a TON * I mean even using ARC to keep things even simpler. Mind blown

[@mainendra]

I was thrilled to see module federation with Webpack 5 and now with RSPack. Thanks for the amazing video! 🙌

[@gambonny]

Your videos on Module Federation are super helpful. I'm totally hyped about RsPack's potential as a Webpack alternative, especially with the new Module Federation support. It would be awesome if you could do a walkthrough of the fresh features in Module Federation 1.5. I bet a lot of us would find it super helpful. Thank you!

[@navneetkumarsharma9092]

Awesome, can you please make a video on MicroFrontend in general, different technique and their pros & cons

[@SenorScriptKitty]

kzbin.info/www/bejne/rWabko2gdqh4irM

[@AllaithBitar]

best knowledge source on the entire internet 🔥🔥💯

[@유승완-h4d]

Cool. Thank you, Jack!

[@gowthamprakaash1409]

I was looking for this. Helpful!

[@minhucnguyen1148]

Thank you for sharing. I tried your example, but it seems the host is not displaying the TailwindCSS styles from the remote component. Did you encounter this issue?

[@arthurgrigoletto]

Same problem

[@michaelta05]

I'm super excited to see you do videos on MFEs ! Hope you'll keep this MFE series alive again! Is it possible to have MF with Rspack in a mono repo, with Turbo Repo or NX? Thanks again for this awesome video!

[@jherr]

I don't see any reason why you couldn't do that.

[@edu_sdorneles]

Tailwind is not working in the host, does anyone solved that?

[@irhamnurullah363]

How can I share styling like that? I have tried it, but the Tailwind styling doesn't appear on the host. Indeed, module federation sends the component along with its class, but on the host, the class is not generated by Tailwind.

[@arthurgrigoletto]

Same problem

[@spyrosbazios1207]

I had the same issue when I tried creating and exposing a component (eg customButton.tsx) . A fix for me was to import "./index.scss"; in my remote component. but I'm pretty sure that's not the correct way to do it

[@webcoderspeed]

Hi Jack, can you make video on how to build two different microfrontend app in typescript react and deploy them on aws s3 bucket and consume them.

[@TiagoAMartinho]

Hey, nice video? In your opinion, which is better to apply in module federation? Vite or rspack?

[@patrickstubner1712]

Hi Jack, love your videos, great job. Would be cool to see more module federation videos, especially with vite, react, typescript and module federation 2.0. What do you think?

[@inforsmall]

Awesome stuff, is it possible to use module federation to combine different versions of some react together? I assume I would need to do simillar mount helper function like you did with vue counter?

[@DawFa10]

This is definitely a game changer!

[@yurykiryaev329]

If I expose one component from my first miscroservice with RSpack, can I add his to my other microservice where I used webpack ModuleFederation? I have many microservices with webpack ModuleFederation and I want to try in one of them use RSpack instead of webpack. Thanks for awesome content!

[@carlosknopel7624]

This is really cool! I’m wondering if it’s possible to have dynamic imports (not defining a static remote entry file)

[@cooldude3010]

Yes. Look up "module federation with dynamic remotes" examples.

[@timbotize]

Hi Jack, Super helpful as always! If you had an application with a few MFEs and they are sharing dependencies. Now you need to update some of those dependencies across the MFEs but you don't want to do a 'Big Bang' deployment, is there a way to manage different version of the dependencies in the runtime without the different versions effecting each other?

[@codeChuck]

That is magical! Mounting a Vue component inside of a React? You united the frameworks! Is this a special builder/bundler RSPack doing this? Without it this will not work?

[@jherr]

Module Federation only moves code around. The magic in this case is just a simple function that mounts a Vue component in an element, and the corresponding useEffect in the React code to invoke it. You could do the same thing with a build time linkage. You just wouldn't automatically get the update when the Vue remote application updates.

[@Desfek]

@@jherr Thanks for the insight. Been struggling with an old vue2/webpack5 remote to get it to run in a new react/vite host. Ended up using single-spa to get it to work but I'm going to try the "magic" you explained here.

[@jherr]

@@Desfek The "magic" is very obviously not as comprehensive as single-spa. But it really depends on what you intend to do with it. If you just need it on the page, maybe initialized with some session information or other global state, then something like this is probably good enough.

[@JoshuaMelville]

I get the concepts behind module federation, but what I am missing are some real world examples of where this would have the most benefit over other approaches. I would love t see some videos highlighting that!

[@jherr]

Big companies with lots of teams that want to deploy independently but ALSO share code where when that code updates all uses of it are updated immediately. A header, footer, and nav system are ideal targets for that.

[@gowthamprakaash1409]

Hello, what zsh theme do you use?

[@UmidO-lh6xd]

What is the difference between a monorepo and module federation? I'm using Turborepo for sharing code between applications, and hot reloading works too.

[@alexander.k94]

I'm trying to run module federation with nextjs projects but it just doesn't work. Any ideas what can I do?

[@PinheiroJaime]

It would be really great seeing how rspack module federation plays out combined with webpack's and vite's module federation.

[@jherr]

You can do exactly that using create-mf-app. Just create one without Rspack (which would be webpack) and then one with Rspack. Spoiler alert: It works just fine. I should also add an option to use Vite. I think Vite supports most, if not all, of those frameworks.

[@TheYinyangman]

Amazing I was just thinking about thisb

[@ibrahimkanber5794]

Could you make video for react native? How can we share code between web (react )and react native(mobile)? Thx

[@anonCharlies]

Hello, Can you please do a tutorial about forwardRef react hook.

[@what5591]

Do you have a plan to talk about MF 2.0?

[@ayushtripathi4514]

Hey Jack, I have seem a lot of video on micro-frontend of yours. It's great. Can you please make a video on how can an existing project be migrated to micro frontend?

[@ukaszrozewicz7488]

The first question should be, why? What will you gain from this? You will only make the process of testing the application and maintaining it more difficult. MFE has a small community, where will you get information when you encounter a problem? MFE is mainly the work of one man Zack Jackson, when he is gone there will probably be no one to develop and maintain this solution... MFE does not support SSR, if your project requires good SEO, forget about MFE.

[@ayushtripathi4514]

@@ukaszrozewicz7488 that's true. That's what I'm worried about. But with all the hype and claims that you should be able to scale your project as well as the team i was considering it. Should probably dig down a little bit more.

[@jherr]

First off, let's disconnected MFEs from runtime loading. You can do MFEs at build time by just externalizing them into libraries and ensuring that there is light coupling between the MFE and the host app. Runtime loading, like what I do here, should be primarily driven by requirements from business or product. You have a business requirement to use exactly the same code in a couple of different deployed applications and they need to update simultaneously. Then MF is a good mechanism for that. But I wouldn't add that complexity unless there was a business level reason to do so.

[@lumdermaku]

Any chance of making a video about Wundergraph Cosmo? I have a case where i should self-host it, but its docs are not that good. Their approach to the federated gateway + services seems good in theory but those subgraphs are a nightmare to work with. This is different to the video you did a couple of years ago

[@jherr]

Cosmo is about GQL Federation, which is not related to Module Federation. I could do a video on it, but it would probably be a sponsored video. I don't tend to do non-sponsored videos on commercial products.

[@drwaky]

This is great, Jack!! Thank you so much for sharing this, we were exploring different approaches to share components between apps. Would you mind to do a video comparing share components using a Components library package, using Story books + npm package VS this module federation technique?? And also from the Host to the Remote, a component which code is in the host being used by the remote. Thank you so much again, your videos are awesome! 👏 #Kudos

[@ukaszrozewicz7488]

Currently, the most convenient, easy to maintain and test code, the most efficient way to share components between applications are various types of monorepo. Switching to Module Federation is asking for trouble ;)

[@somewonderfulguy]

All links you mentioned in the video seem to be gone.

[@sirilmp7838]

here how we can share the tailwindcss config?

[@bits-bytes-and-beyond]

Great video thanks. Angular is not supported by create-mf-app. Any recommendations/docs/pointers for using MFE with an Angular app?

[@jherr]

Talk to Agular Architects. Angular isn't supported because Angular cannot simply be installed in a stock npm module, as all the others can. I've talked with the Angular team about this repeatedly and they just shrug; use the Angular CLI or don't use Angular, your choice. I would gladly add support for Angular if they got off their high horses and started playing nice like every other framework.

[@bits-bytes-and-beyond]

Thanks Jack. Angular Team is advertising the latest release as a “Renaissance”, hopefully the next one will be more focused on collaboration…

[@jherr]

@@bits-bytes-and-beyond They've been hyping that for the last two releases, but nothing so far.

[@akcaburak]

What about single-spa for multi-framework support ? it’s suitable for that purpose?

[@jherr]

Yep. There is definitely overlap on the venn diagram between Single-spa and Module Federation. Single-spa does a better job than I did at packaging components and integrating them. Module Federation does a better job at sharing any type of code you want (not just components).

[@geniusstudent8804]

does it work with nextjs (with app routing )?

[@paci]

The problem with this architecture (runtime imports) is that is all CSR then SEO if pretty bad... You better do local imports and just get the components at buildtime.

[@Michaeljamieson10]

astro comparison video to this approach i dont see when to use which

[@miguelship3]

Maaan, this is awesome Will you consider to add an authentication step and protect the remote apps? How you do that? This video is frkn awesome though, thanks man!!

[@jherr]

If you put that kind of auth on the JS files for your app, you could also put that on the JS modules from Module Federation. From a security perspective Module Federation is just code splitting.

[@kettenbach]

Love the zsh prompt! Just curious have you tried neovim and tmux. I have been forcing myself to learn vim. Anyways, great video. Have a great week!

[@jherr]

I used vim for years and I'm not interested in going back any time soon. I've tried tmux, but I'm doubious about the value when we have good GUI terminals that support multiple panes. All the vim + tmux stuff seems like it's going back to where we were 20 years ago.

[@s3xta13]

Does module federation also works with nextjs?

[@Maximurz1k]

awesome!!!!!!!

[@Super-wk6jx]

is it possible to use react suspense within react 17 host with a react 18 remote?

[@jherr]

Probably not, no. Unless you wanted to have separate react apps running on separate react instances.

[@Super-wk6jx]

@@jherr so i have to do the loading animation within the "mounter" wrapper of the react 18 app?

[@jherr]

@@Super-wk6jx I don't know. I'm not looking at your code. What you've got is two different versions of React running at the same time which is strictly a no-no in React. It's likely to blow up the moment you use any hooks.

[@Super-wk6jx]

@@jherr my code is pretty much your first example of module federation with recoil and react. I will search for a way to isolate the frontends, there is an example on module federation it self that is similar to yours and says it will isolate 17, 18 together in one app. I will try that. Anyway thanks for the reply, great videos as always.

[@cwnhaernjqw]

How does sthat work on typescript? Is it smart enough to work for big enterprise projects?

[@jherr]

The whole concept of MFEs is designed for "big enterprise" projects since it enables multiple teams to be able to work and deploy independently. There are solves for TypeScript, but you have to understand that these are _runtime_ loaded modules and TypeScript works at build time. So what you are doing is specifying a contract for the imported runtime module, but there is no actual guarantee that the runtime loaded module actually matches that interface.

[@MaxHuretski]

This seems to be incompatible with SSR

[@jherr]

Yes.

[@abhilashm5236]

Hi Jack , can you plz make a video on micro front end with next 14+ , I am waiting for this from a long time 😊

[@jeroverz]

So, why not just go monorepo?

[@ukaszrozewicz7488]

Because some people like to drive a reliable and proven Honda or Toyota, while others like to drive an unreliable and problematic Land Lover. Well, Land Rover looks better, it all depends on the priorities in your project ;)

[@sujithgnth]

Wait, what browser do you use?

[@jherr]

Currently Arc. Reconsidering that though.

[@WrightAmos]

Swift Views

[@artyomtaranenko2267]

More MF)

[@ukaszrozewicz7488]

Sorry, but Module Federation is one of the worst architectural solutions ever invented. Difficult to maintain, difficult to test, and introduces excessive and unnecessary complexity into the architecture.

[@marcelp4825]

What do you propose as an optimal solution to implement MF?

[@xxXAsuraXxx]

welcome to the world of Micro services/frontend :)

[@xxXAsuraXxx]

@@marcelp4825 s xD

[@jherr]

Haha, zoid!