Thank you so much for keeping the MFE and module federation stuff alive. It feels like everyone else, including the React team, is laser focused on the SSR story only.

@jherr

Жыл бұрын

Tell me about it. And on top of it we've got people going around spreading FUD about SPAs, how they are "bad for performance". No reasons given. Just "bad for performance". Uh huh. Ok.

@iriel492ki

Жыл бұрын

It's for that very reason that I really dislike what's happening in the React + Vercel space. They're solving "problems" that don't really push UX forward. In fact, many people would argue that we're essentially recreating php at this point. I guess this is what happens with marketing-driven-development. Simultaneously, the industry has basically standardized on React/Next so you it seems obligatory to stay up-to-date with this nonsense. It's disheartening.

@jherr

Жыл бұрын

@@iriel492ki Having done my time in the PHP salt mines I can say that I don't want to go back to that. I like the state -> html model, a lot. But now there are lots of ways to do that; Vue, Svelte, Solid, Angular, etc. I'm not a super fan of what's going on with React either. They are solving problems that front-line developers don't have. The things I see junior React devs struggle with are things like state management. Fix that, React team. Give us some React state primitives that aren't footguns. And the last time I checked, wasn't Facebook (cough, Meta) mostly a SPA? I haven't been on it in... almost a decade now, so maybe it has changed a lot, but I don't recall FB having a big interest in SSR.

@iriel492ki

Жыл бұрын

@@jherr I couldn't have said it better myself. I wish I could thumbs up this to the moon.

@rand0mtv660

Жыл бұрын

@@iriel492ki just because they are solving a "problem" you don't have doesn't necessarily mean they aren't solving actual problems. Although I don't necessarily agree with everything React team is doing, usually when they release a feature it does push the industry forward and ends up being inspiration for others.

Huge thanks for your great content Jack. Everytime when I am curious about something and you will make a video about that.

I was looking for this kind of video for so long. worth watching every second.

Loved the video! Would also love to watch (and build together) a tutorial of a more complete micro front end using this vite plugin. Thanks for the amazing job Jack!

You made micro-frontends unbelievably easy in your previous tutorial where you used webpack. After moving onto Vite, this is exactly what I have been looking for! Thanks a heap Jack!

Learned new things. Very sneaky webpack config, appreciate your effort !

I can listen to this man all day. Thank you so much

It's been 2 years, wow 🤯. Really excited about module federation, again 😀. Thanks for really awesome video.

@jherr

Жыл бұрын

Yeah, it's kind of funny to compare the style of this video to the style of the Module Federation videos from a year (or more) ago.

I just present a conference few days ago, just using what you share in your videos + documentation of MF . High level content always!!!!! TY Jack!

@jherr

Жыл бұрын

Nicely done! Send me the video if you have one of your talk. I'd love to see it!

This plugin is great, I have been using them for a while now. I ended up writing my own Vite configuration generator to abstract away some of the pain points with it, like the need of referencing the remote base URLs for every remotes and such.

Thank you for the video. Big fan of the Vite Federation plugin, i hope it will soon support, dynamic remotes, in similar way we have it in Webpack.

Why why...When I research something, you already posted those explanations and tutorials. Really Helpful! thanx

Great video and very fun. Would be super useful to actually see that whole S3 static store concept you referenced.

Another great video about MF and MFE! You're awesome 💯! I have been watching so many of your videos about this topic recently, some of them are more than a year old but when I tried out the codes, they're still working surprisingly well! Thank you so much for making such a high-quality content, so fun to watch and easy to follow! Just wondering if you could do another round of handling runtime error using the latest techniques available today. Thanks again Jack.

@jherr

Жыл бұрын

Maybe? Kinda depends on how Module Federation videos fair on the channel. All these videos are time consuming to produce, so I need to make sure there is an audience that will benefit from them.

Great video, glad my colleague recommended it! We are actually building a similar system in my company. We use React, TS, Vite and the MF plugin - 5 apps, separate repos, their own pipelines, 5 dockers with nginx, kubernetes, etc, hosted on Azure. Our modules are page level apps with their own routers, and we don't share state other than some cookies. As for common stuff, we share components, utilities and typescript types using an NPM package and a private registry. Still ironing out some details, like auth in modules in local development or css sharing, but overall it seems like a solid solution!

@xxXAsuraXxx

Жыл бұрын

Did you have issues with the latest version? Shared dependencies are not singleton

