Professional Micro-Frontend Shared State Setup

[@demiann4160]

This channel is unique for anyone that wants to push further from beginners content. Content here is ultra high quallity. Well deserved those 50K and hope you get much much more.

[@기운찬곰-k4e]

I completely agree with you.

[@AhmedOsama5]

your channel is the most valuable to me as a frontend engineer who is interested in architecture thank you jack keep publishing these cool stuff

[@ThanasisKapelonis]

This channel is pure quality. If anything, it’s underrated!

[@nuitech2190]

I'm glade to be part of your channel Jack. In a short months I become much better coder since I found your channel.

[@TheRFracer]

This the best channel i found that give you opportunity to learn something more than frontend basics. I will be so happy if i ever have a mentor like Jack. Sometimes you think you know something about frontend but then you see thats a lot more that you can do ... and learn much more.

[@jamdonut]

adding another sub to that 50k buddy. you're really hitting a niche here and helping everyone from junior to lead

[@kelvindavis8808]

This has been beyond helpful navigating the monorepo world. Your videos are amazing!

[@echonabin]

Congrats Jack for your 50k, your content is gems for developers looking to improve their skills from mid to senior-level developers.

[@g-ytub]

Thanks you so much Jack for making this video on Module Federation. It helped me a lot for setup and understanding workflow. You well deserve. :)

[@jefersoncosta2621]

No Jack, THANK YOU for the great content. You deserve at least triple of this number (subs)!

[@admiralicic]

One of the best content creators. This channel deserves way more subs 👍

[@jherr]

Thank you! And it is getting there. :)

[@vigyanhoon]

I like the honesty with which you teach all concepts. I hope you will keep on doing the same.

[@maysamtayyeb4552]

Thank you Jack for your great content. You deserve those subscribers n even more!

[@rucklerful]

Man, i love the micro frontends videos

[@wiberfelicity4591]

Thank you, Jack. This is exactly what I've been looking for.

[@arkadiushauke6258]

Danke!

[@SpaghettiRealm]

Thank you, i don't use React but i still learn a lot from your videos, thank you again Jack you're awesome 😎

[@brianpjweed]

Kudos and congrats on 50k!! The sub count directly reflects the great content you put together for our community! 100k by Oct?

[@АнтонКовалёв-э7к]

Спасибо!

[@philipthomas3503]

Excellent content but main criticism is glossing over the issue that required the use of ‘tsup’ - would’ve been nice to know why it was required, what problem it solved

[@mani8586]

Another great video from Jack...🙂

[@기운찬곰-k4e]

감사합니다.

[@maiaayaaoo7]

Jacky You are the best. Best wishes for your channel. Support from India.

[@jherr]

Thank you!

[@al3xdodo]

You're welcome Jack! We thank you for the great stuff!! Keep going man 🚀🚀🚀

[@billycatchpole3699]

Live reloading with tsup is very nice, thanks and nice find!

[@demiann4160]

What I've seen in some learning workshops is that they separate the progress of the teached lesson by using different commits (SHAs, tags or branches) snapshots. So, by this way, the student can replay the code going from the very initial template to the final version passing through some middle state versions of the code. It is just a dumb suggestion. You content is already top-notch.

[@jherr]

This is the first time I've used branches (or commits), I'll be doing that a lot more going forward.

[@alisonhj]

Congrats Jack! You're the best teacher I ever had!

[@janithrandeniya4504]

Congratulations on 50K subscribers Jack! It’s amazing to see the channel’s growth. We’ve all learnt so much from it! Keep it up 😀

[@rohitghodeswar11]

One step more towards senior to principal consultant. Thanks Jack 😊

[@rikilamadrid]

I feel special. Hehe. Thanks for this man! Cheers !

[@raymondsiu9732]

Zustand looks pretty cool. I have also tried windowed-observable and it works well too with some extra plumbing to setup the pub sub between container and microfe.

[@edentole]

love your videos, keep rocking!

[@DanielJustavino23]

amazing content Jack!

[@marcelsdev]

This is such a great video! Thanks for this

[@ricardobedin2953]

This is amazing, thank you for this video!

[@kemaakpala]

