Angular, Micro Frontends (Module Federation), and NX Monorepos - Shared Data, Libraries, and Builds

hello and welcome to this video guys today we're going to look into NX mod Federation with angular we're also going to examine how the builds could potentially work in production we're also going to look into how we can share data between different applications so let's get started so in order for us to get start we can write npx create NX workspace and we're going to go with the latest setup we're also going to say let's call it angular monoo uh we can preset it to be an angular monor rep as well and it's going to give us a couple of different Alternatives it's going to tell us uh what we name it let's call it just angler uh monor repo scss let's go with Cypress no yes routing no so this might take some time it will generate the monor ripo it will also generate the application uh keep in mind we're going we're not really going to use the application we want to utilize model Federation uh so in order for us to actually do that we'll have to generate a new host application this is just a standalone angler application so we'll be right back once this is up and running all right now so that we're back we have installed everything we should have under the apps folder we should have the angular monor app and the end to endend uh project for that as well we're not going to use them right now as I mentioned so if you have NX console installed you can just click on it you can click on generate you search for host um a host is essentially the same thing as a shell in this case so you can just generate it um you can name it here let's just give it the name host you can also create remotes but let's just take a step back because I think there's something wrong with the schematics in in NX here um it tries to to create the host on the root which we do not want um so we want it to be grouped under apps SL host essentially so we can just check the dry run here to see where it will be generated in order for us to to actually get a good way of working all right so this seems to be good enough for us to to start working with we can generate it uh it's going to to go quite fast since we already have all of the main uh projects and things installed for instance angler uh dependencies and so on so if I reload here I should have the two new projects so an end to end and the host application that we just generated so now we should be able to either if you do run it through NX console you can just try to serve the application to see if you have any issues there might be some problem problems I'm running on the latest version of NX to get the latest um features that they have and also want this to be up to date to what actually happens uh when you will run it on a Lo local environment in your computer so when you try to serve the application it should be running on Port 4,200 we should be able to navigate there and see what would happen we can just throw this up a bit and we'll have a screen shortly next to this one all right so now we're here we can see that loc Locos 4,200 serves quite fine here's the NX entry component so we can just go ahead and clean this up a bit I'm not even going to bother to delete it um You' probably delete it when you work in your own project just for convenience s there's no need for all of this border plate code so you can essentially just copy everything remove it let's say host entry component let's save this to see and here you should be able to see host entry compon component all right so this is the component that's the entry point of the whole application so the question is how do we add new applications into this so in order for us to add what you would call a remote application which is essentially one of the micro frontend uh we can open the NX here we can go to generate and instead of having host here we want to write a remote so we can generate the remote application we're also going to name let's let's say that we're going to name this a card so for instance if you're building a a um e-commerce platform maybe you want to have it divided in this way and here we can specify which we want uh the remote application to be attached to we're going to say our host application let's see you can see the dryer on here seems to have a strange um place where it places the application so we're going to override the directory there we're going to place it under apps and card if you want to have a sub folder to like micro frontend you could do that uh by essentially adding it here I think it's most it's it's much easier to do it from the start otherwise you will have to bother changing a lot of configuration files which is quite cumbersome process um so let's just go ahead and remove this we have the cing this way we'll generate it it will be connected automatically let's see if there's any other options we want to specify here um as for now like usually I would have scss um we can just skip this for now so now gener generating this we should generate a remote application keep in mind that even the remote application are per se their own applications so now we have a card maybe you want to have product detail page and so on WE we'll group it under the domain of product so the microf front and called Product uh we can generate another micro Fronton here also keep in mind we are attaching it to the host I think this is something or previously something that NX has helped with um so if we not just close a couple of things and we go to the host page and we go to the uh model Federation config JS file here you should should see the remote application so we have cart and product applications that we just generated right if we go to the config JS file this just inherits or it it essentially fetches the configuration from that config file but when we build for production which I will get into in a later phase in this video is that we need to specify where the differ applications are because we will not be able to run on Local Host ports that we are having in this case so that's only for for local development so we're going to look into that as well in a later phase in the video where we are going to explore the the build options and so on all right so to continue now we have the app if you go to the host Source app so we're going to check on the routes and this is essentially what NX adds to us just all of this bowler plate code comes automatically it's lazy loading the whole entry module so the way it actually works is that you expose a certain um you would export a certain chunk of the code from the cart on a certain Port so if you go to that project uh we go to Project Json we can see the card page serves at Port 4,21 keep in mind this is only for Local Host development right um so what it does is it should have an a remote remote entry module so the remote entry module here is what we expose on a certain Port so just to look how this is set up you can go to the modu Federation config of the remote application to see so you say I'm exposing my module so the entry module TS you can name it whatever you want uh the most interesting part is the name and what it's being named s when you expose it because these two together is what actually you are setting up in the host application so if you go to the app routes in the host application you would see that this is sc/ module and this is card module all right so this is combined in this way so you can also have multiple right there's you could have a couple of different chunks of the card feature that you expose to other other other applications at the same time so you don't have to expose the whole entire application at the the same time you can you can decide to only expose a chunk of that and you can import that chunk to a certain um to a certain uh host application all right so once we get that out of the way there's a couple of other things we want to do so now we're actually only serving the host application we want to be able to serve the the other application so I will just go back here and X console I'm quite lazy so I will always do this just reload the page or reload the project section and you should see that the project should appear here if everything has uh gone the way we want it but as we can see it's not um so what we want to do is we want to stop this project real fast we reload the host let's see what happens um nothing happens so let's just go ahead and and copy this real quick I think there's also even further schematics which we can use um as you can see when we reserve it now just to to keep this in in our mind mind is that when we reserve the host application it automatic automatically serves or essentially builds the remote applications the reason to why it does this is because when we decide to serve our host application and it it actually generates some output for the other remote application so that we can work on this so this means that if we're serving the host and we want to make change to the card we need to reserve the application because it it it works in in this way and we can just shrink the screen a bit and as you can see here on Port 4,200 the the host application is served if you scroll up a bit you'll be able to see that on 4202 we are serving um let's see it was the product so if we navigate to 4202 we can do that by just holding the control andamp clicking on this let's minimize the screen a bit so that we can preview it and also here you can see we have welcome to the product if you go to 42 20 1 C is serving there if you go to the root we should have the root serving so you should be able to just jumping between the different features and keep in mind that keep in mind that we whatever we have uh or whatever we navigate to here is essentially the remote application so when I press press on card it goes to the remote application it fetches that data and that's what's being presented so let's say I want to go to the card component so that would be let's say cart module and we can just see on path empty it's going to load the entry module if we go to the uh uh routes of the that we can see that it loads the remote entry component which essentially is the uh angular NX welcome component so we can just go ahead and once again remove this for from the child uh or from the remote application my cart remote app if I would save this it's not going to reflect as mentioned because we are not um it's not being served at runtime you can do and set that up if you want to uh but as as of this it's not really supported I think you can go to serve you can click on host and then you can maybe um Dev remotes and here you could also specify card and I only want to serve for instance C and uh product and here you can also say we want to have it in in rebuild on on watch so if we set this up we can just copy the schematics I usually think it's quite nice to have it uh in the pack Json so you would have a script here essentially let's call it Dev and then you can spin this up for Dev environment I think when you add the watch flag with through I'm I'm hoping that it will rebuild the cart and product every time we make a change there I'm not uh convinced that it will do but we can try this out right so if I reload the page I go home we change the cart to my cart remote app if I click on product it still has the ugly uh or ugly it's quite nice but the the NX welcome component so if I would go to the cart now here is the NX updated if I save this we can see if it actually will rebuild and as you can see her running with the watch flag will actually in fact rebuild it so you don't have to reload it at all times or rebuild and so on so running with the watch flag will simplify our lives uh significantly as we can uh change in our remote applications at the same time as we change in our home application meaning we don't have to waste time waiting for the product to actually run so this is one way of setting up the model Federation with NX and angular and as I promised we're going to look into how we can share data between the different applications so the remotes uh and the host application you most likely want to have have a login section once you have logged in you're going to store some user credentials um which you should have and be able to work with from each and one of these applications maybe you have logged in once and you want to be able to navigate through the different applications with the same token so let's look at that so one question I usually get is how can I share data or share components between this application it's quite easy you would have to go to generate a Library so just for heaven safe we're just going to look into two different things first as I mentioned we're going to look into the actual way of sharing tokens so a shared Library where we can have services and so on that's being shared and the second would be the component library that we're going to generate now so we'll just name the library UI um if you want it to have it buildable you could have it if you have maybe you want to share a component library with somewhere else maybe there's other application does that does not live within the the monor rippo you could do that but we're not going to do it for now as mentioned we have a broken um we have a broken schematics here so we need to specify our directory ourself and with the dry run it helps us to find out so we want to place it within lips shirt UI that's where our shared UI um needs to live right so let's see here doesn't need to be buildable or anything right now we're just going to generate it out of box we're going to generate one component for that um so if you just go to the lib so apps and then we have our Libs folder we should have a shared UI lib So within this lib folder we can copy the relative path uh in just in case if NX is not really doing what we want to do so we can generate a component let's call it a button component which you want to be shared uh name of the project there's no name of the project um let's see if this works to generate because it seems like it it doesn't does not really want to do it let's see if we can specify uh there's no way of actually specifying a library which is quite trash um don't really know what has happened to the schematics it's quite strange to be honest so we are going to let's see if I can if we can use some other let's go with schematics angler to see if this works do we really need to specify the project this seems to be quite odd to be honest uh because we we want to be able to create components within the actual libraries and as the libraries are not showing up um there are a couple of things we could do actually let's run NX reset to see what happens um so it will stop the dams and stuff that we we have running um let's see now if we just reload here will it actually understand the changes that we have gotten no it does not which is quite annoying uh usually it should show our us the libraries that we have um so if we go test does not really do it so what you can do because it seems to be broken in for some reason you usually can just write an X repair um and if there would be something wrong with the uh the config files this usually can help us uh fixing that but as mentioned seems to be some strange with the schematics um let's see if you can continue now if now as you can see it finds a couple of different things uh so running the NX repair will probably repair the broken files that was generated and so on so now we can select UI I want this to be our button component can be Standalone who cares just generate it as for now uh we don't really care right now um let's see so it has been generated if we go back to this let's make this screen a bit bigger as for now we go to the button but button component let's just add one input just make it super simple go ahead and say label um and also go ahead and and just give it an empty like this if you don't want it to be required uh like this and then we'll have a button does not really need to look good this is just for demonstrating purposes so just have the label here we can now stop using this Library also keep in mind it needs to be exported as we have done and just to outline it for you guys um there's different ways of how you can structure the libraries um I usually create one library for each component and the reason to why we do that is because if one project or one remote is only using one component and we change a different component we do not want to rebuild that cart project because it didn't really have an effective change right however if you change a button within a shared Library we would not be able to know whether this cart was affected because we are essentially having connections between the actual library and the project and not per component base all right so now that we have that out of box we are now going to jump into the index file you always need to export or not always but do it you can export the button component in this way uh let's see here and now we can essentially just go to The Host uh let's say app module on the host application to just import this button uh I think we named it UI shared module let's see here if we have some it was just just UI module let's go ahead and see if we have some intelligence and as you can see we have a nice neat alas here for the import which is by the way set up on the TS config base file uh so if you wanted to change this I could go ahead and just change it to UI but let's not do it you can decide on how to structure this your own all right so now we import the UI modu should be able to use the button component within so let's just snatch the um selector from the button we copy this we go to the NX welcome of let's say host entry um we could if we don't want to place it here we could place it in the root so that it becomes available for all so host button we can just add the label hello host and then we should have a button with hell H host we can remove that and just to demonstrate if you want to add this one to the cart page we could do that as simple as that so cart module see Cart app module so here in the cart app module we need to import the sorry I think it needs to be imported within the remote because that's where we are essentially uh exposed so UI module we import it from there let's see if I copy the button we can just go and copy this real quick from the host so we can place it here within the the remote so let's see here hello card so when I save this let's see here there's something wrong is not known this means most likely it has not been imported in a correct way let's see where the NX let's see maybe saving will sold that for us um so yeah saving was the issue now that we have saved saved the entry module once again we can go back here and and just add an heading say cart just so that we can see the where it comes from um keep in mind that it rebuilds every time we save on in the so now we have a button hello cart and hello host so the host is living within the host section and the C is living within the cart section so if I now would just minimize it so that we we could see it we should have a Hello host which comes from the app component um hello host hello just to see what happens we update it and then from from the cart um apps cart Source here we can say hello card hello just to see that it actually updates and as I mentioned uh usually takes some time for it to reload and and what I figured is that when you update this module it will uh do this work us all right so hello host hello and hello so we have the same component now if I would go to the button and style it a bit would say button uh we can say background black color white um we can say padding 10px border zero border radius 4 PS and as you can see it it is R live updating on both applications and as you might understand this is very trivial when you are working with a project and a component library and you want to debug things fast for instance if you have an issue maybe somebody's reporting a bug on a component and you want to go into that component and validate it you can just serve the application go to that place and validate in this matter so it's it's it's it's it's terms of that it's quite easy so now that we have that out of the box we want to be able to create a shared thing where we can share the data between the different applications so as I mentioned the user part so to do that we're going to generate a library um let's see here generate search for Library um and we are essentially going to let's see here we can scroll down a bit can generate Library we're going to S nx/ angular Library click on that one uh we have some schematics let's call this um shed data all right so we the previous project that we had uh also give it a name in this way we can place it in Libs shared data so we have shared UI and now we have shared data right so in the same way we're not going to let it be buildable we're just going to generate in this way it's now going to receive a couple of things um closing the apps we'll have Libs so we should have shared and the shared should now have data and UI so to continue we need to create a service for instance within the data So within the lip folder we'll go ahead and generate a library sorry um not a library obviously we're going to generate a a component sorry a service because that's what we're going to share hopefully we can see the project here data is not here and what we can do is either you just do what we did before uh NX clear NX reset sorry and after resetting that uh all right so there's a couple of things we could not stop the D because something's running probably so we'll go ahead and and do an exra pair to see whether it would show up here um what you could do also is to just update the projects here and it should they should appear here if if everything works as is expected and as you can see we do not see the dat I would say this is maybe a bug or maybe I've set something up wrongfully I'm not entirely sure about this really but so let's make the screen a bit bigger uh we want to stop the project we go with NX repair it will will probably repair a couple of configuration files um NX reset so the demon stopped now we can repair it let's see here the UI sh UI data should appear it does not do that maybe sometimes you have to go here and and regenerate something so you'll regenerate the component I'm sorry for this inconvenience guys sometimes it's it's just working like this I have no idea why it it does not really um sometimes restarting the the um the project can also help so we're going to restart the the whole uh visous Studio code so be right back shortly all right now I'm back and as we can see here Shar data is now present so we know for fact that the library is now uh has been created so now we can go ahead and generate the the service that we wanted to generate for the library so we're going to say a service um and the service is going to be placed within Shar data now it actually has some intelligence and let's call it what we want to call this uh service maybe call it user service just for convenience sake so let's see here it's generating the service now that the service has been generated we should be able to see it in the library also in what you should have as a rule of thumb just always go ahead and and and Export it from the barrel file all right so now that we have the user service we can add some logic to it we're make going to make it super easy right let's see if we have the signal yes we do my friend let's go ahead and say is logged in and we can make just make this signal private I would say um is logged in the reason to why have signals and not Behavior subjects is because I I want to make this a habit of me working and then we can make a getter saying is logged in and here we can just return this signal state of that so that we cannot change it from outside without actually going through the service first this is a quite nice pattern all right so now that we have the is logged in variable we also want to add two functions we're not going to have some uh login screen for this here you could add the login screen you could add the login function here we going to keep it simple for us right so we're going to to and also with with the signals you need to call do set in order to set the variables and um or rather the signals now we have a a semi file that we can use in order for us to actually share the is logged in state probably here you want to have the token store then you want to have a couple of different things that you can essentially fetch from your applications maybe it would be in the interceptors and so on but let's keep this simple for now you can decide what to put within the services yourselves all right so let's continue guys so if we now serve the applications again they died because we had to close them down and as yeah as you might remember we have the mpm Run Dev that we created for Simplicity sake so that we don't have to run everything at all times and it runs with a watch mode so what what we should be able to do now is just get the name of the module we also need to uh let's see here we should be able to import this service uh straight ahead so what we really want to do is we want to go to our app component TS file in the host application we want to add some logic there the first thing we want to do is we want to inject the service that we just generated we want to create a getter which essentially fetch fetches the login State uh we want to also add two functions one which will simulate the login essentially calling that function and want to simulate the log out which would call that function so after saving that we can go to the HTML here we can add we can add a couple of things so is logged in and then we'll have the variable that we have is logged in and then we want to have two buttons one would simulate login and one that would simulate log out all right so to see what would happen Okay so we have on click we're going to simulate login on the that button and on this one we're going to simulate log out saving this we should be able to log in clicking on the login button should make us login and clicking on the other one should make us log out so this login is false when I cck click on login it will call the simulate function simulate login and that will essentially call the service which would then return a couple of things so now we can see that we're essentially just calling the service utilizing that service logic so now the more interesting part would be how would this behave if we would go to the C for instance the Cod NX uh console page here so we would have let's inject the private read only user service equals to inject user service so we inject the user service here and then what we want to do is essentially just fetch the login State this is probably something as I mentioned um you could place whatever you want to be placed here we're doing this just for Simplicity sake uh just having to demonstrate how it can be used and as you can see it's false false when I press the login it's not really being shared so there's a couple of things more that needs to be done the the last thing we need to do is essentially just restart the project as simple as that right because NX will automatically find out through the NX graph which dependencies are being retrieved from where and automatically add this to the dependencies of the shared libraries that we have for model Federation so this is where the magic really happens it's as easy as just creating a library we had to rebuild it because as mentioned the uh the cart is uh the C is a separate application which we run with build flag and so on and in order for it to really re-evaluate things restarting might be the solution so if I click on login the cord should now have received true when I pressed on the log out the cord should now be false and in this way we can share Services we can share functionality between different applications in a quite simple way so this my friends is how we can share libraries in terms of UI components and in terms of shared data in this way so for instance in this case we're sharing the user service data here is where you would have a a micr frontend to handle the login which would store the logged in token in a separate service maybe in the user service or if it would be an authorization service and then the different applications would just inject that particular service to to essentially fetch the token and add it to the interceptors in that that way you can persist a login token between different micr frontend remotes and host applications all right so now that this is out of the way we're going to look into our last part of the video we're going to look into the build how does it work with actually building the project and serving the projects postu how do we actually think of working with um with the micr frontends and let's let's go ahead and look at that so the first thing we want to do essentially just make sure that we close the um that we close the running project we can go to the NX console here we should have a build right so let's build the host and I think we can specify let's see here maybe not so we'll build the host application first there should be a disc folder here that would appear and as you can see the cart and product is already is already here because we were're running them or they're being executed with the build with a build flag so that's where the the data that's why we had to reload the application you probably can have other ways of doing it but didn't have any anything on top of my mind so the easiest way was just to reload it all right so now we're generating a build for the host application let's see here might be the case that NX has improved and also builds the other applications as well also keep in mind that when you build one application you do not want to rebuild all of the applications every time you deploy because then there's no does not really make sense to have micr front and patn if you don't really utilize that feature right then you can have a monolith or you can just have different libraries and so on to divide the code with lazy loading and so on um the reason to why you should want to have micr frontend is so that you have independent teams that can deploy a feature for instance you have a team working on the c section you have another team working on the product section they should be able to deploy new features without breaking the complete Logic for all of the different applications so they should be able to deliver a new feature just updating this product part just remaining the card that we had from previously all right so now they have we have the host we have the product and we have the card so now we have the three different uh application here so the big question is how do we work with this post deployment I'm going to zoom in a bit so that we can see the the structure a bit more the question that I usually get is how can we do this post post uh post deployment and so on so it's quite simple or really it might not be quite simple but the concept is quite simple if you open each one of the apps you will see that they are identical they all generate the similar design the only thing that differs from the host and the cart is essentially that the remote application having remote entry which we are interested in we want to have the remote entry which we essentially import into our host application because this is the logic that we set up okay so now that we have it in this way we should now be able to open this up I'm going to utilize the live server to do this so there's an extension another extension in which you can use so it will serve up serve it in in in a way that makes it easier for us to actually look into and this is not going to work I can tell you that for a fact and the reason to why I I say it will not work is essentially because if we make the screen a bit bigger so that it makes more sense still to look at it we can open the error console and you can see the output here what is the issue what is really happening it doesn't really find the different things that we have so the polyfills and everything and the reason to this is because we need to specify the base URL or the base hrf so this would be slash apps slash host right because we need to come in here but we're not going to come to host we're really going to fetch from this storry so this app Host this is the root of this application Okay the reason to why this is the root of of the application I will make the screen a bit larger so that we can see it we need to have the correct folder structure to where it's being placed within the logic so we're placing it within this apps Host this is the way it will actually understand what to load and what not but we still have another issue so if we now add back to the to the Chrome so we'll minimize this screen and we click on the remote entry because it does not really it's not being able to load the remote entry and as as we can see here it tries to load from a certain Port we're not running anything keep in mind that everything is static so we have static files coming from the the build so this instead of having the Local Host it should Point towards the card folder right or it should be pointing toward the product folder depends on really what application we tries to load so what you should do is now we'll go back to the vs code sorry for jumping a lot because there's a lot of things that we need to examine so if you now go to the apps we go to the host and we check on the weback prod config here is where there's even comments from from the NX team and model Federation team that there is a couple of remotes we need to specify I want to give heads up and and I want to say they have done a really really great work it's super easy to set it up it's obviously takes some time there's a learning curve but once you get into it it will become so much easier um so once again thank you for bringing so much to the community guys um I think everyone should be quite happy with this and this is what the um schematics gave us I mentioned that we're not going to run on anything on Port so if you just say it's not called app one it's called cart and the second one was product right so now we need to figure out um a couple of things we are in the disc folder and we stand on the host so how do I get back to the product right so there's we need to go out one up one folder and from that folder we also need to jump into the product folder so we'll go back one folder and then we'll jump into the product folder and it's the the same concept that we can have for the card right we jump out one folder and we jump into the card folder this is something that will vary from Team to team it all depends on how how your cicd set up how you deploy the applications where they're being placed these are things that needs to be aligned before starting to work with this stuff all right so now that we have this we obviously need to rebuild the host because yeah rebuilding it will generate a a a bundle that contains this setup so we can try this out we'll do this by just being lazy as I am we'll go to enx console and we'll generate a new sorry we we will we will build create a new build of the host application so doing this also keep in mind you can specify the base HF so let me just stop this and and we will create the build you can okay I thought it would give me yeah you need to press here on the you can click on host and here we should have the base hrf and here also keep you it needs to be this apps host right this is is essentially where it's being placed right now and where we run the live server so that we can simulate this Behavior All right so doing this now we should be able to receive an output and something that loads with the folders in this way and we need to make sure that this actually works in some cases you would have to have three different service and and and so on but let's look at this all right so if we go to the disc and we go to the host and we go to the index HTML file we should have the just generated base HF already aligned here which is correct and I can also tell you for a fact that we do not have the base HF for the cart and also for the product so let's go ahead and just add it there we should probably have uh something set up and if you have cicd you probably will have to set up the base hrf if they're not all being placed within the rout which I do not think they will be because that would probably break a lot of logic so product will have the part now they all know the context so if I would now minimize the screen to get back to the Chrome and we would just reload the page here what would happen we still have some issues right so what are the issues it says that it tries to find the C on this port and it seems like it cannot find it from the disc apps cart so there's something wrong so just examining the folder structure we can see on the card we should have a remote entry which should not be JS seems like it generates an MJS so now we can go back to web pack prod once again just adjusting that sorry for running into all of these problems with you guys I just want to make sure that you guys know what to do when you run into this on your own because I've have probably run into this so many times myself that yeah I've done it so many times times already so I would know what to do what when something occurs so this apps host all right we'll execute this it's once again going to generate a new thing and it's going to have the MJS files uh that you can point towards let's see what happens if it if this works for us or not okay reload the page once again and as you can see here keep in mind we're not serving anything this is all stat files so this is how it would look like when we deliver something to production and as you can see here we have that part we have the cart so if we're on the cart page um you can see that it still reflects the reason to why I have the live server uh let's sorry I can see that I haven't really changed back the screen so we're we're on Local Host 1271 Port 5,500 and then we have this apps host right so this is the base HF where it actually serves the index HTML file of the host application keep in mind I run the the live server to simulate how it would be when we place this code this chunk of the the disc folder within for instance a server this is how the behavior would be right so it's a good way of actually simulating things locally on your computer before you deploy something to a server and then having to try to debug on that particular server so if I go to the home we're on the home if I click on cart you'll see all of the cart logic here and you should see that the service still works so it actually should be able to to share the data between the cart and the host application also keep in mind it should also have the same state from from the product as well we didn't add it because I thought it was a bit Overkill uh to do it so in this way we're generating static files which is essentially our disc folder so you should be able to move your this folder into a particular server and navigate to your server URL adding this apps host if you want to have a different URL keep in mind if you want to have a different URL because this does not look good for users right you can use uh rewrites you could use proxies to change the url and so on to make it more uh efficient and nice we're not going to look into that in this video we're not going to look on deployment we're actually just examining the build looking how we can share the data and so on and as you can see here it's quite it's it's super trivial on how it works so the last thing I want to say is that when we now rebuild the card page we do not want to like we want to be able to deliver the card page without having to rebuild all of the other applications so now if I or let's take the product page per se because the product page is quite it has a lot of content right so we're going to make this bigger we're going to the NX welcome of the product page we're going to remove the data all of it uh and we're going to say this was change post deploy or post build and with post deploy I mean when we have deployed the host application or the or the cart application this is a change that comes afterwards so now if I build the let's see the product let's spef I the base hrf it should be slash this SL app slash product and training slash as well um when I build this one it should not rebuild any other of the applications So in theory you should be able to move the product folder into your server having the updates coming in a similar way that it did before without having to to rebuild all of the complete projects that you have and that my friends is exactly how you want it to be let's see here we go to the host seems like something was not broken and as you can see all of the different applications that we had so the cart it's a standalone application which is used as a remote and then the home the only thing we changed was the product and we delivered it by building a new instance of it and with this I mean when you go to production you should be able to individually deploy the card page the product page page maybe not the host but the the the cart and product page you should have to only build them right and here is where NX comes with a lot of helps schematics and and different things um so they have something called NX affected I'm not going to jump it into that in this video if you want to know more about cicd and how to work with NX affected please drop a comment and I will make sure to make a video about that anyhow the NX affected Works in in such way that it will understand what differences you have made which which check sums of which projects and libraries has been changed so it will automatically understand okay you have changed our user service which essentially is shared for the host applications it's also shared for the card so it would automatically understand when I change the user service it should rebuild the host and it should rebuild the cart and this means that we could easily build a cicd pipeline that would just move these static folders that we generate so as mentioned it's all static it's super easy when it's static because there's nothing that needs to be served it's just files that you move in this way static files so you would be able to move the product folder to your server without having to update the C and host and and a similar matter the other way around you should be able to to deploy the cart or the host individually but keeping in mind that it's the cicd for this might be a bit more complex than than what it initially looks like because there's only a couple of things you need to keep in mind as well all right guys um in this video I want to thank a couple of people who actually gave me the the feedback of creating a video where we go through how to share things and in particular we're referring to sharing data and not components so we in this video looked into sharing the uh the user service and keep in mind you could essentially add whatever you want to add here it's I added signal with a true and false flag just to simulate the behavior uh we also looked into the post deployment how that would work how you should think about it how it should be set up and in the main Theory what you need to understand is that the configuration usually comes from the host file you usually configure everything from the host file and everything that comes post production is something handle in the remotes all right guys thank you for watching I hope you guys enjoyed all of the best thanks

Channel: Sebastian Persson

Views: 1,610

Keywords: #angular, #microfrontends, #NX, #Monorepos, #ModuleFederation, AngularServices, AngularLibraries

Id: edTA7amdvzI

Length: 49min 4sec (2944 seconds)

Published: Sun Oct 08 2023