Micro-Frontends Course - Beginner to Expert

Key Takeaways

jack carrington is an excellent teacher and he's about to teach you how to develop web apps with micro front-ends i'm jack harrington i was a principal engineer at nike and also at walmart labs and i'm here to talk to you about what micro front ends are and get you up to speed on that so why do you want to do that well lots of fortune 500 companies are very interested in a topic of microfinance and there's a good reason for that so in this video i'm going to walk you through micro front ends all the way from tip to tail but as anybody who has watched my channel before which is linked to in the description they'll know that i like to entertain as much as i like to educate so i'm gonna do a good action movie trope and jump you right into the heart of the action before backtracking and laying the foundation so let me get you excited about micro friends first and then i'll talk to you about what comes next so don't worry in this first section if you get confused it'll all be clear by the end so let's jump right into vs code right now i'm over in vs code and i'm going to bring up the terminal actually i'm going to bring up two terminals and we're going to go build two apps so in this first terminal i'm going to run pmpx and then create mf app so pnpx is like mpx if you have npx just use that and create mf app is for create module federation app so in this case i'm going to pick the name of my host and i'm going to call this one home because this is going to be the home page app i'm going to choose this an application on port 3000 i'm going to use react and javascript and also tailwind now this other terminal i'm going to do exactly the same thing i'm going to do pmpx again and create mf app and in this case i'm going to call the application pdp or an ecommerce world product detail page and application and this one's going to go on 3001 because you can't have it on the same port again it's going to be react javascript and tailwind and again i'm going to go into that directory and do exactly the same thing i'm going to yarn and if that's successful then yarn start okay my home page is running let's go back over to my browser and it shows me that i now have an app it's called home the framework is react language javascript and it's tailwind for the css and there's exactly the same thing on port 3001 except that it's pdp so let's say that we are the home page team these are managed by two different teams and we are going to take on the task of building the header so i'm going to create a file here called header.jsx i'm going to import react from react and i'm going to export a default function called header and it's going to return some html out of there and it's going to have a div that's got some tailwind on it let's see it's got some padding it's got a background it's blue some text that's white and large and it's in bold font and i'm going to call this fidget spinner world because our app is going to be selling fidget spinners all right so let's go back over here and create a new file called footer.jsx and do pretty much exactly the same thing and we're going to put in here only the best spinners because that's our motto we only sell the best spinners and we'll say that that's the footer and now let's go over to our app and let's bring these components in just as you would any normal react components so header we're going to bring in from that header file and footer we're going to bring in from the footer file and i'm just going to drop these down here header and then footer and in here i'm just going to say that we have the homepage content so we'll start off with a class name or you give it a little margin vertically and we'll say that this is the home page content and wrap that div up and let's take a look yeah okay looks good i'm gonna remove the little top margin there and beautiful page okay so now the pdp team is like okay we're going to start implementing but we really don't want to actually redo the header we want to use your header so can we do that quickly well absolutely we can because we can turn our header on this home page and the footer into micro front ends and we can share them with the pdp page really simply so let's give that a try so i'm going to go into a file here webpack config so this is the webpack configuration i'm going to scroll down here to the module federation plugin and i'm going to say that this application which is named home exposes the header and the footer so we're going to give it the name header and this is a object where you give it the key which is the expose name and then the location of the module or the file in this case that you want to expose so then in this case we're doing the header and then we're doing the footer it's a good idea to keep the names obviously the same between those two don't want to confuse anybody great so the only thing we need to do now is just restart home so now i'm on the home terminal and i'm going to restart that so i'm going to say yarn start again because we need to reload that webpack configuration but once we run it we can see that it works just fine but there is something new that's been added and that is a remote entry file so in localhost 3000 there's also remoteentry.js and that is a manifest of all of the modules that are exposed by the homepage application so i'm going to copy that link and then i'm going to go over to our pdp application into the webpack config and scroll down here and i'm going to say that we have a remote and that remote is home and its url is well home at and then i give it that remote entry url now why home well that's the same home as defined in this webpack config as the name right here and the only requirements on this is it has to be a valid javascript variable name so you can't use things like dashes it can't be home page it could be home underscore page that's fine because it's a valid javascript variable so we're going to use home and now this is going to allow us to access any of the exposed components from home but of course we have to restart the server again so let's go over here to pdp and then we'll restart the server just to get that webpack configuration loaded and now if i go over here to our home page and grab app like that and copy out this because i'm kind of lazy and i don't want to retype all that stuff i'm going to go over here to our pdp and go to the app which looks almost identical because it came out of the same template i'm going to paste that in there and i'm going to say pdp page content and i'm going to hit save will that work let's try it out okay okay so i can't resolve the header and the footer obviously okay so there's no local header and footer but if i do home here and i save and i go back in here we can see now we're serving the pdp page content and we have our header and our footer the exact same header and footer that came out of the home page awesome and even better check this out so you go to header here and i say fidget spinner world 2 the fidget spinner world thing and i do refresh here awesome i get that as i would expect and i go over to pdp and without any restart or refresh or code change or anything like that other than hitting refresh in the browser i get the updated content so that's a runtime connection between these two applications okay so let's have a look at our completed application that you will have by the end of this video and of course all of the code is available to you on github and let's talk about why micro fees are so important and why companies are really invested in them so first off this is our application you can see that this is the completed home page this is on port 3000 as we started before and it's got our all of our fidget spinners and it's got our header it's not like a cart link on it it's got a way to log in there's a product detail page that shows the detail around one of our spinners and there's a cart page that shows you all the products that are in your cart so the reason that big companies are interested in microphone ends is the same reason that big companies are interested in micro services when it comes to the back end so on the back end used to have monolithic api servers and that meant that a bunch of teams were working on a single code base that had a single deploy cycle and the microservice revolution allowed that to change so now every team could manage its own server and update independently micro front ends bring that same methodology to the front end meaning that every one of these applications home page pdp and cart are managed by separate teams and now they can go and deploy independently and then if they vend out any micro front ends that are consumed by other teams those are automatically updated when they deploy so for example in this case the cart team manages this little cart drop down over here and whenever the cart application deploys that cart gets update updated along with it and all of the other applications reuse that cart and so it's done dynamically so not only can the teams manage their own applications but they can actually manage smaller pieces of the ui so now the question becomes when do you decide what is a micro fee and what is not let's jump back over here to the atomic design methodology so the atomic design methodology pioneer by brad frost basically defines how uis are structured so you start with atoms which in this case would be things like a button or a label or something very small like an image and then there's molecules which are slightly larger components that use a bunch of those atoms for example a labeled input which may use a label as a text and then an input as well and it manages the relationship between those usually just statelessly and then there's organisms and in this case an organism would be something like this cart drop down over here so it's a self-contained piece of ui that manages its own state and understands how to bring together all the molecules and atoms to get something done so in this case that would be these text fields are here the clear card and the checkout and it's this unit of ui the organism that i think is most appropriate for sharing as a microphone end i don't think that you should run time share atoms and molecules that's just my personal opinion but that's where i kind of draw the line now there's also templates and pages those don't really categorize for me as micro fees but they are things that you can share in fact when we talk about micro front ends more in this video and as we go along we'll be talking about the underlying technology here which is module federation and module federation actually allows you to share a lot more than just microphone ends in fact we'll actually start off by sharing some functions and then we'll get into components and then we'll get into sharing full page contents and routing so it's really exciting stuff okay i've introduced you to the world of microphone ends and why they're important to companies let's now talk about module federation and what it is and why it's different from other techniques of sharing code so module federation is a feature that's built into webpack 5. it's absolutely free and it is part of the standard webpack 5 deployment now so anything that's built on top of webpack 5 can use module federation as you saw from that pnpx i've actually got it set up so you can use well 10 different view templates right now and there's also angular and other frameworks that can also use module federation so module federation can be applied to pretty much every popular view framework it's great stuff so let's talk a little bit about why it's different from other methodologies of sharing and to do that i'm going to close out these and i'm going to get us into the kind of architectural box layer we're going to do that together so we're going to do file here it's going to be called architecture.do i have a visual studio extension draw.i o extension allows me to kind of draw diagrams and and go all full architecture mode right inside my vs code let me just drop in here what we started with right so we've got the homepage app that currently is at 1.0 and we've got the pdp app over here and inside the home app we have the header and the footer so now let me go and build out the mpm version of this i'm going to create a new page we're going to call this mpm i'm going to paste these two in and then i'm going to bring in a box for the mpm library right so this is going to be our mpm library and it's going to kind of sit somewhere between these two and then we're going to take the header and the footer and we're going to put it into our mpm library and we're going to arrange it to bring it to the front so it all makes sense looking good okay great so now we have extracted our header and our footer into our npm library now we got to reuse those so i'm going to go and draw a link between the home page app and the npm library and i'm going to do the same thing with the pdp app all right so drop that in there those are looking good i want to move this around a little bit to get these arrows nicely lining up okay cool so let's say now that we are a developer on the home page app and as part of the homepage team our job is also to maintain the header and the footer in this shared npm library and so i get a juror ticket saying hey we need to go and change this you know text or whatever now i've got to go and jump from where i'm normally working which is the homepage app working on features in that app and i got to jump over to this mpm library which may have not been worked on in a long time because the header doesn't update all that often and i've got to go and do that change and then i'm going to bump that version to 1.0.1 and publish that out to our local arc repository and on the homepage app i'm then going to bump that to 1.0.1 which is going to then grab the mpm library and release to production it's kind of a hassle same sort of thing over here and then have to go and talk to the pdp team and say hey there's a new version of the header please use it and they would go and bump it and there you go but now from the customer perspective right i'm on the home page and i click into a product i'm actually now going to get an older version of the header on the pdd page app which may actually not be great at all in a black friday situation at a major e-commerce company they're going to be making changes all over the place all the time and so when they make a change the header they're going to want to see that happen immediately between these two pages so how we're going to solve that requirement well let's go back over here and see what we can do and talk about some solutions that i've seen in the industry and one of the most popular is to use something along the lines of an asset store so we'll call this the asset store option and again we'll start off with our 1.0 and 1.0 as we have before and kind of bring these down a little bit and widen out the space because we need some space and so now we're going to bring in this header footer project and the idea of the header of the footer project is to contain that header in that footer and we'll bring those to the front so we can see them again oh my gosh you got to make some more space here all right over here boy drawing diagrams it's the the bane of architecture and what this one's going to do this header for the project is it's going to build some s3 artifacts it's probably going to build a static version of the html and it's going to build the js and then those are basically going to be injected onto the page so we've now even removed react from the equation here right this is just maybe react that is rendered as static html and then some helper javascript to actually add some dynamic behavior and that is then put up on s3 and so we'll draw an arrow between those two things this thing is going to create that s3 artifact in order to consume that to make it easy on ourselves we're going to go make a shim library so drop that in here and its job is to go and fetch that content from s3 and its job is to return to the home page app in the pdp page app some html or some references that it grabs from s3 that the home page and pdp app then inject into their page templates to drop the header onto the page so these guys need a connection to that shim library and then the advantage with this one is that this header and footer can then update those s3 artifacts at any time that shim library is designed to make sure that you always are getting the most recent copy and that gives you your dynamic behavior so this header footer project when those late requests come in from product to update the header immediately the header footer project can then deploy to s3 and all of those changes will show up on the homepage and pdp page automatically as long as they're not caching those results you can see there's a lot going on here and there's a lot of custom work there's a lot of custom ci cd these are very custom pieces of work very diy that are company specific and of course having any developers move from the home page and start making changes on the header footer project because it's so alien and maybe entirely written in a different view framework that's a big change so there's a lot of context switching so you end up having a team that's dedicated to that header footer project it's really just a large company option okay so what does module federation bring to the party so module federation let's go for the module federation approach here and we'll start again with our home page and pdp page app and in this case we have the home app and we've got the header and the footer and all the pdp page app needs to do is just connect directly to the header and the footer just like that and so you get the dynamic behavior whenever the homepage application pushes so it goes up to a 1.01 the pdp page automatically gets the new code you're not changing development environments those header and footer components are still written in react and as long as the pdp page is also written in react then they work right away so there's no issue there with changing frameworks or different packaging or whatever and also the work is done in context meaning that as a homepage app developer i just work on the header directly and i just work on the footer directly and there is some risk there and we'll talk about that in just a minute but it's much lower in terms of context shift cost when it comes to development so you can see why of these three methodologies module federation is the most attractive when it comes to sharing component code all right let's put away our architecture tools for a bit and let's talk about some of the questions that i get most often when it comes to module federation and the first one is around asynchronous stuff so how do i actually include the header for example asynchronously so let's do that let me just show as opposed to tell so i'm going to bring in suspense from react and here i'm going to say const header equals and then do react lazy and i'm going to give it a function and it's going to import the header and it's going to do a dynamic import this is absolutely standard it's an asynchronous dynamic import it works in react but it also works on any other technology you have any type of library you have the special sauce here is in this react lazy and then we're going to wrap the header in a suspense and we're going to give it a fallback saying that while we're waiting we should put in a div which says for example loading that's a classic fallback div and so now let's restart our servers so we're gonna go back over here to our home and then start that and then go to the pdp page and start that as we go through this by the way keep a keen eye on this tab over here it's really nice that it actually has the names of the directory in there we're gonna actually have five running applications by the end of this so we're gonna be doing a lot of jumping around here all right so here is our pdp page and as we can see fidget spinner world is running just fine so that is asynchronously loaded but if we kind of want to prove it to ourselves let's go and make that stateful so i'm going to go and return this here and then do use date and we're going to say okay so we have some state in here for showing the header and we'll use state for that and we'll only show the header if we are true and then i'm gonna go make a button it says show the header and i'm gonna make it large and give it some padding just so we can see it okay cool all right so the first thing we need to do is start that off as false right we don't want to show the header by default and then if we get a click here we're going to turn that to true so unclick set show header to just true really i'm not going to toggle it there we go all right so we haven't shown the header so far so let's go over here to our inspector and take a look at our network and see what we got going on so i'm going to refresh this and we're going to see that if i scroll down here we have loaded the footer but we have not yet loaded the header and when i click on show the header over here we get the header and actually let's go take a look at the size on that it came in at 1.1 kilobytes so that's another really important point to module federation so if i look back over here at the webpack config we can see that there's another key down here that i haven't talked at all about which is the shared key and this is all of the libraries that are shared out of this home page so what it's doing here is it's grabbing all the dependencies by just looking at the package.json and then getting the dependencies so it's going to share them all out and then it's also going to share as part of that react and react down but it's going to override those to say that they're shared in singleton mode which means that there can only be one react on the page at a time and that's actually really important for react because react does have some data that's managed at the library level and it is singleton in nature and so if you have multiple instances of react on the same page it kind of freaks out a little bit and breaks so you don't want that so webpack shares and manages that sharing for you which is really awesome and that's why that header only comes in at 1.1 kilobytes all it's doing is just bringing in just the component code for the header now if there are any other dependencies that header needed like moment or whatever it would bring those in as well but only in the case where you imported headers so that's really handy okay so now i'm not going to do this this way so i'm going to go and kind of unroll all this and we'll just go back to plain old header and we'll talk about the next question that i get when it comes to module federation which is what happens when the app goes down and the reason that i get this question a lot is because this is the way that i demonstrate module federation i run it in apps but that's not the way that you deploy module federation so let's go and do that let's actually take down home and we'll go over here to pdp and we'll see yeah it blows up absolutely 100 no question yeah blows up let's see script loading error couldn't load header footer 100 absolutely so true if my demo app goes down right that's not going so true if my demo app goes down then the sharing system goes down that's true but that is not actually the way that you're going to deploy module federation and that's why this is not really an issue but there is another related issue that will get into us in a second so the way that you deploy module federation is you build and deploy it to a static asset store like s3 because you want to get that akamai or cdn style caching and all that kind of goodness so let's first build it and that's created a local directory called dist so let's go in there and take a look at what that is and it's got a bunch of js files so there's really nothing unique to this you don't actually have a server in here so i'm going to use mpx and a module called servor to run this application on port 3000 which imitates a static asset store right server doesn't know anything other than just serve these static files so it's just like s3 in that case so now we've got 3000 back and running and i'm going to do refresh and you're good to go so as long as s3 and your static asset store don't go down then you're not going to have an issue when it comes to the code not being there so that's not the risk that you should be worried about the risk that you should be worried about is that a developer on the homepage team may change the api contract of header and make it work in home but not actually tell the pdp page team that the api contract is changing that is the risk that you've got to worry about so let's try that out and see how this actually can blow up so first i need to get out of my sharing of the compiled dist there and then go back and do yarn start and now we're sharing the live code again so now we'll go into header and i'm going to do app in here because the feature request was to put the app name into the header so this is going to say app.name and i'm gonna save and then i'm gonna refresh the homepage and boom what's the issue well the issue is that we cannot read name because the app is undefined right there's no property we didn't put a property called app on there so as the developer on this jira i'm gonna go and then say okay well i need to fix that right so i'm gonna say app name is home done okay jira closed pr reviewed done deployed uh life is excellent next year please right so okay but over on the pdp team we're just swimming along doing our stuff and we refresh the page and blowing up right so why is that well we didn't make the corresponding change on our side so yes of course i can make the change on the pdp page side and do all that choreography but how do we actually protect ourselves from that so that this might potentially never happen well the trick there is to use error boundaries or some equivalent in whatever view framework you're doing but in react world we're going to use an error boundary so i'm going to create a new file called safe component and we're going to bring in react and unfortunately an error boundary has to be a class so we are going to extend save component from a react component error boundaries are actually the one case that i know of where you absolutely have to use a class in react now we're going to have a constructor and it's going to set the state so that there's a state value on this and it's basically going to tell us whether an error has occurred and then we're going to add the two methods that are specific to a an error boundary the first is component did catch which gets thrown when the component catched and then given the error we returned that our new state is has error true right we can do a lot more here we can specify what the type of error is we can console log it we can send it to you know splunk or whatever you can do all that stuff i'm not gonna do that right here i'm just gonna go and render out something safe so let's go make that render method and basically i say well if we've had an error then we're gonna do something went wrong otherwise we're just gonna return the children okay so now let's go back over to our pdp page and import our safe component from that save component file and then we're going to wrap our header in that save component and go over to here and we refresh and yes something went wrong great so now our page still runs but it doesn't render the header now there is a fallback methodology that i've talked about in a video on my channel where you can use both module federation and mpm so that in the case when something blows up you actually fall back on an older version that you got in mpm that's a great strategy too here really depends on how far you want to go with this protection so let's go back over into our homepage and actually fix the bug and see that it works so we're going to remove the app here and then go and remove the necessity for the app over and header take down our two and there you go everything looks great all right so i've introduced you to the world of microfinance we've gone and built two different applications already we've talked about why microphone ends are important what module federation is how to handle asynchronous loading and how to handle error states let's now actually start building out our application and learn more about module federation as we do so now to do that we need to actually go and build our api server that's going to have our products and it's going to have our cart now yes i'm going to go and create a monolithic single server for this i didn't want to have six tabs running but yes in the real world you probably have multiple servers with multiple data you know you'd have a product server you'd have a cart server and a user server and all of that stuff but in this case we're just going to have one server all right so let's go back over into our terminal and create yet another terminal yeah we're going to have 5 by the end of this and again i'm going to do pmpx now why pmpx by the way it's a windows thing turns out i'm on mac but it turns out that pmpx is the way to go on windows who knew and if you're on windows you're like no npx works just fine let me know but uh i'm doing this for my my friends in windows world so let's do create mf app and in this case i'm going to make it server and instead of application we're going to go down here to api server i'm going to put it on port 8080 you know as i guess as usual when it comes to api servers and what we're going to use as a template is nest js with auth so this one is going to use nest js as our api server it's going to be a rest server and we're going to use jwt or jot based authorization and that's the template for that one so now i'm going to go into server and i'm going to yarn it get that all going so let's take a look at what's in the server we've got a public directory that has all the assets that we want to put in there and you're going to be able to find those on github but i'm just going to add them locally so this is going to have you know fidget 1.jpg nice cool wagon wheel looking fidget spinner a friend of mine is all into fidget spinners so i figured this would be a fun fun demo data piece and we'll delete that and then if we go yarn start here we can bring up localhost 8080 and then go to fidget 1.jpg and awesome so now we know that we're getting this set of static assets that's good so now the next thing we need to do is ensure that we can get the list of products so over here we've got our auth stuff we're not going to touch that that is the jwt management we're not going to touch users but i will show you that there is two users that are kind of baked into this there is sally who has a password of one two three maria who has a password of one two three you can as many users as you like obviously this is just demo stuff you can hook this up to a real backend if you ever want to so in modules we've got two modules we've got authorized and unauthorized so let's take a look at our unauthorized controller and what it's telling us is that we've got a controller that's camping on unauthorized and if i get it i'm going to return true just a single return true value so i'm going to do localhost 8080 and then do unauthorized and it's going to turn true fabulous okay so what we want to do is change this code so that instead of being unauthorized it's products so first we're going to change anything that says unauthorized to products and i'm going to make that lowercase and this is going to break up all kinds of stuff so i'm going to go over here to unauthorized change all that products i'm going to change this directory name to products and change these file names to products and finally i'm going to go into app module and change this to products do the lower casing all right let's take a look i'm gonna do yarn start dev i think yeah so this is going to continuously watch the server for updates i didn't start in that the first time all right let's do this localhost 8080 products ah okay cool returning true that's great awesome okay so now i've got my routing set up properly i've got the products unauthorized route because we want to be able to get products without actually being logged in in this system we are going to have to be logged in to add items to our cart we're not going to allow for anonymous carts you can do that if you want but beyond the scope of this so the next thing we need to do is have our product list so that root level over here under source i'm going to create a new file called products.ts i'm going to paste in our product definitions again all of this is available to you on github but let's talk about a little bit about what a product is so it's got an id it's got a name a price a description an image which is the url to the local host and then the long description by the way i had some fun with gpt3 to build out these long descriptions so if there's some insane stuff in there you can blame gbt3 for that all right so let's go back over here to our products module and controller and then over in here we're going to import those products as well as the definition of a product and it's not going to be from product data it's going to be from products cool and this is going to return an array of products which is going to be from products so let's save that out and refresh and awesome so fast i love it ness js is actually really cool if you get into server work i strongly recommend checking out an sjs and of course graphql all right so let's go back over here to visual studio code and then add another method so this is going to be able to get by a particular id so in sjs world you give it this decorator for the route that you want so in this case it's colon id basically going to map that id onto the parameter it's gonna be a string we're then going to go in through the list of products and find that product id and we're gonna parse out that string to a number okay so let's go back over here and do instead of products we're going to do products one and that just pairs it down to the one product let's do product id i guess 10. there you go gold and silver gears at 9.99 awesome excellent so that's pretty much all we need to do for the server at this point let's jump back over to the client and get that going all right so let's close down that window close down server go over to home and then here we're going to create a new file called products.js and we're going to specify our api server is going to be at localhost 8000 and then we're just going to use fetch to go and get the list of products so it's going to fetch off of 8080 slash products and then it's just a return a promise which has the json out of it so that's going to give us back our list of products but while we're here let's go and add another one for getting a particular product by id so get product by id and that's going to be used by the pdp page so when they want to get data on their product they just have a particular product in mind right they've got slash product slash one they're going to go and give us the id and then we're going to get back the data that's specific to that by calling that by id endpoint that we created and then because i'm a big fan of using code i'm also going to bring in a currency converter which just uses intel and we're going to use the us us dollars currency so that when we format the prices nicely you know make it look great all right so let's go over to our app page and we're going to do this a little bit differently so i'm going to create a homepage content component and i'm going to bring it into this home page content area and there's a good reason for that but it's always good to not have mega components anyway so i'm going to do a new file here and say homecontent.jsx and i'm going to bring in the usual react and use state and use effect and then i'm also going to bring in products by the way if you're wondering how i'm getting that awesome hinting that's actually github copilot and then i'm going to start our home content component it's going to have our product list in use date and then to go get that i'm going to use a use effect use effect takes a function which is the effect that you want to affect and then it takes a dependency array so in this case the dependency array is empty because we want to have this run only once and then i'm going to get products and once i get that value back because that's a then it's a promise i'm going to set that products all right so let's start off on our jsx so i'm going to put some jsx in there that's got it's got some y padding on it and it's like grid layout so it's going to have four across so that's why grid calls four with a little gap in between each one i love tail one so expressive and then with each of the products i'm going to run a map and put the key on there for the product id and then let's try it out so we're going to go in over into our app and we're going to bring in our home content from that home content file and then i'm gonna put it in there for the home page content and now i don't need that extra y padding i've already got that so let's take a look let's hit refresh hey cool so that's making the connection to our api server and putting up our beautiful fidget spinners i really should be getting into these like more than i look at them i spent multiple days with this example and i'm like oh wow maybe reward myself with the fidget spinner all right let's continue on so let's go back over to our home content and i'm going to paste in here that we want a flexbox and that flexbox is going to have a name on it so let's take a look oh nice adding in our name looks good and let's go add the price in there and make that the next element in our flexbox it's going to use our currency formatter to format our product price into us dollars so let's take a look pretty nice okay cool and i think the last thing we need to do is just add a description so the customer knows what they're buying let's drop that in there yeah looks pretty good text is a little large but that's okay all right so our teams are in the mode of sharing and our pdp page wants to reuse our get product by id function to get the product by id and that's one of the great things about module federation is that not only can you use it to share components but you can use it to share any type of javascript it could be constants it could be encoded json it could be functions it can be components it can be whatever kind of javascript you want so in this case we're also going to share out our products library i guess file module from our home app so let's go back over here to webpack config and scroll down again to exposes and all we need to do is just add in products and then say that it's products.js all right let's say that out and again i have to reboot home because the webpack configuration has changed and now over on the pdp side we can start doing the same thing so i'm going to go and close out these files and i'm going to go over here into the pdp content and i'm going to create a new file and we're going to call this pdp content dot jsx and into that i'm going to also bring use state and use effect because we're going to do pretty much exactly the same thing we're going to hard code right now that our product is one and let's go over here to our app and bring in that pdp content from that pdp content file and let's go and pop that down in there for its content let's take a look there we go product one as you'd expect okay so let's start bringing in the code to get that product we'll go back over here to our pdp content it'll bring in our get product by id and also our currency formatter from home but instead of header or footer in this case we're just going to use products like we did before so let's save and if this doesn't work it's going to blow up right now so it's no it looks like it's going to be good okay great all right so let's change this to id and then i'm going to drop in here some state so we're going to say that this is going to be thus the product we've actually gotten and put in here id at the moment and we're just going to say if we don't have a product then we're going to return null and so right now it's going to return nothing and so we're empty in there and so now we need to bring in a use effect so we're going to bring in a use effect we're going to say okay so if we have an id which is specified as once we're going to have one then we're going to go and get that product by that id and with that product we're going to set that product so in fact let's simplify this code even a little bit more we'll just say set product all right take a look oh looks like we're good okay so i think we probably got the data in fact we probably just do at this point product.name yeah wheel spinner good to go so let's start laying out our nifty ui in here we'll just replace all this and we'll have a two column layout this time with a little gap in between and then we'll have our product image in the left hand side so let's hit save and there you go well looking pretty good so far cool so let's get to getting on that right hand side and we're going to bring in a div that's got a flex box and it's going to have our product name that's expandable thus the flex grow and it's going to be nice and big and then at the end of whatever that is we're going to have the currency formatted for the currency price that looks good 5.99 are you out of your mind and let's bring in the description huh pretty good and then let's bring in the long description generated by gpt3 all right here we go i just you know i'm not a good copywriter like that our wheel spinner is fun functional it actually looks really good it's amazing how much gp23 was able to deduce just from like a wheels fidget spinner that spins with it basically i gave it that and it gave me this which is crazy okay so next thing we want to do is allow for us to do like product one like that now the webpack configs are actually set up if we did go take a look at them with history api fall back to true which basically means that any route that isn't served from some sort of static asset is going to just render the same application in the dev server mode so that's why you can basically give this any url you want you know any url and it's just going to go and and give you the same page over and over and over again so that that's why we can use something like react router dom to actually select out different products so what we want is we want to be able to say you know 10 for example here and get 10 as opposed to our hard-coded one which is we have now so let's go and stop our pdp server and now we're going to go add react router dom and i'm going to do a yarn start again and then over in our app i'm going to go and bring in our react router dom stuff let's get rid of suspense there we no longer need that we're no longer suspenseful and we're going to wrap this whole thing in router and we i'm not going to do the safe component stuff it's fine it's safe as is not planning on blowing anything up and now inside here you're going to put the switch so this is where we're going to change out the content and in react router dom world you use a switch for that and then inside of that you've got a route and we're going to say that the path is going to be something along the lines of slash product and then an id and then the component that is going to be rendered if we have that is the pdp content component so let's hit save there and see if this works let's go i'm going to close out that we don't need that anymore and yeah it works fine but if we go to like for example just slash right that doesn't match this path pattern here so you're not going to get anything so let's go back to product 10 and that works fine because that matches slash product slash id so how do we go and get that id well let's go back over here to our pdp content and i'm gonna go bring in use params from react router dom all right and that's actually pretty easy so i'm just gonna put in their id and then use use params that because use program you could have multiple parameters so this is going to return you an object which we want to destructure and get out the id so there you go save that out oh wow that is pretty that may be the one i get so i've got our home page we've got our product detail page we're showing the customers a bunch of these fidget spinners but now we want to be able to sell the customers some fidget spinners we've got an e-commerce app after all so we want to do some commerce so that means that they need to have a way to log in and have a way to add and remove and view their cart so why am i doing all this on e-commerce stuff and using this example well this is going to allow us to explore how to share a state between the host and the remote so let's talk a little bit about the nomenclature there so when it comes to our header for example the home page is the remote and then the pdp page is the host so the pdp page is hosting the header that is remote to it and it's remoted in essentially from the home page so when i talk about host and remote that's that relationship and in this case we want to talk about exploring how to share state between the host page and the remote that's coming in so we're going to have a way to log in to our server to get a jot back the jwt or json web token not sure is why it's pronounced jot as opposed to whatever but that's going to be our authentication and we're going to want to share that between the host page which is going to want to know if it should add like for example the add to cart buttons and the cart mfe which is going to show you your cart so the mfe is going to want to know that you have a jot and the host page is going to want to know that you want to have a jot and you're also going to be able to share the cart items between the different parts of the system so we're going to explore using this shared state okay so let's jump in and start working on building out our cart and that means going back to our server and working on that so over on our server we have modules and we got this authorized module and if we go down we look at the the readme we can see some documentation on how to use the authorization part of this so for example i'm going to create yet another terminal and i'm going to follow this example here that's the example is to do curl and hit up this localhost 8080 authorized route which means that i need to have some authentication details to hit that route i don't yet so that's going to give me 401 message unauthorized so what i can do is i can post to login with the username and password and i'm going to get back a jot so i'm going to copy and paste this again this is just in the readme and paste that in there and that gives us back an access token and that is our jot now how does that work well ness js has a whole section in its documentation on how to do authorization and you pretty much just follow that and it'll give you this auth login and then you can specify some users of course you can go get them for anywhere but again i've gone put in there maria in one two three and that's what we're passing in here in marien123 and that gives you back this job all right so then let's go back into our readme again and see what i can do with that jot well i can scroll down and i'm going to copy this line which just starts off with the same thing we did before with authorized but now we're going to give an additional header and that header is going to say authorization and it's going to give it a bearer and then i'm going to just paste that and i'm going to copy the jot that we got back all the way up to but not including the quote i'm going to paste that in there and paste in put in the quote there and we're going to go back that way our user id is 2. and so why are we getting that back well let's go take a look at our authorized route here so go into the controller and we'll see that when we get we use a guard and that's basically saying okay guard this method by applying that jot our j280 and that particular off guard and that's going to give us a request when we get run and we pass that jot and from that jot we're going to get the user and the user id so that's pretty easy right okay so the first thing we need to do is kind of what we did with products but now we need to do with authorized so we're going to need to change all that stuff that says authorized to cart cart here cart there cart here and everywhere and we'll change the name to cart directory and we'll change the file names to cart and we'll change this to cart okay looking pretty good we don't put more carts in here seems to be okay at this level let's go back up to our app module that's the last place that actually does it see i'm going to change authorized to cart and then lowercase that cart and hit save and let's see i can actually test this out by going up here and doing exactly the same thing as before except instead of authorized i'm going to do cart and if i've made all the changes correctly yes that's good okay so now we're working on the cart route that's great so we've changed the route successfully and now we just need to kind of upgrade this cart controller with our cart functionality because obviously returning a user ids is not what we want right we have the jot functionality we can now log in we need to actually maintain a cart so i'm going to start by bringing in the list of products as well as the interface for a cart so a cart is going to have multiple cart items it's going to have array of cart items and those cart i