hello this time I'm gonna talk about microphone and architecture we have been using this architecture for a little while um however the approach that we've been using is to have a ngnx configure at the front and every time the user tried to go to one of the pages for example slash home will targeting that specific app or slack checkout we are targeting another app um this work are both on every application are decoupled and every single team are in charge of their apps and they can deploy application independently however the downside of this approach is every time the user go from one page to another for example slash home or to check out they will have to reload the entire page over and over if they go back the entire space get reload once again and so on in this video I'm going to talk about webpack module Federation to solve that issue and the idea behind this is to have a single container app in front who will orchestrate all the other application we it will load application or module or components into the main one that way we can keep our single page application experience without having to reload over and over and every single time I'm making unnecessary API requests that way we can improve the user experience we're going to split this video multiple Theory so the first thing that we're going to do is we're going to have two applications one that will call Main that will contain basic components that we can share with the shop or the other application then we are going to add those components we're going to configure the module Federation then we're going to share those specific components that we had from in May to our shop app we are going to load the entire page uh from Shop app to the main application so in every single Pages this is a concept on next.js that we have pages is the entire view we can load it into the main app we can navigate between those pages um to show the transition the smooth transitions between those uh we're gonna explore our at the end those ecstatic asset we're going to deploy it into S3 bucket and we will be able to load those a specific component um job from um a main applic main app deployed so let's go ahead here we are having our just two app let's go to the terminal we're gonna run npn um oh well let me go inside APN let's let's def just to run our main application it's it's ported or is used in the port 3000 [Music] open and we can see oh it's working perfect now we can go back let's do some tiny changes to the to the screen let's just put something welcome to my map app Port 3000 it's working perfect we can go back and let's go now to our shop application gonna open another terminal uh yep all right side and npn from death let me just change the port number so this application we're gonna open in through 3001. that way we can have different port numbers for our main on our second app we can open like to see how it looks like all right now we need uh to make some changes to be able to differentiate between those two applications and just do the same thing remove some content evil content we're gonna add welcome to shop on Port 3001. awesome so as you can see we have two application one three thousand the second one all right let's go back [Music] this now what we're going to do is to config our module Federation before that let's just bring those two components I already created I'm placing those two components into the main app just our simple component our footer and header I'm just going to import the footer as you can see imported from component footer [Music] and then navigate the Navigator navigation foreign bar this is my nav main app now we can go down um install our footer let me just remove this this is basically the same thing what we have in the footer okay this is the same thing I already did before then navigate navigation which is like a simple component is received for children and it will render now let's go back to the tip one let me run it to see if everything looks fine go back to app one reload it we can see this is The Knack of main app the footer is right there we just need to make a tiny configuration in our our style me just go here down up [Music] um just kind of create an app it's not created I'm gonna paste those styling I'm gonna change the color a little bit to make the difference between the knob and the footer all right you can see um you already have the the knob I'm gonna make another changes to the collar for the footer oh okay I put the color in the wrong place so let me add the background color okay cool um I don't want to scroll let me just make this feel smaller 80 right perfect that way we can uh we don't need to scroll down and let me run Sharp we make sure we have both application up and running okay so as you can see uh the chop app it doesn't have the enough um the footer and this is what we need to we want to do we want to share those two components but we won't we don't want to duplicate we want to reuse the same two components so okay as you can see we want to place those components into the shop app so now it's a time to go and configure our webpack module Federation [Music] so back here to the to the code close those things okay let me clean this up a little bit [Music] uh we're going to next comfy JS the first things that we need to do is to install our module Federated Federation for next.js this is from webpack so it will be available for Pure just read or for view or any other app who use webpack so first things it's to import our plugin and then we're gonna do a custom webpack configuration in our mac.js okay we're back how big options [Music] and let's just add the configuration we're going to explore and then we're going to make some changes here as you can see we're just using the plugin now what we need to do the first things is to name power up so it's called main app and it will connect to the remote app it will be to the shop app uh I think it's better just to call it sharp you [Music] so we're going to connect to the poor 3001 that is or our shop application it's been hosted and what we're going to do is we're gonna look to for the remote entry Js [Music] right let's see if that run perfect oh we have a small issue here okay we can find webpack that's because I'm using uh net.js 13 and that version it's not coming with webpack by default so we need to install it so the install MP install webpack [Music] okay it's done on well of course we didn't find anything yet but at least our application is running that is what I we want to make sure [Music] and now we need to do the same thing for the second app let's go to shop app config file let's just copy the same configuration here paste it okay let's import and we need to install as well let's go back to our terminal clear APA install webpack but also we need to install our um our plugin so let's go with our plugin um already installed now we need to make those configuration changes we are in shop configuration and now we want to connect to main let me just rename instead main app which is going to call it main that way now we can connect from Main to this port number three thousand so now Maine is connecting to shop to the port 3001 and Shop it will connect to Maine in the port 3 000. [Music] um also what we want to do our main configuration is to expose those components that we want to share so we want to share the footer and the nav so we are back to to the main app foreign [Music] we are going to the location where we have that component so now we're gonna have the nav component [Music] okay and now we just make sure like it's working let me make sure the shop app is working [Music] or 3001 okay well still working fine now coming back to our Shop app what we want to do here is to be able to dynamically import [Music] those components that are in our main app so we report for netjs dynamic import from Main slash nap and then we're going to install the knob okay here but NAB this is the net [Music] being up to good job now we're gonna go and brown npn prom death we are loading um our main app first because we want to run the main and expose those components and now we are going to run the shop app so remember one it's import 3000 and the other three thousand one then we go to our main app reload it is working and on the second app as you can see the nap it's it's already it's imported as well so also it import the style for the footer um but we're just gonna remove the default footer that we have here and we are going to import the footer dynamically as well from the main app footer [Music] I'm going to change it here let me install it down below Main save it okay we can go back and you can see this is the footer but this is from the main [Music] application where we are hosting those two components uh can make a technique changes here the footer I mean application [Music] okay so if you go back reload as you can see we are reloading the same um folder from the main app now if we go back to the documentation there's something cool that I noticed that we have we can expose all the pages on next GIS so if we go to pages right now we just have one let's create one call catalog I work okay yes let me just copy the same content here quick change the name we can keep this foot on header um okay let's this is the catalog page we can go back we reload our shop and now we go to the page catalog you see this is our second page now um what we want to do is to um IPS for configuration we want to expose Pages through no we can we are exposing all the pages and now we can go back to the main app we don't have that page but what we're going to do um let's create another page in main app say catalog on Main JS and here is when we are going to dynamically import our catalog from from where we want to say hey let's import it from shop slash Pages because already expose it and Carlock and then we export a default and let's just go back to the main app [Music] this is our catalog on shop is working now go back to the main app we can go now to catalog on Main and voila it's loading the same page that we have in our shop foreign [Music] catalog component well not first let's just add some changes here this is our main uh oh I'm sorry um on shop so we're adding on chop now our main we're going back on low our catalog from me again as you can see that's the changes reflective um [Music] what we are actually doing this is the file when it's loading um all the given us the instructions or is giving this remote instructions about all the modules that can be sure that way we can load those modules on the runtime [Music] um okay let me go to the first screen [Music] let me just clean this a little bit go to the [Music] this is just um to be able to shut down one a big application and then as you can see it's still working the only thing that we can do is handle when we're not longer able to load those pages now I have this um catalog I'm going to create another component I have already created a catalog list it's basically making an API request to this endpoint and then we'll retrieve some result with the cars a few cards and now I'm gonna install those this component catalog from that [Music] components the component [Music] Carlock and I'm going to oh let me rename it color lock components because we already up my pages already called called Carla now install it catalog [Music] save it let me reload catalog and now it just uh fashion those specific make API requests on fetching those those data on rendering um now because we have this specific component in our shop application we want to be able to use well well you can see if I'm going to to my catalog I can render but I want to also be able to use that specific component isolate it without the page so now on Shop 2 I'm going to expose my catalog component [Music] um it's in components then catalog.js and then we are going to run back again our shop component let's go back to our main and in index we are going to dynamically import um that is specific catalog components once again okay we do catalog components equal the dynamic uh you know I import from where from Shop app slash catalog then we're gonna install this catalog list here catalog component and then I go to my main to my root directory and as you can see we are consuming then we can go we can navigate through pages and and this is the main purpose that we want to be able to navigate from one page to another without having to load the entire website it just uh having this smooth single single page application experience [Music] um and one of the good from nice functionality that next chains have is just will load only those parts that are dynamically changing and if we are defining a layout so we can just go inside there console here and we can see what are the parts that are are rendering every time we are going back and forward [Music] it's rendering um well this is basically the entire page it's been rendering all right the last thing that we are going to do now is to be able to export the shop module as a static asset and then hosted those asset into our S3 bucket let's go back ahead let's go and locate our Shop app [Music] then package let's just make a tiny configuration to the build to be able to export to export those configuration go back to the terminal npm room build [Music] now it's building this static acid [Music] okay perfect now a student can notice we have a new directory here called out let's open it up so on this is all this file now we're going ahead I have a uh S3 bucket already created you just move it here it's called module Federation test I'm going to upload my files let's locate those files demo and then chop out first I'm going to upload those files and I'm going to add a folder the upload is completed so I'm going to close it make sure all my files are there that you made sure also to set public aacl to be able to access to those file close it and now property go to static website hosting enable it entry point index HTML get down save and now this should be the URL okay perfect it's working slash catalog HTML perfect it's loading so now we are going to use the root URL go back to our application the idea now is to load those components or the catalog component list from the S3 bucket inside our main app so let's open main app go to next config so here we are telling our application the remote shop is in localhost 3001 but now we're gonna tell them it's in three those three thousand uh it's in in the URL for the S3 bucket so I'm gonna save it and we're gonna tell our application this remote entry is in this new address let's go out to the terminal app one Via Real Dev [Music] it should be working let's go back here reload foreign so let's make sure we are loading the component from the right address so let's go to network reload again then locate the remote entry this one so you can see uh module federations remote entry has been located in the new path that we already select that pretty much this is it thank you for watching thank you [Music]