@jherr thanks for your videos on MFe it's really helped with my understanding. I find videos easier to follow than do cs. You mentioned in your video that a centralised store isn't recommended when using redux. 7:01 I know in MFe architecture it's recommended to keep the stores isolated and use a bus as a mediator between the different apps? What are your thoughts on this? And can you explain how using zustand maintains the isolation of the store for the different micro apps.

[@zackjackson9674]

Nice work Jack!

[@nm6x]

Really love your content, especially module federation and micro frontends. Personal wishlist: I would like to see a collaboration with some AWS expert on 2 things: Integrating in the Mono Repo the AWS CDK Stack. Build professional, secure, robust, battle tested microfrontends. Deploying serveslessly your microfrontend and integrating it with a page with Vue, React and Angular (I know you have content on this). Building the AWS Lambda APIs with AWS CDK in your local turborepo (I like Nx more same idea). I would pay (udemy) course for this. Let's make it happen homie!

[@jherr]

If you want to ping AWS DevRel I'd be happy to talk with them about it.

[@nm6x]

@@jherr who or what is DevRel?

[@jherr]

@@nm6x Developer Relations. AWS has a lot of these folks. But I'm currently not a big enough AWS customers to connect with these people.

[@Crevulus]

@Jack Herrington what about GCP? Are they easier to work with/get in touch with?

[@jherr]

@@Crevulus I haven't tried as of yet. It's only in the past three months or so that the channel has become a channel that has an audience size that might interest them. Last time I talked with Microsoft DevRel I only got a couple questions in about Maui before they weren't interested in talking anymore. So I haven't tried working with DevRel since. But the channel is bigger now.

[@grishavasilyan]

Thanks for your videos it's helped me much. After the first time when watched your video about micro-frontend architecture, I started actively researching that. Now I'm writing one project with that architecture and Webpack Module Federation. But I have some problems related Redux store. I created one React application designed for use in any part of project, but only in common cases, in another case, the concrete application may have its own store.

[@jherr]

IMHO, your MFEs should be 95% self-contained, they should have their own independent state (whether that is Redux or not) and the only thing they should share is the user identity and the JWT.

[@farzadmf]

This was sooo nice! Thank you!

[@nazmulsisil]

Thank you very much Jack for this great content. I also have watched your videos about module federation and single spa. In our organisation we are implementing MFEs to our existing codebase but not sure if we should go with single-spa or module federation or turborepo or nx.

[@aayushsharma1106]

Hey, I’m also investigating towards thus direction too and I prefer module federation over single spa, one of the reason being to not e tight coupled with their framework. Turborepo and nx both are great and almost equal but turborepo is lightweight compared to nx. Both are based on mono repo concept and module federation can be used together with it. I’ll say to go for monorepos if your project is not managed by multiple teams

[@janithrandeniya4504]

We went through a similar exercise on our project (100+ developers) and after comparing SingleSpa, Piral, Module Federation, mono-repo and build time dependencies - we are going with Module Federation. A mono-repo would’ve been my personal preference given how the teams are structured but we had some hard requirements for teams to own their own code repositories. Our decision to go with Federation is similar to Aayush’s comment that we didn’t want to be tied to a framework at this level. Having said that the tooling, documentation and questions on StackOverflow etc are much richer for SingleSpa over Federation. There’s no right or wrong answer. I’d recommend doing small proof of concepts in each strategy and presenting it to your team. Weigh up the pros and cons and go with one! Or as Jack has shown on his channel previously, there are ways to combine some of these technologies together to unlock even more 😉

[@aminedaimallah310]

we thank you actually for this beautiful content you give us, so thanks to you a lot, to be honest, I wish if you can make a full premium course and build something like an e-commerce app with Nextjs and new techs, like graphql and typescript and so on

[@SomeIndoGuy]

have you made a video about mantine? this UI library came out of nowhere and with such polished components as well, I'm very pleasantly surprised. Would love to learn more about it, especially on the theming side of things!

[@jherr]

I have not. And you're right, it feels like it has come out of nowhere, even though it is a v4.0 framework.

[@rucklerful]

50 minutes of pure goodness

[@saurav_anand_]

Did tsup work for js only? I don't had Typescript in my project. Same as 16:35 Its giving the error need additional loader to handle the result.

[@ricoaw500]

I love react then come the confusion redux, but I love react again when I know zustand.

[@monawwarabdullah7438]