keep goin' loving the vids

I heard vite couldn't make module federation so I've gave up on this idea. this is amazing!

🤯Next level stuff right here.

Great video Jack! Thanks for sharing 👏🏻

Awesome video thanks!

man this is insanec. thank you

This project is worth Trying. every bit of it

It was really easy to learn. thk

I'm going to try this 😋

I was following along and laughing at the subtle humor up until the webpack interop. The way you identified the source of the issue and fixed it was amazing to say the least. I would like to understand the internals of webpack & the general bundling ecosystem. The word "module" is basically foreign to me on a deeper level. Are there any books/resources doing a deep dive into this (the deeper the better!). Great vid Jack

@jherr

Жыл бұрын

You and me both. Honestly the whole multiple module standards in the ecosystem is a huge mess that makes me want to get more into Deno.

Fantastic stuff! One really awesome thing you did in this demo, but didn't explicitly call out: You did NOT install Jotai in the host application! When you imported the federated store in the host, Jotai just came along with it, which is so cool.

@jherr

Жыл бұрын

Yeah, it goes along with the code that consumes it as library export from the remote. Super clean.

Great work as usual, like your videos, if you have time I would be really interested in seeing video about deploying module federation app

@jherr

Жыл бұрын

I already have one of those in the Module Federation playlist.

Thank you @jherr for this great tutorial! I would like to hear your insights regarding the sharing state between micro-frontends, as it seems to contradict the principle of separated entities, which should be its most vital selling point over monolith-repo... The way I understand it, each entity should make its own data call to the server or (for example in case of user credentials/sessions) from cookies, but not from a shared store or state...

@jherr

10 ай бұрын

Yes, you should share as little state as possible between MFEs. Ideally just the user JWT, and perhaps something like the cart if you are doing e-Commerce.

Thanks!

Thank you!

Module federation is a big reason we are still on webpack on some projects.

This reminds me of "back in the day," around 9:00 with the federation plugin having this `exposes` and `shared` keys. Before we had Vite and Webpack, we had require.js. Which was the Webpack of its time. The problem with require.js was that it became insanely unmanageable as the dependency list grew. It got to a point where we'd have to leave comments above some of the keys to denote _what_ they did and why. If a dependency was removed, then everything broke. Seems like this is going back to old patterns that couldn't scale.

TS & vite HMR support are the things that hold back developers to use this approach

Excelent video, top level information! Jack, is there any way to pass props to the remoteApp component?

Hi Jack! Great content. This video is stimulate my team to make a architect decision on new project. Could you please help me understand the challenges about management host and remote shared dependencies? Imagine multiple teams working on multiple remotes apps and a multiple commons dependencies.

Good Explanation. If possible, can you do one video on module federation with Nuxt 3, this will be really helpful if you can make it. I have explored on the Google, but didnt find examples related to Nuxt3 module federation with shared libraries like PrimeVue

Excellent video, sir. I prefer the port numbers to be provided via the vite.config.js from server: {...viteConfig, { port: 5001 }, preview: { port: 5001 } }

One thing I’ve noticed with Module Federation and s3 is 1. Using cloudfront caching can be a pain, need to invalidate quite a bit and interconnected shared components can get confusing 2. Lots to maintain and setup in Cloudfront when using many services, it can get confusing especially with the ugly cloudfront urls. That said I do really like Module Federation 🙌🏻

@DI3GOskill

Жыл бұрын

You can solve this by creating custom cloud-front behaviour, you can add a policy for cache disabled targeting only the entry file then all the other files are safe since they will be generated with an unique hash.

I was really excited to see this video because I was hoping that you could finally use MF between running dev servers. The fact that you had to redeploy the remote (rather than just having a dev server auto update it with the perfect of Vite) was determined to make this plugin a non-starter for an org I was working for last year. 😔

@p-j-y-d

Жыл бұрын

Agree. The inability to serve remotes with dev server is a deal breaker to me. I'm evaluating using @module-federation/vite instead, which works with dev server. It doesn't propagate hot reloading from the remote to the host and we need to refresh, but this is better than rebuilding on each change.

Truly an eye opener. Appreciate your video Jack. Is there support for a Webpack 4 app to act as the host application ?

@jherr

4 ай бұрын

Yeah, it's totally interchangeable.

@user-ml4zx5gt5s

Ай бұрын

@@jherr Have you figured out a way maybe to use dynamic remotes with this plugin ?

