It wouldn't be nice to extract DTO classes from the backend to a separate library and then use it in the frontend...?

That's what we're going to do in this lesson. The main reason and advantage of this action is to have the
strict "contract" used in communication between the backend and frontend. In this case, if someone decides to change the class
because it's necessary for the backend, you'll instantly make the exact change in the front end. If the change is breaking, the CI or
build command will notify you where it's breaking. Of course, it's possible when you're using Typescript.

Extracting a new library, in this case, is fairly simple. The first thing we need to do is to create a new Typescript
library. We covered this in previous lessons, so follow the commands below.

yarn nx g @nx/js:lib libs/shared/dtos --buildable --publishable --importPath "shared/dtos"

As a result, you should find a new library inside of the 

 file, so I'm
removing it, and it's imported in 

---
title: Extracting shared DTO library
description: How to extract library with DTOs classes from backend app and prepare it to be shared with frontend application
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-angular-applications-with-nx-app/-/tree/main/manuscript/code/04.04-dto-library?ref_type=heads
privateVideoUrl: https://stream.mux.com/2Z2WaaNi9TAe2dBfSPOX8ZdJW2YyEdIJ1MD9G1EyaD00.m3u8
---

It wouldn't be nice to extract DTO classes from the backend to a separate library and then use it in the frontend...?

That's what we're going to do in this lesson. The main reason and advantage of this action is to have the
strict "contract" used in communication between the backend and frontend. In this case, if someone decides to change the class
because it's necessary for the backend, you'll instantly make the exact change in the front end. If the change is breaking, the CI or
build command will notify you where it's breaking. Of course, it's possible when you're using Typescript.

Extracting a new library, in this case, is fairly simple. The first thing we need to do is to create a new Typescript
library. We covered this in previous lessons, so follow the commands below.

```bash
yarn nx g @nx/js:lib libs/shared/dtos --buildable --publishable --importPath "shared/dtos"
```

As a result, you should find a new library inside of the `libs/` directory. We don't need the `src/lib/dtos.ts` file, so I'm
removing it, and it's imported in `src/index.ts`.

![Folder structure after running nx generate command](https://d2uusema5elisf.cloudfront.net/courses/building-angular-applications-with-nx/module_05/lesson_05.04/public/images/04-04-01.png)

Because we have two kinds of DTOs, inside of the `src/lib/` of my library, I'm creating two directories, `rooms` and `meetings`. This is a small library, and this step may be pointless, but I believe that even in small apps, you should keep everything organized. Not because it's useful but because you train your skills as a programmer.

galczo5

How to extract library with DTOs classes from backend app and prepare it to be shared with frontend application

Extracting shared DTO library

Once we migrated our backend application to Monorepo, we have all the files in

directory in apps here. I thought that it would be nice to extract dto files to

so we can use it in backend and frontend application. So even if we introduce

dto's backend or frontend, the second app will notify us that something is

change the second application. In this lesson we are going to do extraction of

javascript library. So we need to create a new javascript library and I'm using

nx generate nx/js library that path to our library so libs/shirt/dtos and then

to flags buildable and publishable and of course obligatory import path. So I'm

path shirt/dtos. So let's execute the command. We need to answer few questions.

unit test runner we are going to use? Because I'm going to put only dtos there

test some I'm going to choose none. The next question is about bundle we are

I will use tsc. And the last question is about name we provide. So we can use

dtos with files root under libs/shirt/dtos or we can use derived with name

same route for our files. I will use as provided. As always installing staff

after a few seconds we have everything installed and we can continue. So as you

directory called libs and inside we have shirt/dtos, as our c and lib. So I'm

the files inside of lib. In the next step I'm going to go to my backend

and rooms. I'm going to open dtos. I'm going to select these two files and copy

directory in shirt/dtos. The last part in library what we need to do we need to

here and we need to export these two dtos. So let's export everything from libs

and of course from the room dtos. Now we can go to the backend application and

directories. And of course after that change we have to fix imports in files

dtos. So for example we have meeting converter service.ts and as you can see we

that is red so something is wrong. All we need to do is import it from shirt/dt

this in all files that require that change for meeting dtos and room dtos. So I

everything and see you in a few seconds. So all files are fixed at the moment.

dtos is imported from shirt/dtos. So this is our import path that we set

And import path can be anything you want, anything that is meaningful for you.

app works after the change. I'm going to go to my console view and I'm going to

comment that we used previously in previous lessons to start backend. So yarn

backend. And here as you can see a little bit app, annex built for us one

the backend. So it had to build the library that contains dtos before building

You don't need to do anything for it. It does it automatically. So annex is

and is able to build dependency tree to build packages in correct order. So as

everything is started. We have our routes. We have our hello. We have our rooms

and points. So the dtos extraction has ended successfully. And we have a new

can use in both backend and front-end application. So if you introduce a

code to dtos to backend application or front-end application, the second

know during the build step that something is wrong and you have to fix it. So

care about contract between front-end and backend. It works automatically

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript