Extracting shared DTO library

[00:00 - 01:19] Once we migrated our backend application to Monorepo, we have all the files in the backend directory in apps here. I thought that it would be nice to extract dto files to separate library so we can use it in backend and frontend application. So even if we introduce some changes to these dto's backend or frontend, the second app will notify us that something is wrong and we need to change the second application. In this lesson we are going to do extraction of dto's to separate javascript library. So we need to create a new javascript library and I'm using command yarn nx generate nx/js library that path to our library so libs/shirt/dtos and then I'm adding to flags buildable and publishable and of course obligatory import path. So I'm going to use import path shirt/dtos. So let's execute the command. We need to answer few questions. So which kind of unit test runner we are going to use? Because I'm going to put only dtos there there's nothing to test some I'm going to choose none. The next question is about bundle we are going to use.

[01:20 - 03:33] I will use tsc. And the last question is about name we provide. So we can use as provided with name dtos with files root under libs/shirt/dtos or we can use derived with name shirt/dtos and the same route for our files. I will use as provided. As always installing staff takes some time but after a few seconds we have everything installed and we can continue. So as you can see we have new directory called libs and inside we have shirt/dtos, as our c and lib. So I'm going to delete all the files inside of lib. In the next step I'm going to go to my backend application app meetings and rooms. I'm going to open dtos. I'm going to select these two files and copy it to my lib directory in shirt/dtos. The last part in library what we need to do we need to go to the index.ts file here and we need to export these two dtos. So let's export everything from libs /meeting.dtos and of course from the room dtos. Now we can go to the backend application and remove dtos and directories. And of course after that change we have to fix imports in files that used meeting dtos. So for example we have meeting converter service.ts and as you can see we have import path that is red so something is wrong. All we need to do is import it from shirt/dt os. And we need to do this in all files that require that change for meeting dtos and room dtos. So I 'm going to change everything and see you in a few seconds. So all files are fixed at the moment. As you can see room dtos is imported from shirt/dtos. So this is our import path that we set creating the library.

[03:34 - 04:07] And import path can be anything you want, anything that is meaningful for you. So let's check if our app works after the change. I'm going to go to my console view and I'm going to execute the comment that we used previously in previous lessons to start backend. So yarn and x serve backend. And here as you can see a little bit app, annex built for us one package before building the backend. So it had to build the library that contains dtos before building backend.

[04:08 - 05:00] You don't need to do anything for it. It does it automatically. So annex is aware of your packages and is able to build dependency tree to build packages in correct order. So as you can see, everything is started. We have our routes. We have our hello. We have our rooms and meetings and points. So the dtos extraction has ended successfully. And we have a new library that we can use in both backend and front-end application. So if you introduce a breaking change to your code to dtos to backend application or front-end application, the second application will let you know during the build step that something is wrong and you have to fix it. So no longer you have to care about contract between front-end and backend. It works automatically because of that new library that we made.