Джек как всегда хорош!!!

@jherr

7 ай бұрын

Спасибо за просмотр видео!

I liked your video, nice explanation, easy to follow, I would like to move one step forward, how to handle the errors like when remote app is down or not built, could you please post a video or comment on this, it will be really helpful, I am working on vite vue module federation

Great video (as always). For me, personally, whenever Typescript support is gone or becomes hard, unless the "pros" section is a HUGE list compared to the cons, I'm like "I'll pass for now"

@phoenix-tt

Жыл бұрын

It's not really gone, you can still use Typescript with Module Federation, you just have to create a definitions package which describes the contract of your remotes. You use it in remotes to make sure you follow the contract, and you use it in hosts to correctly consume your remotes. It is a bit tedious though, because you have to manually type your definitions, but it's the same as if it was a REST API call

@farzadmf

Жыл бұрын

@@phoenix-tt Good points, thank you!

@jamesdenmark1396

Жыл бұрын

@@phoenix-tt It's def not the same, with MF things can easily break, imagine props change. The host needs to be updated. This should only be used if you need to embed a application inside another application that are isolated from the host, and doesn't need any prop, then I think it's good fit. As soon as you use it as any other component then any change in the remote - will break in the host.

Thank you so much for video! This is super useful information🚀 What do you think about Vite and Turbopack? Which bundler more convenient for SPA?

@jherr

Жыл бұрын

Personally I'd rather go with Vite.

Thanks for the video! Not a big fan of MFEs, seems to me like it's adding more dynamic boundaries when the majority of workplace problems are caused by misalignment between teams already. IMO we need more typing not less. I feel like this will introduce the same kind of tribalism as BE microservices

Loved this one !! I learned MFEs from your vdos only. Can we do a host - vite + react 18 + its own route and client - webpack + react 16 + its own route. Would be great if there is 1 vdo focused in different route strategies used in MFEs . Please guide if you have any info on this topic 🙂

@jherr

Жыл бұрын

Thanks for watching! Maybe this is just me but I don't think the MFEs as routes thing is a good idea. But if a lot of folks want me to cover that I certainly can. Technically speaking it's not that challenging.

Another great walkthrough. I've been coding along and I've initialised react ts project instead. It threw me a ts error. In order to correctly import the button I had to add a type declaration for it in my host project. I guess its because we load projects/modules dynamically at runtime and typescript doesnt know what are the types. Thanks a lot for the input and insights youre giving!

@user-hi5wz1oo7h

5 ай бұрын

can you please tell me about your solution with typescript?

Hey, nice video! That's cool that you can start mixing Vite & Webpack applications, but it raises a few more questions: 1/ how would you make your host load both Webpack & Vite remotes (ideally, in an agnostic way) ? 2/ could the host use Vite and load a remote Webpack application? Thanks again for your videos on MFE, they are really becoming one of the main sources of knowledge on the topic !

@jherr

Жыл бұрын

1. You mean without that default hack? Dunno. I mean, you could wrap it in a function that looks at the module export and sees if there is a default and uses that. 2. I'm not sure I understand what you are asking, but sharing a whole application sounds unwise at best.

@gfox1984

Жыл бұрын

​@@jherr 2/ I mean, if you take your example at 20:00 and do it the other way around: you implement and expose a button from a remote Webpack app and try to import it in a Vite app (the host)... Can it work?

@jherr

Жыл бұрын

@@gfox1984 I haven't tried it, and I invite you to, it would be simple, but I would be surprised if it didn't work. There is really nothing magically going on here. The React components are the same functions, code wise, whether they are imported directly, or through a mono-repo, or through Module Federation. If you can get access to the component function, and you've done so without bringing in another instance of React, then everything should work just fine.

@gfox1984

Жыл бұрын

@@jherr I have to say I got cold feet looking at the note on their repo: github.com/originjs/vite-plugin-federation#integration-with-webpack "It is not recommended to mix Vite and Webpack in React projects, as there is no guarantee that Vite/Rollup and Webpack will generate the same chunk when packaging commonjs, which may cause problems with shared." But I'll try to give it a go

Thank you so much for this valuable information. Can you also mention how to implement redux in this project?

awesome video thank you very much for the content. really great how up to date technologies you are testing and presenting! sadly the part with having module federation as a host and a vite as remote doesn't work on my end. could you link the github repo as comment?

