Module Federation Repo

[00:00:00]
>> Steve Kinney: If we go back to that fun website I showed you before for the module federation, we've got this federation repository. For everything else, we will live here, but first we are going into this fun little federation repository which I have loaded in my editor. But if you don't, you should go and git clone it and we will take a tour of it. But I will go ahead and spin it up. Yeah, let's do it in this terminal so I don't have to look at it ever again.

[00:00:38]
So we won't look at this terminal unless something crashes and I'm panicking. The goal is to never look at this terminal again, so don't worry about it too much. The only thing I want you to kind of notice as I start this up is I'm effectively starting up two servers, right? Would I like to develop this codebase? I have two development servers, one for my shell and one for my one remote, right? That's another thing to think about in these more complicated architectures, which is, what's your development setup going to be like?

[00:01:12]
Are you going to use the other team's modules that are in production, staging, development? But what if you all need to develop something together? How does that work if you're pointed against their production versions or their staging versions, right? Again, thinking about how would I spin this up in development? We have two apps, and the group of us could riff on all sorts of different fun ways of, well, maybe like whatever's on main for all of them, we pull them down.

[00:01:42]
Maybe they're running on a shared infrastructure on the VPN. Yeah, again, the complexity, autonomy, welcome to it. And I'm not going to go into what your VPN at your company looks like because each and every one of you has a different nightmare to live through in terms of corporate VPNs or other infrastructure or something along those lines. Or if you don't, just wait until your company gets more successful and you will.

[00:02:06]
When they start hiring security folks for very important reasons, everything will get harder. Cool. So we've got basically two parts of this app, which are we've got this host and these remote analytics. And it feels like my app is at localhost 3000, and it looks like my app is at localhost 3000, but that's kind of a lie. I mean, it's not really a lie. I'm at localhost 3000 and there is an application running there, but it's really, if we go into the network, running effectively two places as you can see.

[00:02:53]
We've, this is kind of like one of our little sub-apps which is the dashboard, and then we've got kind of the version with the side panel. So really this is kind of our host app surrounding our one federated module in this case. And on one hand, other than one responsive design thing I didn't think about because I put my developer tools down there before, it works. There are some things to notice though.

[00:03:26]
You know, we saw the multiple ports. We can also see that the application shell is pretty sure we're logged in, right, logged in, air quotes. And yet the remote thinks that we're not logged in, right? Because on one hand, the advantage here is that all of our pieces are isolated. On the other hand, the problem is all of our pieces are isolated, right? And I won't spoil the problem, which is y'all like the context API most of the time, right, because you don't turn on the thing where it shows you when things re-render.

[00:04:10]
So you like it because it makes state management seem easy. Yeah, that works for a React tree, but you've now broken your app up into multiple React trees, so you don't get a context API anymore. I mean, you do for each React tree, right? And so again, more autonomy, more problems. That's new content that was not a joke that I had prepared, so you know, live jokes, live coding, it's what we sign up for around here.

[00:04:41]
So again, we have things at 3000, 3001, but that's the kind of shape of our app at this point. And so that's pretty cool, but now again, we have a few problems. But let's actually look at some of the module federation stuff as well and kind of get a sense of how does this work, because perhaps you don't have this setup and you're like, there are parts of this I like that I would like to know more about.

[00:05:06]
So let's learn about module federation because for some people, again, my friends that work at companies whose names we all know, right, and possibly some of our parents know and stuff along those lines, there's no other option, right? They have, there's some version of this world that they have to live in. At that size, you end up here no matter what. I say that Google's technically a monorepo for the entire company.

[00:05:35]
Even Angular is part of that repo. It's weird. But generally speaking, a lot of us now live in this world where you will get to a point where you end up with something close to this. So if we look at from coming from port 3001, so a remote app, we've got this MF manifest .json, right? I was going to see if I colored it. And this is from that federated module. This is from one of the sub-apps. And this is a JSON configuration that it exposes.

[00:06:09]
It is called remote analytics. I would never call it that normally. It is the remote app. The sidebar is the host app. I would just probably call it analytics or dashboard or something like that, but I'm trying to make a point here. So this is our remote app in our module federation, like one of the sub-apps, not the shell. And you can see that it is exposing a bunch of configuration. One is like that public path of where to go find it, because again, we're not doing this at build time.

[00:06:40]
The shell loads, then it looks for these, you know, it has a manifest of what are the sub-things I'm supposed to load. And then it's going to that Vercel deploy or that S3 bucket or that Cloudflare CDN-like place where you're hosting your team's piece, and it is going and using that import statement to go fetch it lazily and load it in there, right? So some problems that we will have to deal with together as a group over the course of the day is, when does it upload?

[00:07:12]
Can you load it in pieces? Do you have to wait for all of it? How do you handle that, right? All handleable, but now things that you didn't have to think about when you're shipping one bundle.