These tutorials is going deep into react, most of tuts I watch usually only scratch the surface, but he dive deep and explain the thought process to us. Thanks
let's gather all ways of doing micro frontends such as module federation, workspaces, single spa and compare them and figure out when and what to use. Great thanks to Jack for his excellent job
Fantastic video. Great content. Just having an up to date guide to untangle the mess that can be monorepos is gold on its own. The MFE stuff is just extra.:)
Always looking forward to your videos Jack and this one just sumed up everything we have been working on for past 5 months!!. Such a great channel. Also, how cool is mantineui?!!
Hey Jack, thank you for this amazing content! Your videos helped me to setup an almost similar project structure a few months back. I was wondering though how can such a project be deployed? Can you make a video about that topic in the future maybe?
Hi, nice video! Fyi, React.lazy uses an async import, so we can simply render the local component in its catch block, instead of using an error component as a wrapper. Ex: import(mfe).catch(()=>())
There is a refresh button on the folder tree icons section next to the create new folder icon. When you make a file via terminal and don't see it, you can just click that button.
Hey @Jack Herrington, when you create a new folder on the cli and vscode does not show it immediately, you can simply refresh in the browse sidebar instead of restarting the tool :)
Could you please share the “Architectural chat build time vs run time” you mentioned at 45:03? Very exciting topic, I kinda feel that people tend to miss that point and go with MFEs, just because it’s modern and cool
Awesome video. Correct me if I'm wrong, but you refer to Card as a MFE, but technically since it's being shared as a dependency and not as a remote (if it is, I missed it), wouldn't the proper language be shared dependency? I think this is an important distinction when developing a mental model for module federation (and an important feature to leverage), because a naïve approach might be to expose all custom components as remotes rather than leverage runtime dependency sharing.
Early on that was one of my MFE criteria, but I'm not so sure anymore. I don't know if there is an "official" designation here. My personal definitely used to include remotely loading, but I've stepped back on that. IMHO, from an architectural perspective an MFE needs to be self-contained, manage its own state, and service requests. And whether it's runtime loaded or not is a deployment detail. Even so, it is runtime loaded at the end, so it is an MFE by a definition that requires runtime loading, it's an MFE by the end.
@@jherr Thanks for clarifying that Jack, I was also a bit confused as I had baked into my mental model that MFE required module federation, but as you say, that is a deployment concern and softening that definition to 'runtime linked' makes sense
Thank you for the video. One question, and maybe it changed when you converted things to MFs: early in the video, you had make sure the React versions match, but isn't the whole idea of having MFs so that are fully self-isolated, allowing each one to use whatever library/versions they want to use?
You can do that with scopes in Module Federation. Or you could do it with Single SPA. But I wouldn't call it the central idea of federated modules. IMHO.
Thanks, Jack this is incredible! I learned so much from you. I'm looking for a solution for using mfe with multi frameworks (react & vue). and handling routing I couldn't find a tutorial that used module federation to handle it. if you will make this tutorial it could be helpful for me. thanks again
Just out of curiosity, why are you transpiling the TS to JS, if the whole monorepo code is built using TS? I mean, couldn't a package's main entry point just point to the index.ts and let the bundler decide how to interpret the file? I've been using this approach with lerna and webpack and it is working very nicely.
The NextJS configuration out of the box does just that. But moving to CRA (to eventually support MF) meant moving to their Webpack ts-loader config which I think restricts TS inclusion to just the application directory. Not 100% sure. But I couldn't get it to work without it. If you can, please let me know.
Jump on the Discord server and into the #module-federation channel and maybe we can get you going. FWIW, if you are using exactly "create--react-app" then your issue is that you have an extra dash, it's "create-react-app"
@@jherr If you check the initial page load, you will see that React.lazy is not really "lazy", because each remoteEntry.js always is loaded by Webpack at the beginning, without take care if the federated module is lazy or not. My solution to this is avoid to declare the federated module in ModuleFederationPlugin, and import remoteEntry.js just when the module is needed using __webpack_init_sharing__ and __webpack_share_scopes__
Whats the advantage of using a monorepo vs multi repo approach? Wouldnt it make more sense to have multiple repos for MFE/apps that each feature team would maintain? Isnt it just another monolith at the end of the day?
You could do this with a multi-repo setup, it's just a whole lot harder to make a video around that and to share the code out. To share the code I'd want to put it into one repo, a "mono" repo, if you will. :)
Hello Jack, do you know what is the difference between Single-SPA and monorepo ( Nx/turnoRepo) ? Which one is the best ? In case of an MFE with only React as framework
Great video. Super simple approach that is easy to keep track of. I'm curious how you manage nested routing though. Let's suppose your movies app had additional routes. I've seen some templates on the Federation Module template and they use Memory Router, but I'm wondering if there is a better way of managing nested routing so the back button and URL links work.
Module Federation doesn't really have anything to do with routing. All it does is move code from one app to another. So how you do sub-routes depends on the specific router you are using and how it does it.
Do you have any experience/thoughts on Piral? It seems like it would be a good fit when you want to have a common app shell. You only need to host the shell app and an API rather than hosting each individual piece you want to make available with module federation. Maybe a monorepo solution makes more sense for MFE?
Superb Video bro! Can you please make a video on Micro Frontend (mf), with react, anuglar and vue; with isolated routing, just like how works. Pleased consider react as the host/base mf app. And if possible can you consider Piral, since it does the job i think,, (not sponsored, but I am trying to use it😅) It would be very much helpful! Regards
Is there still currently no way to share the dependencies versions in workspaces ? for example when you install mantine twice it means to update mantine you'd have to update it twice again instead of for example defining the version in a parent config (like for tsconfig) ? Same issue with react versions apparently ?
You can use something like this: www.npmjs.com/package/syncpack I'm not sure how it's any better with split repos. I've seen the hell it is to do synchronized PRs across multiple teams.
Hi Jack, is there any way to share declaration files from MFE to the Host app. if both are in different repo how we shared that, and also, as MFE will only load on run time, so is there any way to get the type intelligence of the consumed MFE component?
Hey Jack! This is super informative and interesting, thank you for making this exceptional content. How would you integrate something like storybook into a monorepo like this? With that in mind, would you ever consider having a single package for all UI elements, which are then tested in storybook? If so, would the cleanest way to do this be to just manually export them?
Woof, Storybook. I have it running on my work monorepo that has this structure, but it was a PITA to set up. Maybe I'll make a video on that. Yeah, it's basically a manual export and then also the storybook that we publish via Pages.
Hey Jack! Very nice video as always. But I have a question that I haven't seen you address yet. Let's say I am working for a company that wants to provide multiple storefronts for as many users as sign the service. Each client would have an api running inside a docker container so that each store has their own environment and doens't get impacted by another store's requests. Another requirement would be to serve the frontend from within those containers. But in order to aleviate the building costs, or having to rebuild every single one of those containers each time we push frontend code, I am structuring a MFE setup where each application would consume our frontends as runtime dependencies. One thing that has been getting in the way is environment variables. We need our frontend to know the application's URL, as well as a bunch of assets and configurations that vary depending on the store. One approach would be to have our shell layer as a build time dependency so that it can have the same env as the application and we configure it with the env we want. But then, we would need to pass it down, or let our runtime front end access it through the store. The thing is, I don't actually know which would be the right approach or how do enviroment variables work in MFE setting. It would be great if you could show us in a video how to operate like that, having to work with environment variables in a runtime dependency setting. Thank you for your amazing content, teachers like you contribute so much to this community it's unbelievable.
I think the code in this video shows a lot of that. It's a combination of build time dependencies (e.g. the store and the appshell) and the runtime dependencies of the MFEs that also use those build time modules. Honestly I get a lot of requests to build out very complex setups (like this one) as videos. These videos take weeks to develop, code, produce, etc. And they don't perform particularly well or result in a lot of new subscribers. The deeper the video the more limited the potential audience. So while I appreciate that you want me to produce a video specific to this use case my advice to you is to take what you can from this video content, then combine it with other videos/blogs/your own research and come up with your own architecture. Get something that works and matches your requirements, then refine as time allows.
Hi Jack thank you so much for those MFE vids, really need them, because web full of MFE vids but all of them are crap, you can tell by how they explain why we need MFE 🤣🤣🤣.
I'm trying this out, but for some reason, when trying to add a new app in the apps directory, I get an error about unsupported URLs for workspace:*. Looks like this doesn't work on nodejs 18. I downgraded to nodejs 16 and it works just fine.
Bit confused with micro front end and monorepo tools. If we use use nx and build our own shared libs and independent apps and with the help of nx affected, find out which app needs to be rebuilt. Then can we say that we dont need MFE ?
If you are reusing shared smart component between applications then you are basically doing MFEs. You can be more formal about it and specify API contracts and such, but the general term of what is and what is not an MFE is fairly loose.
@@dolapex You can dynamically tweak the URLs for the remote entry before you load them. That being said, I would not recommend it in a normal case. You should have one URL for development and one URL for production that points to where you CDN deploy the federated modules as static assets. Federated modules are just JavaScript files. And you should deploy and manage them just as you would any other JavaScript file, as a static asset, preferably on a CDN. You should not be serving these assets off of origin.
@@jherr thank you so much. I understand now. When we use the data={id: {}} notation it is more performant to get an unique item by id ( data[id] ). We do not need to filter through the all items to get the item with id. Thanks anyway.
Thanks for the video sir, absolutely amazing stuff, could I ask what Is this .dio file you are using? It’s really awesome and I wanna use something like that too
Hey Jack, I want to create a shell application (based on React) that can consume micro frontends based on Angular (and other libraries/frameworks of course). Is there a way to create something like this with create-mf-app or similar? I created a version of that with NX but I need alternatives that we can evaluate within our team. Would be great if you could provide a tutorial on this topic as well, since a lot of devs are interested to combine React and Angular micro frontends. Thanks for the great content by the way. I learned a lot of important things here :)
I wish you make a video tutorial about this "Module Federation / micro frontend" for beginners, .. cause i try watch these "micro frontend" videos, but i get totally lost and have no idea what are you doin !!!.. and i trying to understand what you are building !! lol.. 😊👍
Pls help me or at least give me a hint if u have time sir it's very urgent as a part of developer team for my company I have been assigned a task to covert a redux of a module in mico frontend can me pls suggest me a way how redux coding should me done in mico frontend
thanks for the video sir! could you explain why module federation doesn't incompatible with nextjs? as far as I know, it is possible to extend "plugins" section of nextjs webpack config with module federation plugin and all works fine, or am I misunderstanding something.. -_-
The way that NextJS loads React is non-standard and to get Module Federation running you need to do a little patching that is version specific. Zack Jackson has a commercial plugin that does this work and people and teams use it. I haven't done any videos on it because in general I like to cover free software that everyone can use.
I really was looking forward to follow this but you added to many libraries/packages , turbo , mantine , zuston etc all are new to me , so the fun went away ☹
TBH there are so many videos of yours on MFE and with similar titles and repetitions that it's become so overwhelming to understand. It would have been better if you summarize everything in one video so u dont have to repeat in so many videos again and again. Idk if it's for views or getting subscribers, but for me it's too much. for example Traversy media doesn't make so many videos on the same topic so it's easy to focus and not overwhelm yourself with his videos. Now I am not saying your videos are not useful they definitely are and I am very thankful but please make them precise and focused on a specific topic. Thank you.
Well ok, there is this: ruclips.net/video/s_Fs4AXsTnA/видео.html . I get your point. But, one, this technology is evolving, as are best practices. I could probably retire some of the older videos, but a lot of folks still watch them and seem to get value out of them.
@@jherr okay, I understand now. Maybe I should focus on your latest videos on MFE and only that are relevant to my topic of interest. Thanks for the reply and all your content Jack 🙏.
Have you ever run into a problem when adding nested routes causes the app to look for remoteEntry.js under the nested directory. For example causes the app to look for /test/remoteEntry.js instead of it just looking for it at the root. I'm stuck on it and can't seem to figure out how to fix that.
You are creating webdev content at a level of quality that literally does not exist anywhere else on the Internet.
Thank you! I appreciate you saying that.
WOW 🤯 you are dealing with the themes that allow me to move to a higher level. Thanks for your fantastic work, you are a real MASTER 😊🙌🏻
These tutorials is going deep into react, most of tuts I watch usually only scratch the surface, but he dive deep and explain the thought process to us. Thanks
Jack your videos are absolutely fantastic. You are such a brilliant teacher.
Thank you!
Most comprehensive MFE tutorial you have ever created !!
I think this is your 5 or 6 th video on MFE. So thankful for these 2 years of your teaching on mfe techniques and best practices.
let's gather all ways of doing micro frontends such as module federation, workspaces, single spa and compare them and figure out when and what to use. Great thanks to Jack for his excellent job
What a video, just pure gold. Gonna recommend you to everyone!❤❤
This video takes me to the next level. I plan to implement this architecture in my current company. Hope to see more videos like this :)
This was really helpful for our small project, which we expect to scale in the future. Thank you, Jack!!!
I was about to sleep. But now after seeing this video, I am like.. nah, an hour later. Please keep making these videos!
wow just wow...since i started seeing your contents i have been a better web developer, Thank you!🙌
Loved these MFE tutorials, I'm currently implementing this in our product.
Wow, just found out about your channel. Extremely high-quality content. Learned a lot.
You are publishing million dollar content for free. Respect ❣️
you are help me have a better overview of web development. Thank you and good health
You represent the standard of best practice to me. thanks
Wow! Thank you!
Fantastic video. Great content. Just having an up to date guide to untangle the mess that can be monorepos is gold on its own. The MFE stuff is just extra.:)
Yeah, the monorepo stuff is nowhere near as bad as it used to be.
Always looking forward to your videos Jack and this one just sumed up everything we have been working on for past 5 months!!. Such a great channel.
Also, how cool is mantineui?!!
So cool!
You are always creating MFE content. I really apreciatte very much. Keep going, my full support from Argentina
Your channel is a masterpiece.
Hey Jack, thank you for this amazing content! Your videos helped me to setup an almost similar project structure a few months back. I was wondering though how can such a project be deployed? Can you make a video about that topic in the future maybe?
Please make a video on deployment
Yes, I was wondering how we can deploy the packages to npm registry? Is there a video/tutorial to follow to accomplish that?
Hi, nice video! Fyi, React.lazy uses an async import, so we can simply render the local component in its catch block, instead of using an error component as a wrapper. Ex: import(mfe).catch(()=>())
GOD bless you sir, Cause HE loves a cheerful giver! thank you so much jack
One more awesome video Mr Jack! Can you show us how the best approach to deploy the federated modules to production? Thank you!
The Mantine UI library is freaking awesome! Please make a tutorial for it if you have the time, Jack! Thank you
Thank you very much for awesome content.
I wish you make a video about react three fiber 😬
So awesome. Keep it up Jack ;). You make things look so damn easy to do :D
There is a refresh button on the folder tree icons section next to the create new folder icon. When you make a file via terminal and don't see it, you can just click that button.
Hey @Jack Herrington, when you create a new folder on the cli and vscode does not show it immediately, you can simply refresh in the browse sidebar instead of restarting the tool :)
Ah yes… forgot about that. Thanks!
Great content. Thanks you so much.
Could you please share the “Architectural chat build time vs run time” you mentioned at 45:03?
Very exciting topic, I kinda feel that people tend to miss that point and go with MFEs, just because it’s modern and cool
😲 gracias for this man!
Hey Jack, Thank you so much for the wonderful tutorial. Can you please make a video on deployment process.
Awesome video. Correct me if I'm wrong, but you refer to Card as a MFE, but technically since it's being shared as a dependency and not as a remote (if it is, I missed it), wouldn't the proper language be shared dependency? I think this is an important distinction when developing a mental model for module federation (and an important feature to leverage), because a naïve approach might be to expose all custom components as remotes rather than leverage runtime dependency sharing.
Early on that was one of my MFE criteria, but I'm not so sure anymore. I don't know if there is an "official" designation here. My personal definitely used to include remotely loading, but I've stepped back on that. IMHO, from an architectural perspective an MFE needs to be self-contained, manage its own state, and service requests. And whether it's runtime loaded or not is a deployment detail.
Even so, it is runtime loaded at the end, so it is an MFE by a definition that requires runtime loading, it's an MFE by the end.
@@jherr Thanks for clarifying that Jack, I was also a bit confused as I had baked into my mental model that MFE required module federation, but as you say, that is a deployment concern and softening that definition to 'runtime linked' makes sense
Thank you for the video. One question, and maybe it changed when you converted things to MFs: early in the video, you had make sure the React versions match, but isn't the whole idea of having MFs so that are fully self-isolated, allowing each one to use whatever library/versions they want to use?
You can do that with scopes in Module Federation. Or you could do it with Single SPA. But I wouldn't call it the central idea of federated modules. IMHO.
Thanks, Jack this is incredible! I learned so much from you. I'm looking for a solution for using mfe with multi frameworks (react & vue). and handling routing I couldn't find a tutorial that used module federation to handle it. if you will make this tutorial it could be helpful for me.
thanks again
Hay @Jack Herrington, can you tell me please, what's the advantage of using Runtime imports?
Just out of curiosity, why are you transpiling the TS to JS, if the whole monorepo code is built using TS? I mean, couldn't a package's main entry point just point to the index.ts and let the bundler decide how to interpret the file? I've been using this approach with lerna and webpack and it is working very nicely.
The NextJS configuration out of the box does just that. But moving to CRA (to eventually support MF) meant moving to their Webpack ts-loader config which I think restricts TS inclusion to just the application directory. Not 100% sure. But I couldn't get it to work without it. If you can, please let me know.
Nice content Jack! Trying to follow your guide but getting some issues with pnpx when installing create--react-app (using v 7 of pnpm)
Jump on the Discord server and into the #module-federation channel and maybe we can get you going. FWIW, if you are using exactly "create--react-app" then your issue is that you have an extra dash, it's "create-react-app"
@@AndreiKashkan Here is an invite link to the server: discord.gg/PCzzeq67
Yeah, GREAT content, thank you! There are issues with module federation related to lazy loading. Could you explain how you manage that, please?
At the end of the video I cover lazy loading federated modules safely. If you have questions after watching that let me know.
@@jherr If you check the initial page load, you will see that React.lazy is not really "lazy", because each remoteEntry.js always is loaded by Webpack at the beginning, without take care if the federated module is lazy or not. My solution to this is avoid to declare the federated module in ModuleFederationPlugin, and import remoteEntry.js just when the module is needed using __webpack_init_sharing__ and __webpack_share_scopes__
4:45 What Jack is _really_ saying here is what I have always said: Blade Runner 2049 is the greatest movie ever made
I think I added some Dune backgrounds later. Hahaha. Really any Denis Villeneuve works for me.
Whats the advantage of using a monorepo vs multi repo approach? Wouldnt it make more sense to have multiple repos for MFE/apps that each feature team would maintain? Isnt it just another monolith at the end of the day?
You could do this with a multi-repo setup, it's just a whole lot harder to make a video around that and to share the code out. To share the code I'd want to put it into one repo, a "mono" repo, if you will. :)
@@jherr ah makes sense.
Thanks for making the video by the way, super informative! 🙏
Hello Jack, do you know what is the difference between Single-SPA and monorepo ( Nx/turnoRepo) ? Which one is the best ? In case of an MFE with only React as framework
Dr. Strange is definitely worth watching :)
Excellent video, thank you so much for sharing. I have a question, is it possible to use this same approach from the module federation with vite?
Vite does have a module federation plugin, but it's very early days. Module Federation is baked into Webpack 5.
Great video. Super simple approach that is easy to keep track of.
I'm curious how you manage nested routing though. Let's suppose your movies app had additional routes. I've seen some templates on the Federation Module template and they use Memory Router, but I'm wondering if there is a better way of managing nested routing so the back button and URL links work.
Module Federation doesn't really have anything to do with routing. All it does is move code from one app to another. So how you do sub-routes depends on the specific router you are using and how it does it.
@@jherr I will dig into the routers then and see what's possible. Thanks!
Do you have any experience/thoughts on Piral? It seems like it would be a good fit when you want to have a common app shell. You only need to host the shell app and an API rather than hosting each individual piece you want to make available with module federation. Maybe a monorepo solution makes more sense for MFE?
I tried Piral but I found, for my tastes, that it was too prescriptive and I didn't like some of the decisions that had been made.
Superb Video bro!
Can you please make a video on Micro Frontend (mf), with react, anuglar and vue; with isolated routing, just like how works.
Pleased consider react as the host/base mf app.
And if possible can you consider Piral, since it does the job i think,, (not sponsored, but I am trying to use it😅)
It would be very much helpful!
Regards
Thank you very much,,,i am considering your like as yes
Is there still currently no way to share the dependencies versions in workspaces ? for example when you install mantine twice it means to update mantine you'd have to update it twice again instead of for example defining the version in a parent config (like for tsconfig) ?
Same issue with react versions apparently ?
You can use something like this: www.npmjs.com/package/syncpack
I'm not sure how it's any better with split repos. I've seen the hell it is to do synchronized PRs across multiple teams.
Hi Jack, is there any way to share declaration files from MFE to the Host app. if both are in different repo how we shared that, and also, as MFE will only load on run time, so is there any way to get the type intelligence of the consumed MFE component?
Hey Jack, Little bit unrelated question. What is the extension you are using which shows zipped file size when you import?
It's called "Import Cost" by Wix
Hey Jack! This is super informative and interesting, thank you for making this exceptional content.
How would you integrate something like storybook into a monorepo like this?
With that in mind, would you ever consider having a single package for all UI elements, which are then tested in storybook? If so, would the cleanest way to do this be to just manually export them?
Woof, Storybook. I have it running on my work monorepo that has this structure, but it was a PITA to set up. Maybe I'll make a video on that. Yeah, it's basically a manual export and then also the storybook that we publish via Pages.
@@jherr That'd be amazing and I'd be immensely grateful - my use case would also be for work!
@@jherr Absolute legend 💖💖💖💖
Hey Jack! Very nice video as always. But I have a question that I haven't seen you address yet.
Let's say I am working for a company that wants to provide multiple storefronts for as many users as sign the service. Each client would have an api running inside a docker container so that each store has their own environment and doens't get impacted by another store's requests. Another requirement would be to serve the frontend from within those containers. But in order to aleviate the building costs, or having to rebuild every single one of those containers each time we push frontend code, I am structuring a MFE setup where each application would consume our frontends as runtime dependencies. One thing that has been getting in the way is environment variables. We need our frontend to know the application's URL, as well as a bunch of assets and configurations that vary depending on the store. One approach would be to have our shell layer as a build time dependency so that it can have the same env as the application and we configure it with the env we want. But then, we would need to pass it down, or let our runtime front end access it through the store. The thing is, I don't actually know which would be the right approach or how do enviroment variables work in MFE setting. It would be great if you could show us in a video how to operate like that, having to work with environment variables in a runtime dependency setting.
Thank you for your amazing content, teachers like you contribute so much to this community it's unbelievable.
I guess I should have said that I am using CRA, since nextJs doesn't really work without the paid plugin.
I think the code in this video shows a lot of that. It's a combination of build time dependencies (e.g. the store and the appshell) and the runtime dependencies of the MFEs that also use those build time modules.
Honestly I get a lot of requests to build out very complex setups (like this one) as videos. These videos take weeks to develop, code, produce, etc. And they don't perform particularly well or result in a lot of new subscribers. The deeper the video the more limited the potential audience. So while I appreciate that you want me to produce a video specific to this use case my advice to you is to take what you can from this video content, then combine it with other videos/blogs/your own research and come up with your own architecture. Get something that works and matches your requirements, then refine as time allows.
@@jherr Wouldn't expect any other answer from you Jack! Stay true, cause you rock!
YES!!!!!!
Hi Jack thank you so much for those MFE vids, really need them, because web full of MFE vids but all of them are crap, you can tell by how they explain why we need MFE 🤣🤣🤣.
I'm trying this out, but for some reason, when trying to add a new app in the apps directory, I get an error about unsupported URLs for workspace:*. Looks like this doesn't work on nodejs 18. I downgraded to nodejs 16 and it works just fine.
Bit confused with micro front end and monorepo tools. If we use use nx and build our own shared libs and independent apps and with the help of nx affected, find out which app needs to be rebuilt. Then can we say that we dont need MFE ?
If you are reusing shared smart component between applications then you are basically doing MFEs. You can be more formal about it and specify API contracts and such, but the general term of what is and what is not an MFE is fairly loose.
saved it watch later
What is the way to go for mfes, create-turbo or your create-mf-app? Thank you for your videos, i've learned quite a lot.
For production? Turborepo + Create React App. Create MF App is only designed to build POC applications.
@@jherr Thank you very much. :)
Hey, awesome video Jack!. One question, how works these approach for a production application ?
What specific production concerns do you have?
@@jherrmy doubt here is how can we configure Module Federation without hardcode the endpoints for production to consume the micro applications.
@@dolapex You can dynamically tweak the URLs for the remote entry before you load them. That being said, I would not recommend it in a normal case. You should have one URL for development and one URL for production that points to where you CDN deploy the federated modules as static assets. Federated modules are just JavaScript files. And you should deploy and manage them just as you would any other JavaScript file, as a static asset, preferably on a CDN. You should not be serving these assets off of origin.
@@jherr Thanks! keep rocking!
Love the content you are providing...
crazy good
Hey man lov your content, it has helped me grow a lot. I have a question: Can I use Vite instead of CRA with this stack?
Up to the point where you do runtime sharing, yes.
@@jherr Thanks !!
I have seen normalization on the data couple of times. Instead of [{},{}], {1:{}, 2:{}} is used. Why is that ? By the way i love you soo much.
Not sure I understand. If you want you can join my Discord server discord.gg/PCzzeq67 and post your question in the #TypeScript channel there.
@@jherr thank you so much. I understand now. When we use the data={id: {}} notation it is more performant to get an unique item by id ( data[id] ). We do not need to filter through the all items to get the item with id. Thanks anyway.
Thanks for the video sir, absolutely amazing stuff, could I ask what Is this .dio file you are using? It’s really awesome and I wanna use something like that too
It’s a diagram.I’m file and there is a vs code extension that integrates the diagram.I’m editor.
@@jherr thank you kindly
thumbnail reminds me of Gojo's curse technique reversal.
😂😂😂
Red!
@@jherryaaa 🤩🤩🤩
you know it.
Nextjs still not support module federation?
Not directly, no.
How would you be able to import app in nx monorepo?
Can you route between the two MFEs?
Yes.
Any courses you have? Would love to unlearn and relearn from you
I have No BS TS, which is available in the playlists.
@@jherr Going through it! Do you have a slack/discord community? Would love to hear your views on everything web dev related.
Hey Jack,
I want to create a shell application (based on React) that can consume micro frontends based on Angular (and other libraries/frameworks of course). Is there a way to create something like this with create-mf-app or similar? I created a version of that with NX but I need alternatives that we can evaluate within our team. Would be great if you could provide a tutorial on this topic as well, since a lot of devs are interested to combine React and Angular micro frontends.
Thanks for the great content by the way. I learned a lot of important things here :)
Have a look at single-SPA. It’s set up to support that.
@@jherr Wow, that was quick. Thank you very much, I will take a look at single-SPA. Looks very promising :)
Can you tell me how can I use multiple projects on one domain?
At Nike and Walmart Labs we used Akamai to distribute traffic to different applications based on URL.
@@jherr i hope you can have a video introduce about it, thanks very much, good content
I wish you make a video tutorial about this "Module Federation / micro frontend" for beginners, .. cause i try watch these "micro frontend" videos, but i get totally lost and have no idea what are you doin !!!.. and i trying to understand what you are building !! lol.. 😊👍
Sorry... Was hoping using the architecture diagram and going back to that in every section would have helped.
What ara micro front end framework ? Can you make videos on that
I have in the past made videos on SingleSPA, which is an MFE framework. There is also Piral and OpenComponents, as well as Web Components.
Do mantine has any datatable or datagrid ?
I has a Table mantine.dev/core/table/ that you could wire up with react-table to do paging and what not.
@@jherr Do you has some example to wire up with react-table ?
@@MegaTheNone No. I haven't worked with that component.
@@jherr And what about datetime picker ?
@@MegaTheNone You can just Google that, the top result for Mantine Date Picker is mantine.dev/dates/date-picker/
Pls help me or at least give me a hint if u have time sir it's very urgent as a part of developer team for my company I have been assigned a task to covert a redux of a module in mico frontend can me pls suggest me a way how redux coding should me done in mico frontend
thanks for the video sir! could you explain why module federation doesn't incompatible with nextjs? as far as I know, it is possible to extend "plugins" section of nextjs webpack config with module federation plugin and all works fine, or am I misunderstanding something.. -_-
The way that NextJS loads React is non-standard and to get Module Federation running you need to do a little patching that is version specific. Zack Jackson has a commercial plugin that does this work and people and teams use it. I haven't done any videos on it because in general I like to cover free software that everyone can use.
I really was looking forward to follow this but you added to many libraries/packages , turbo , mantine , zuston etc all are new to me , so the fun went away ☹
how do you know so much
I make a LOT of mistakes, so I learn a lot from all that failure. Hahahah.... :)
TBH there are so many videos of yours on MFE and with similar titles and repetitions that it's become so overwhelming to understand. It would have been better if you summarize everything in one video so u dont have to repeat in so many videos again and again. Idk if it's for views or getting subscribers, but for me it's too much. for example Traversy media doesn't make so many videos on the same topic so it's easy to focus and not overwhelm yourself with his videos.
Now I am not saying your videos are not useful they definitely are and I am very thankful but please make them precise and focused on a specific topic. Thank you.
Well ok, there is this: ruclips.net/video/s_Fs4AXsTnA/видео.html . I get your point. But, one, this technology is evolving, as are best practices. I could probably retire some of the older videos, but a lot of folks still watch them and seem to get value out of them.
@@jherr okay, I understand now. Maybe I should focus on your latest videos on MFE and only that are relevant to my topic of interest. Thanks for the reply and all your content Jack 🙏.
Have you ever run into a problem when adding nested routes causes the app to look for remoteEntry.js under the nested directory. For example causes the app to look for /test/remoteEntry.js instead of it just looking for it at the root. I'm stuck on it and can't seem to figure out how to fix that.
Sounds like you have the URL of the remote entry incorrect in your webpack config.