@jherr

Жыл бұрын

GitHub code link is in the description.

Great vid, but please hide Arc's sidebar, the video will look so much better without it.

Hi Jack, super explained 🎉, can I say that Jotai is suitable for mono repos too ?

@jherr

Жыл бұрын

Yes, it's just a standard state manager. It's not specific to MFEs.

Is that actually a window to outside behind you? That's beautiful! Where do you live?!?!

@jherr

Жыл бұрын

Portland, OR

Hi Jack, i'm a big fan of your micro-fes videos, thanks a lot. Lately I got an Astro project to consume using Vite a Vue micro-fe exposed via Webpack with module federation. I am currently struggling to make it work with SSR. Just wondering if you could provide some help with micro-fes and making them run in SSR mode (ie with Astro). Best regards!

@jherr

Жыл бұрын

I would check with Fred and the Astro team on that, but my guess is that they probably don't think that's an awesome idea. Honestly, MFEs in SSR never really made much sense to me since I discourage using MFEs for mission critical page elements. So doing MFEs primarily on the client is ok with me. But hey, I don't know your use case, so if you require SSR then yeah, I'd reach out to that team.

I wonder how MFEs will evolve with stuff like Astro around

Well, now this is something useful. Thanks for sharing Jack! Quick non-related question: how did you manage to put the address bar on top of Arc browser?

@jherr

Жыл бұрын

That's the way it came for me. Do you mean the debugging stuff. That comes on automagically if you are looking at localhost.

@ep3ar

Жыл бұрын

Well, that's a nice easter egg 😂I was still using Firefox for development just because of that. Thanks a lot!

Next is figuring out how to make these work in production builds. Localhost ports just won't work in that case. Nice tutorial.

@jherr

21 күн бұрын

You need to look at environment variables and change the URLs to the deployed locations during production build.

For deploying assets, it seems better to mention common CDN solutions rather than an object storage. Netlify / AWS CloudFront / Cloudflare etc. S3 is OK to play with an simpler tho, so might be easier to get started, but always deploy for real to a CDN

@jherr

Жыл бұрын

Agreed. Anything other than serving it out of your SSR server. Serving it out of the server is a particularly bad idea because NextJS used to (not sure if it does it still) serve whatever it has for JS assets regardless of their checksum, which made non CDN rolling deploys very ... exciting.

cool

It would be great to see your take on solving runtime crashes when appling module federation.

@jherr

Жыл бұрын

There are lots of options around hardening. You can use ErrorBoundaries. You can do some fallback behavior to a lazily loaded import of the build-time module. But all that requires a lot of work to implement, test, and stay consistent with it. So it's a big commitment.

@radulaski

Жыл бұрын

@@jherr and if there are some breaking changes in one of the libs some kind of versioning might be required. It seems like it becomes very complicated rather quickly. Sharing CSS seems like a pain too, as I understand it it has to be bundled with JS. Shared lob versions need to be synced between teams.

@jherr

Жыл бұрын

@@radulaski Yep, totally agree. That's why I put a section in this on pros/cons because there are a lot of cons. It's great to have access to this functionality, but it comes with a lot of risk and complexity. In a lot of my previous videos I didn't cover the downsides and folks came away thinking that Module Federation was way easier than using a monorepo. When in reality, it starts off being easier to share a component, but to actually get it hardened to production level, it's way harder than with a monorepo.

Awesome video! About tree shaking, it seems like module federation struggles there too. Since we need to manually set up shared packages in each micro-app's bundling config as well as the host, it can cause duplicate packages downloaded by the client, right?

@jherr

Жыл бұрын

A good technique is to bring the package.json data into the vite.config and then just up Object.keys on the dependencies object to set up the shared array programatically. That way it's always kept in sync. Tree shaking is clearly an issue. Not really sure what can be done about that. The module will include all the code in the exported module and anything local it depends on. And I wouldn't expect it to tree shake because it's impossible to know what will be called and what won't.

@jherr

Жыл бұрын

@Allysson dos Santos It sounds like in your case you should go with build-time dependencies. Because a given runtime library can't know which of its exports will be used, so it has to retain them all.

The project I'm on at work is using MFEs but the people who made that choice hadn't used it before so it's been a learning process for everyone. Not only that but these MFEs are being hosted through microservices...and surprise surprise the store sharing and lib sharing has become a headache to manage. Doing vertical slices in a mono repo would've be much simpler but they wanted to do microservices in individual repos when they hadn't done microservices before either....ugh... Resume architecting is what we call it...gotta get those buzz words in these days...

