Mastering NX Angular Monorepo: Simplify Development and Boost Productivity

in this video you will learn what is mono Reaper and how you can set up it by using a NYX project [Music] so the first question is what is mono Reaper and this is something which is mostly interesting for big applications or companies where you have lots of different projects and you somehow need to build the whole ecosystem around them as you can see here I opened the website monorepo.tools and here you have a really nice explanations what is monorepa and what is not as you can see here we have monorepa and poly Ripper and this atupa pillar weighs how we are working in the companies first of all let's talk about poly repo the idea is that you have different repositories for different projects for example you have project one project two project three then you need some libraries which are shared between these projects for every single Library you are creating additional wrapper you can release stuff in the Trapper it has its own version and then all of the Rippers can use it this is exactly what you can see on this image monorepo is different you have also here your company but then inside the same repository you have all your applications all your libraries and they can work together and actually there are pros and cons in both these variants it is not like one of the experience is superior the really important line to remember that monolith and monoripo are two different things monolith means that you are just throwing everything that you have all your projects libraries whatever files you have in a single repository and you don't structure it at all then it becomes unsupportable and we don't want that monorepa is something different you have a strict structure and strict rules how all your projects are working together and the main question is here why do we need monoripa and not poly repo the main idea with spoilerepo is that you have different versioning in different places and you can make releases at any moment which is actually totally fine because everything is version separately but the amount of changes and the amount of releases that you typically need to do is quite huge inside mono repo you have just a single repository and you have just a single release for everything and obviously you can understand it has its present cons it is easier to make fast changes but nothing is isolated which brings us to Enix a NYX is one of the most popular solutions to create monorepo and this is exactly what Bob will use in this tutorial to create it in a matter of minutes so what the Nyx does first it organizes the whole folder the whole repository with all our projects and all our libraries additionally to that we will get out of the box all commands that we need to start our applications build our libraries build our projects run in LinkedIn tools testing tools and much much more so let's try it out first of all we want to generate a new project and for this we're writing in Peaks create the next workspace at latest I'm hidden here and and we will get some questions first of all I don't have this package this is why it must be installed secondly we're getting some questions what do you want to create package based monorepo integrated monorepo and Standalone applications the easiest to start because you are getting everything configured is integrated monorepo this is exactly what we're selecting here now what to create in your workspace let's create an angle application inside and let's name our repository full company because this is the whole repository for the whole company and our first application inside which is an angular application let's name it shop here we'll also get in a question do we want to use Standalone components or not inside our angle application we can select here yes add routing CSS and now we don't want to create distributed caching as you can see everything is installed successfully and let's look on our project so this is the project that we're getting we have here apps Libs and also tools and some configuration files we're interested here to look in our apps because here we have our shop and tests for our shop which actually means our angular application that we generated is living now inside apps shop and here is our application we have here Source app and this is just a normal angle application now let's try to start it for this we must write and Peaks and Nyx and the Nyx is exactly the common line for index commands and here we're calling ran then the name of our application in our case it is shop then column and serve and it is always run then the name of the application and then serve and this will start fast and angular project and it doesn't really matter if you have an angular project a rack project or node project you will always start it in the same way with the next commands as you can see in browser my project is successfully started here are my in localhost thousand two hundred and here is an angular project which we created with an X which essentially means now we can create any amount of projects that we want and they all will be lying here inside apps and then the name of the project what I want to do now I want to generate one more project but I want to generate a react project but here is important point to remember if you are working in a company you want to use just a single framework there obviously it is not always possible but it is really difficult to share your components between react and angular for example and if you have just a single framework and you are sharing libraries between different projects which are leveraged in the same framework then it becomes much easier for you to make updates or Implement new components with that being said let's create direct application because sometimes you have different use cases and your other team might want to use reactant not angular for example in order to generate an application I am writing here npx and X generate and here we have add an rwl slash react colon application if we want to generate angular application we would write here angular application but in our case here I want tracked and the name admin is totally fine and as you can see here I have an attribute minus minus TS this is an attribute for a NYX to tell that we want to generate typescript tracked project not JavaScript in this case by default it would generate JavaScript project but as we already have an angular project it makes a lot of sense to use typescript in this case we can create a typescript library and share typescript utilities for example between these two projects I'm hitting here and and we're getting an error enable to resolve react application why it happens because actually for this we must install an additional package so npm install add nrw l slash react let's try to generate project once again now we don't get an error but we'll get some questions what style should format we want to use we can get out of the box style components for example but I will just select here CSS would you like to eject router obviously yes and what bundle do you want to use I want to use Veet as you can see our project was generated let's check this out now inside for company we have inside apps not only our shop but also admin project and here inside source you can see typical drag project let's start this application with npx index run and here will be not to observe but admin serve as you can see in browser our react application is successfully started so this is totally fine with successfully generated to projects and two different teams can implement this project but what will we do if these teams want to share something and this is why we have libraries inside identics and in order to generate a library we can write any Peaks Annex generate here will be an rwl slash and I want to write here JS lib and let's name it utilities as you can see here we're getting a bunch of questions first of all what does stronger we want to use I will select none and secondly what bundle do we prefer I will select here typescript because I want typescript files to make a shareable typescript library as you can see here our library was created let's check this out and inside of a company not inside apps but inside Libs we're getting new library which is utils and this is our shareable library with just typescript to shade between applications which means there is no executable for the project this is a library and it is just been used in different projects as you can see here inside source we have index.s and here we have an expert from lib utilities and actually this is is totally fine what I want to do I want to create here just a single function for testing so you can see how we can use Library between two different projects this is why here I want to define a range function from start to the end and here I want to return a spreaded array from and minus styled where I'm taking keys and I'm mapping through every single property to add to it our start point and as you can see we are getting here warnings from the typescript so we must say that start is a number and end is also a number and back we will get an array of numbers so we successfully created our first function that we want to share now we can jump inside our projects inside app shop here Source app we have here for example app component what I want to do here I want to create only need function this is why implements are needed and here in generate function and they want to just console log here our range function function so in order to import correctly range function we must write here import range ROM and here we're getting add and as you can see we're getting lots of stuff which is related to our full company I'm typing here full and we're getting full company utilities this is exactly the library from our company that we can import here and use and what is even better I can just jump inside this range function and it is working out of the box now here inside this console log I want to just write range and call it from start to the end for example 40 45 now I want to jump to our react project this is where here apps admin Source app and here we have app tier 6 and now here on the top I want first of all to import our range function and secondly just console log here a range function from 40 to 45. as you can see in browser here I opened an angular application and inside console we can see the user which of our range function and exactly the same with our react application inside console we see our range function result so this is exactly how we can create library and shade between two different projects inside our monorepo so index is a complicated but an extremely versatile tool which is suitable for a lot of projects inside your company and actually if you are interested to know what is angular signals and why it will change angular forever make sure to check this video also

Channel: Monsterlessons Academy

Views: 11,161

Keywords:

Id: m1NTKbHwNJk

Length: 11min 46sec (706 seconds)

Published: Tue May 23 2023