i guess micro-frontends are really underrated.

[@rocknthesombrero1651]

Congrats 🎉🎉🎉

[@surajdutta5730]

Thank you so much for this

[@AhmedOsama5]

@jack herrington please make a video about next js zones

[@lcarv20]

Congratz on your subs goal. Also turborepo is from vercel not Facebook XD

[@muhammadwaqar1610]

If anyone faced issue of installing zustand and mantine package please use yarn instead of pnpm or npm.Thanks

[@minhkhanhnguyen450]

Hi Jack. Thanks for this great video. Have you tried implementing Module Federations on Nuxt 3 project?

[@jherr]

I have not, if you have and you have some example source code I would love to see it.

[@bolt6572]

Can't believe it was just yday when Jack wanted 50k subs :D

[@remsixstudio]

Hey Jack, Why is my shell App get blank when my remote client is not live.... Tried lazy loading the remote header component inside suspense but failed.. is it the desired behaviour? Any way to avoid this ?

[@jherr]

You might need an error boundary.

[@omarakki705]

Great video thank you so much

[@codehan]

..great content again

[@webcoderspeed]

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

[@fexit-k7f]

You are amazing!! Thanks :)

[@diegodubon47]

can you make a video on how to deploy this 2 kinds of architectures? btw nice content :D

[@pruchay]

Thank you for this awesome video. I have a question. Is it possible to have a common zustand state and extend that state in different micro frontends? I was trying to do that, but in my case, it didn't work. So maybe I did something wrong or it's impossible to achieve such things?

[@just-browsing]

If I am using a monorepo, I don't necessarily need Micro Front-end architecture. What I would have hoped to see in this demo is NOT using a mono repo but sharing the state using zustand. That would have been exciting to see.

[@lactobacillo79]

Another fantastic tutorial Jack, just a note, why not show an example with another app made with a different framework like Vue or Angular and use the same state from zustand, which is another purpose on a MFE architecture.

[@jherr]

I've done a bunch with other frameworks; kzbin.info/www/bejne/f33Fg3xqopd3b7s I have done videos on cross framework state sharing with MFEs but I used NextJS for that because it was a lot lighter weight.

[@shivashankarsajjan24]

Hi Jack Great work :) have a question. I have Monorepo1 ( which consists Micro frontend A,Micro frontend B, Micro frontend C ) Monorepo2 (Micro frontend C,Micro frontend D, Micro frontend E ) Monorepo3 (Micro frontend F,Micro frontend G, Micro frontend H ). I want to put all these 3 monorepos into another monorepo which like a shell. How can we achieve this?

[@макс-х9п9л]

lol I came to see micro frontend, but got monorepo 🤔

[@zlatkoiliev8927]

Great tutorial again! Love your stuff, really learning a lot! One question I have with the current implementation, how do we deploy this on AWS or GCloud for example? I guess the MFE is not aware of any localhost in the cloud env?!? So how the communication between the micro-frontends is happening on the deploy environment? Can we get a video for the deployment setup on this app please? :)

[@gyurilajos7220]

What if the very concept of state and it's management itself is but a "broken wheel" i.e. it is not clear what it is or need be?

[@danielgutierrez4945]

can you make an example or show me a video about how can run a MFE with an Angular like host and remote with React.. pls

[@Zeestack]

Hi Jack, what is the solution to deploy this app? I noticed you manually added dependencies in package.json file. I am assuming the deployment would fail when it will be installing dependencies from package.json. Would we have to publish the dependencies to npm first?

[@jameswee]

Would you still go with Zustand nowadays considering one of their core developers has moved on to work on Jotai? Or would you just go with Recoil?

[@jherr]

Yep. Although if you are talking about Dai-shi, he's been doing both Jotai and Zustand (and several others) for years.

[@jameswee]

​@@jherr Yep I am talking about Dai-shi, it seems you're well informed. I've seen a lot of your state management videos and I feel like the current situation is like we're stuck on a boat between two (or a few) islands if you don't want to use the traditional MobX or Redux. You either choose between Zustand/Jotai which are maintained by one core developer (plus contributors); or pick an experimental Recoil, which is backed by the React team. That's quite a hard sell for many established team.

[@jherr]

@@jameswee At ~600K downloads/wk npmtrends.com/zustand I'm not too concerned about Zustands viability. Popular utilities, in my experience, get maintained.