@jherr

Жыл бұрын

"RET"s - Resume Enhancement Technologies

Thank you for sharing! any ideas how to make HMR work? So that any change in the remote component will be immediately reflected in the host. I've seen your comment about setting up --watch mode, however in our specific use case, the remotes can get pretty large, with thousands of components making the watch cycle a very bad dev experience.

if I ask you do make a decision between for example ASTRO and MFE .... is it a valid question ? and if the answer is yes, what do you choose?

Hi, thank so much you for the video, I wonder if this plugin will support tailwind, typescript, etc, in the future? and could you share what browser are you using :D

@jherr

Жыл бұрын

I use the Arc browser.

Great tutorial! I have a question, lets say, if I expose a Micro-Frontend using Module Federation with Vite, can I consume it somehow from a Next.js application?

I've spent some time with this trying to set up a remote app (vite) in a project where I don't control the host app (webpack). I got "SyntaxError: Cannot use "import.meta' outside a module (at remoteEntry.js:8:30)". At 9:50, line 9 in this video. Do you have any suggestions on how to get around that? I guess it's esm related, but I can't seem to figure out a way to solve it from the remote app.

Hello, Can you make react advance tutorial like optimization, memo and best practices, will really appreciate it, me and even who are looking the to level up their skills with concepts and practices

Hi Jack! Great content thank you so much. From personal experience in a large project where you have many MFEs, some are "legacy" and using webpack 5 (including the host UI), there are some compatibility issues when introducing new UIs written in vite and MF plugin for vite. Is this something you're familiar with?

@jherr

Жыл бұрын

No, but then the extent of what I've done with Vite and MFEs is what you see right here. Can you tell me a little about what issues you experienced?

@omriterem6448

Жыл бұрын

@@jherr I was talking about dynamic loading of module federation in vite (the remote UI is in vite)...

@jherr

Жыл бұрын

@@omriterem6448 I showed in the video that Vite MF can load Webpack MF. It's actually all dynamic to start, it's just that the loader is doing a little auto-magic when you do an import to load the module dynamically automatically. And so you should be able to do a dynamic module load. If you want to know how I recommend looking at the demo code provided by the Vite plugin folks or in Zack's demo project.

Great video! Can you tell us wich browser are you using?

@jherr

Жыл бұрын

Arc.

The module federation stuff is great BUT problematic in terms of web workers. I tried both webpack and vite and when You have to consume federated module inside of web worker, then it gets problematic, or to be more precise - right now it is simply broken. Hope they will deal with it someday.

I have a wild idea I wanted to get some feedback on. We have several "core" apps that we currently use as stand alone MFEs. I've been trying to convince our team to switch our core apps to a monorepo. With that in mind we allow customers to create third party apps to support their own needs. If we converted our core apps to a monorepo, we would still want to use module federation for stand alone MFE's. Could i combine this approach with a turborepo, the turborepo being the "remote" or atleast 1 app in the turborepo would be the remote? Is that over engineering?

It's crazy that you valuable information is free while some selling jargon in place of quality content.

Thanks a lot!! is it also support Angular?

Some questions regarding the dependencies that are referenced in a remote component: Is it actually neccessary that each and every third party dependency that is used in the remote is listed in the vite.config of the remote *AND* the host application? In tests I saw that each of those shared deps are shipped from the remote in seperate files, (__federation_shared_react.js, ...), isn't that kind of bad for performance when dozens of separate deps need to be shipped? Also: Since the remote can change at any point in time (runtime!) it may happen that the remote introduces new deps that that host is not aware of, leading to crashes? Another also: Those files don't have a hash in their file name, version clashes can easily happen if an older version of the dependency is cached at the client and the remote uses newer versions? (I would have expected that deps are bundled on the remote) Can I opt out of sharing deps and simply ship every 3rd party dep that is used in the remote? Last but not least: There are things that require setup (think react-query, react-i18next, ...) via a Provider or other setup logic. How would you tackle topics like that e.g. with internationalisation of texts that appear in a remote module?

Hi Jack thank you for your video, please Jack could you tell us how to share data between host and microfrontend?

Hey Jack, thanks for this amazing video, can you share how you liked Arc as compared to safari or chrome

@jherr

Жыл бұрын

