Adding new Angular apps to existing monorepo

[00:00 - 01:40] According to the plan and design, we need to create three applications. Backend one, and we have it, we migrated it from Nege.js application, admin frontend application, and room frontend application. And of course, we need to have multiple libraries to keep our shared pieces of code inside of that libraries. In this lesson, we are going to generate all of them in advance to make our work easier in future. As always, we need to add necessary dependencies to our nx monorepo. So we are at minus capital D, nx slash angular. Let's wait a second. Next, we have to generate our first angular application. And I'm using the command that we already know. So yarn nx g for generate at nx slash angular app, apps admin frontend, that's the name and path to my application, and prefix admin. All options that I selected for this application are visible on the screen. After a minute, our admin application is generated, we have it here. So we have our admin frontend and admin frontend end to end tests. Let's repeat the command for the second application. So yarn nx generate, nx angular app, and the path is apps slash room frontend, with prefix room. I'm using the same options for the second app. Okay, we have all three applications that we need. We have back end one with end to end tests. We have admin one with end to end tests. And the last one, the room application, of course, with end to end tests.

[01:41 - 02:03] Now it's the time to add libraries for shared pieces of code. I'm going to add five libraries for button, least card components, and two domain components called room list and room background. I'm going to use generate comment, which looks like that.

[02:04 - 02:39] So we have yarn and x generate, of course, nx slash angular leap, and then the path to the leap. I'm going to put all my libraries in leaps slash shared slash components. So it 's easy to find where you have your components. And then I'm going to add prefix because it's necessary. So prefix is shared to flex buildable and publishable. It's my personal preference . You can skip these likes if you want. And I'm adding an import path, which is obligatory for publishable libraries.

[02:40 - 03:01] And import by this shared slash components slash button for button. And I'm going to repeat this comment five times for all the components I have. So for button list card room list and room background. See you in a second. I'm using as provided for every library that I'm creating.

[03:02 - 03:14] But you if you want, you can use derived. So I'm going to choose as provided for all five libraries. All libraries are generated. Let's check what has changed in the file system.

[03:15 - 04:47] So in our leaps directory in shed, we have a new directory called components. And we have all our five library skiers. So we have baton, which has all the configuration files and some source code. And the same for the rest of libraries. The last thing we're going to do in this lesson is providing styles for our applications. I don't want to take your time watching because it's not a CSS course. So I'm providing you a full style CSS file you can use in your applications when you do this at home. So to apply it, you need to go to admin front end, as our C style CSS. And here you should put the code I provided. So let's paste it. It's about 300 lines of code, nothing really complicated, but you have everything here. Of course, you can create your own CSS. I want to encourage you to do this just because when you write a new CSS, you always train your skills. So if you don't have time, you want to learn annex and things connected to annex, just paste my own styles. If you want to train CSS skills, please write your own CSS. We need to provide the same code in a room front end application. So let's go to room front end, as I'll see styles and let's paste the code here. And that's all for this lesson. So we have everything prepared. In next lesson, we are going to generate storybook configuration using a bit different approach than previously. So see you in the next lesson.