[@hk_build]

Thanks for great content!! Can you make a video on micro front end where react component is exposed wich is dependent on redux store and middle wares such as redux saga???

[@jherr]

Nope. I'm not going to do that because, as I believe we have discussed,. I don't think it's a good idea to have a large shared Redux store between MFEs.

[@hk_build]

@@jherr yea thanks...I was thinking same not to do that 👍👍

[@hk_build]

@@jherr your content is solid keep up the good work Jack

[@danishansari5746]

Just a question is there way we can implement micro frontends in Nextjs. I searched everywhere found one package paid don't know should I purchase and also there is no official docs for nextjs microfrontends. Please if anyone can help me or guide I am kind of stuck I need ssr and also microfrontends both. Nextjs offer ssr but not microfrontends, react offers microfrontends but not ssr

[@jherr]

If you don't need runtime dependencies then it's very easy. In fact, the out of the box setup for TurboRepo is two NextJS applications sharing a UI library. And using that library you can share Micro-Frontend components (basically smart components). If you want to do runtime dependencies, then yes, at the moment you have to pay. I encourage you to talk with Vercel to get them to add first class support for Module Federation.

[@dearvivekkumar]

I am exploring the way to include micro frontend in one of my projects. Is there pattern for dealing with httpOnly cookies

[@jherr]

Not sure why not. MFEs are just JS on the page.

[@m.jagadishnaidu3859]

Managing state in same frame work/ communicating between apps in same window is not much difficult. Is there any solution to manage state in different frame works even after navigating to other component (except query params)

[@jherr]

You’d want to use a SPA or hold the state in local storage between route switches.

[@ficoprieto]

Can this approach be used to nest multiple frameworks? For example, a Vue card component encapsulating a React tab component that has tabs with content rendered by [Solid, Svelte, etc.].

[@jherr]

Yes, you can. But you'd need something to bridge those worlds. SingleSPA is a good technology for that.

[@julianklumpers]

Nice video! I wonder what your approach will be with Vite instead of Webpack

[@jherr]

It would be to use the build time dependencies. Currently. Deployed ESM is interesting, so that might change.

[@VickyKumar-sd3wu]

Hi Jack, How to get type suggestions in mfes you talked about it in the video that there is a cool way for that and you will be uploading the video. But I am not able to find that in your channel

[@patorikkuelekes]

Great video as always! What is your theme of your terminal in vsc? Do you use zsh? (Some off topic: what do you think about warp?) Thank you!

[@aayushsharma1106]

Love your work jack, nice video One question here, if versioning is required for module federated apps, what will be the best approach in run time? I’m trying out promise based remotes calculation, and using fetch to get version from some text file.

[@jherr]

There was some work done last year to use unpkg to version federated modules. If versioning is required, I have to wonder why runtime is also required though, the two concepts are largely in conflict.

[@aayushsharma1106]

@@jherr won’t it make sense to have versioned rolled out where you just control which build to take forward and rollback to last successful if failure occurs. Can you point me to a direction to look at if I’m mixing two concepts here like approaches better than this.. Thank you for responding back fast

[@jherr]

@@aayushsharma1106 Here is a video on using unpkg - kzbin.info/www/bejne/kHexqYevaMuChZI

[@aayushsharma1106]

@@jherr great, thanks 🤘

[@janithrandeniya4504]

Aayush, it’s also worth taking a look at Zach Jackson’s video on the Medusa Federation dashboard. He talks about version management there and along with Jack’s video on unpkg - it’ll give you some good ideas on how to implement it on your project.

[@goldydog1]

I have been watching a bunch of your module federation videos and their are all really well organized. Thanks! It does seem like this approach introduces a lot of complexity in a lot of spaces that wouldn't have the same problems in a single spa though. Do you have a video along the lines of, "Is module federation right for my team?" Or does your book discuss it?

[@jherr]

I definitely have a section in the book that talks about the cons of the approach and appropriate use.

[@kevinbarns8896]

For the build time configuration, do you still need to import ui to consumers ? as it's also available in games package. Also, in the same configuration, do you still need craco and the webpack breathing workaround (bootloader.js + import()) ? Thanks for the content, great video as usual, your explanation are one of the best I see on youtube.