I like the tab management stuff, the embedded popup window, and the popout video in Arc as compared to Chrome. TBH, I don't use Safari enough to have a good opinion on it. I know some folks who have switched to Safari and love it, there is also the Orion browser, which folks are raving about. There is just too much good stuff out there!

@ayushjain7023

Жыл бұрын

@@jherr that’s a great insight thanks

@jherr Hi, great video. Should be the remote app developed independently? I mean should I run on local just the remote app? What if there are some deps on the host? I have to "mock" the dependencies like store or router?

@jherr

4 ай бұрын

Remotes should definitely be deployed independently. If you could deploy them together then you don't need Module Federation and if you can get away with that it definitely simplifies things. If you have shared dependencies between host and app you can have those as exported dependencies of both and MF will do the arbitration so that they share the same code and the same instance in the running application.

@adamzalesak

4 ай бұрын

Thank you. I mean how to handle local running during development. Is it appropriate to be able to run the remote app alone on local? If so, I need to solve the missing deps from host (state management, react query cache, common router, ...)

@jherr

4 ай бұрын

@@adamzalesak Any dependencies between the remote and the host should be considered part of the contract between remote and host. So if you have a lot of them I recommend building a test harness that provides all that. That being said, I think having a lot of dependencies (state management, etc.) shared between them is a bad idea. An alternative would be to provide context to the MFE with just what is required to drive the MFE.

When using proper SolidJS functionality, I got it to build, but for some reason, it's not exposing the remoteEntry.js file at all (or even creating it in the /dist folder).

Can you give an example of where you would need to use runtime sharing? Because It seems like the cons stack is way more significant than the actual value we are getting here. Also, if reusable components are shared across multiple repos shouldn't we extract them to entirely different Micro Frontend(library works here). Great video!

@jherr

Жыл бұрын

For me a good example would be something like a product recommender carousel. Or even shared comments section.

Our company is kind of looking to build a micro-frontend system, but i am struggling to pick between single-spa framework or module federation. Is module federation along capable of building a great micro-frontend? whats your view on what single-spa can do but not with module federation. thanks!

What do you think about using something like xState for shared state? I liked it as it was very easy to share the context and the various actions in one neat bundle while the component just implements the visuals and triggers for those actions and state.

@jherr

Жыл бұрын

Sharing state as it's primary purpose? That's not great, but if you state fits in the state machine model then go for it.

@adaliszk

Жыл бұрын

@@jherr Yes, we used it to pass a function that generated the machine (had some feature-flagging in there), and then it runs on the remote on its own.

Hey Jack, I don't remember if I made this question in another video. I am using Vite and its module federation plugin. All works fine but when I try to run vitest as test runner I get an error trying to load the remote url, how I can mock that url and tell to my test that ignore the components from remote app used in the host application?

So now I am wondering, how do you unit-test your frontends when your components no longer exist in build time, but only in runtime?

I'm using vue typescript but when building and preview the host I have an error message Cannot find module 'remoteApp/BlueButton' or its corresponding type declarations

Thanks for a great video! I've been testing Vite/MFE with a large remote-app with multiple dependencies, and it seems like this is not the best fit. The Vite-plugin is not able to handle old libs that are not configured exactly the way they're supposed to be. With Webpack, on the other hand, there are workarounds. Looking forward to be able to move away from Webpack when the technology has matured!

@jherr

7 ай бұрын

From what I hear from Evan You Vite is going to put full first class support for Vite into the framework. So here is hoping for improvement.

Verry intersting, i'm wondering, this module federation will work with multiple svelte app ? As svelte app (no sveltekit) doesn't have a dependencies, what to include into the dependices of the fedaration ?

@jherr

Жыл бұрын

Svelte actually works just fine with Module Federation the last time I tried it.

Nice! How do you share the user session to the mfe? Like a user profile and a shopping cart. User profile needs a session so does shopping cart. Can we do two-way-mfe ?

@jherr

Жыл бұрын

You could share the whole session object with an atom, but I'm not sure I would do that. I would create some atoms that pull out the specific data that the MFEs need so that an auth provider could change later.

One question about the bundle size. If remote and host has same dependencies, we will be shipping the same code twice such as react, react-router and all other common stuff. Am I missing sth here?

Thanks for this great video. It definitely helped me a lot to understand the concept using Vite. 🙂I have a question though. I'm trying to use Vite to do dynamic module federation. Meaning, I get the modules that I need from an API and want to dynamically inject them into my host application without manually putting them into the vite.config.ts. I know that this works with Webpack but does this also work with Vite? I tried it out but there seem to be some glitches still. Does anyone have experience with this or can point me towards some information on how to set this up?

@IngeGallito

Жыл бұрын

+1, lazy loading with module federation is a bit tricky

@aayubov

8 ай бұрын

How is it possible to dynamically inject modules? I don’t get it. You have to declare all the modules in the config and then import them in code, right? Even if dynamic import could help with importing something based on API response, how do you update the config?

Hey Jack! Thank you for the video. Had a question, would you consider this production ready? I was looking into this plug-in a few months back and I really wanted to use it for an enterprise application at the company I work for but the team was hesitant about it because it seemed new and not as mature as using module federation through webpack or some of the other frameworks like NX. Would you feel comfortable shipping this implementation with vite/origin plugin to production?

@jherr

Жыл бұрын

I have never recommended Micro-Frontends based on any technology for mission critical UI. So with that being the litmus, I think this plugin is ready for prime-time. That being said, I'm very cautious about when to use runtime sharing. There better be a very compelling reason from a business value perspective, and it needs to be a critical business win not just to engineering, but also to product and business folks. If you are using Module Federation just to "speed up the build" or something like that, then I'm not onboard with that.

@rand0mtv660

Жыл бұрын

@@jherr Thank you for this comment. I'm working on a project where Module Federation has been mentioned few times in the context of "smaller deployable apps that we can build and deploy faster". It's good to know that I wasn't 100% wrong to push back against that because it really seems unnecessary for this particular app.

@jherr

Жыл бұрын

@@rand0mtv660 It's great that we have the capacity to do this runtime sharing that we lost in the move to bundlers. But it should be used with great care.

In real application should we share the whole app component of each remote app, and download it lazy? And how can I implement nested routing in this case?

Just wondering, as you are using PNPM, why do you still use yarn for build tasks etc? Great vid btw!

@jherr

Жыл бұрын

Old habits die hard.

@raellawrence7116

Жыл бұрын

@Jack Herrington haha fair enough. Just finished implementing MF in my apps after watching your vid. Thanks!

Sadly we had to drop vite and migrate back to webpack since vite-plugin-federation does not recommended to mixing Vite and Webpack in React projects, which is the case in our project :( Hopefully they can get this sorted soon

Is anyone else having issues running the host & remote from the github repo? I'm getting an error on the host: `createContext is not a function`

Is there an example of combining vite with webpack and using dynamic rendering to render components? I have tried, maybe this plugin does not support

Jack Thank you for this video super helpful! BUTTTT Im having trouble getting it to play nice with Typescript on my host application. Is there an extra step needed for those of us on Vite but using typescript. I have a module.d.ts file on my host app to declare the modules from my remote apps but I dont think Im doing that correctly. Any tips you can share?

@jherr

7 ай бұрын

You have to declare the types of the remote module in the app that you are importing into. Federated Modules are JavaScript, so they don't have the typings at compile time.

single-spa uses in browser module resolution so effectively also doing run time module resolution. What are the benefits of this approach over that? It feels like single-spa has already done what module federation is trying to do now. But please feel free to correct me if my assumption here is wrong.

@jherr

Жыл бұрын

Single SPA is focused specifically on UI component sharing, and it is _fantastic_ at that. It also helps a lot with inter-framework development. So putting a Vue component on a React page is not a problem with Single-SPA. What Single-SPA doesn't do well is more low level sharing, if what you want to share is just logic, they don't have a model for that AFAIK. FWIW, I see the two approaches as complimentary. Last time I checked Single-SPA could leverage Module Federation as a code transport method. Also I think the import method for Module Federation is way cleaner than SystemJS.

I think MF it's should be used when we need split up our app in a kind of micro-services, where each micro-frontend needs to scale independently from each other (thinking about infrastructure resources). And we should think to use monorepos when the different modules in our app needs to be isolated for each team in our company.

@jherr

Жыл бұрын

Isolated or shared? Monorepos encourage sharing between apps at build-time.

@CavalloGuido

Жыл бұрын

@@jherr Yes, shared code between teams, but at the same time each domain module has to be independent between teams. I mean each team has to be responsible for its own module.

Can you please make a video on Nuxt3 NuxtClientFallback and NuxtErrorBoundary?