[@jherr]

You don't need to import UI unless you use it directly. And yeah, you don't need the bootstrapping, or even craco.

[@Ghruuul]

Do you happen to have the same thing for an Angular setup? Awesome content as always! I was also wondering if you have a way to define some kind of data contracts for federated modules (e.g. what data is passed through the store).

[@jherr]

I don't. But more than likely the "Angular Architects" do. They are the primary folks driving Module Federation in the Angular space.

[@tbb134]

thank you bro

[@ayush.kumar.13907]

is anyone else having problems with create-react-app not installing the app for you?

[@pfcosta84]

Hello Jack, awesome stuff as usual! Do you have an example of a shared UI library with CSS modules inside a mono repo solution? I would like to know what strategy you would recommend in order to build this type of library: Typescript + React + CSS modules. Would it be rollup? I've seen that tsup has experimental support for CSS modules.

[@ArunKumar-iy9se]

Hi, jack Can this approach is used for poly repo also? and If it is not please make a video on polyrepo shared state also. Thanks

[@raysk4ever]

can you make some video on how we can do in turborepo?

[@RodrigoMallmann1]

Great Video as always. BTW, what is your vscode theme?

[@jherr]

Night Wolf [black] and Operator Mono

[@RodrigoMallmann1]

@@jherr Cool, definitely trying that out!

[@henryjao5064]

I like the command prompt in your terminal. What plugins do you install?

[@jherr]

just Fig

[@ghazanfarkhan3068]

Only for MacOS

[@evgenius1424_]

Do you plan do to the same with Vite?

[@jherr]

I’ll have a look at the MF plug-in and cover it at some point.

[@quangnguyenvan7297]

Hey, I think just using react in your MF application is not challenging. Now i think we need a solution for MF app with reactjs one time entry app, vuejs, angular even solidjs, svelte,... And it looks like microserivce backend.

[@garywaddell6309]

Another incredible video Jack. I did have a question. I noticed you are using TurboRepo for the shared content, is that a best practice approach? Is there value in having the shared content available via Module Federation and if so I was wondering how the context would work between an App MFE, the Shared MFE as it relates to things like the token etc? I assume state would be contained in each MFE instance by moving the Shared content to an MFE? Thanks in advance and excellent job!

[@garywaddell6309]

Of course, you have answered my question already in kzbin.info/www/bejne/pJu7loCbdtpnick ... amazing Jack!! Bought your book today, excited to go through it!

[@alexandertikhonov4389]

Awesome!!!

[@bryanprimus]

why using create react app? is this not possible with next?

[@jherr]

It is possible with Next, but it requires a pay-for plugin.

[@RodrigoMallmann1]

Is there any reason why you would prefer CRA over Next.js specifacally for MFE and Module Federation?

[@jherr]

NextJS does some hijinks with how they load React that make it challenging use Module Federation. Zack Jackson has published some libraries that make it easier, but you have to pay for them. So for me this was the most accessible route for people to try it out.

[@RodrigoMallmann1]

@@jherr Thanks for the response! I was wondering if it's because Next.js uses SSR. I have to implement an MFE architecture where my exposed module is an Next.js app running on SSR

[@jherr]

@@RodrigoMallmann1 Yeah, currently the only way to do that is to use the commercial NextJS plugin that supports Module Federation.

[@marcosmandamba3296]

It´s great. Thanks!

[@sgermain06]

What plugin shows you the size if your imports?

[@sgermain06]

Nevermind, I answered my own question, it's Import Cost. :P

[@jherr]

Yeah, that came in with RedwoodJS and I liked it so much I just kept it.

[@beep1677]

am i the only one facing issues with mantine due to version of react while installing in packages/ui ??

[@stevereid636]

I’m experiencing issues there as well. Have you managed to solve it?

[@mdmathewdc]

But would I deploy each micro FE independently with its own pipeline?

[@jherr]

Micro FEs are usually a tool for multiple teams to share UI at runtime between each other. Each team would have its own release pipeline. If you don't have multiple teams and multiple pipelines I don't really think you need MFEs.

[@ahammadalipk]

Nx is still far better than turboRepo as far i know, Jack, is there any reason for choosing turbo?

[@jherr]

Lighter weight in this case. I've also used NX in previous videos, so I wanted to change it up.