According to the plan and design, we need three applications:

Our frontend applications have a few common components like buttons, lists, inputs, etc. It would be nice to share these components between apps.

In this lesson, we'll generate the applications and libraries we need. The plan for that is to make the folder structure look like this:

- apps
    - backend // done
    - admin-frontend
    - room-frontend
- libs
    - dtos // done
    - components
        - button
        - list
        - card
        - room-list
        - room-background

I'm going to create them in advance. In real life, you may make them when solving a problem you currently have. For this course, it's better to have them created and focus on more important aspects.

---
title: Adding new Angular apps to existing monorepo
description: Add new Angular apps to the existing NX repository
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-angular-applications-with-nx-app/-/tree/main/manuscript/code/04.06-libraries?ref_type=heads
privateVideoUrl: https://stream.mux.com/5n9fVANyqY4SBqIc8lPNPJvx411oKkxzCKdFUrDvbSc.m3u8
---

According to the plan and design, we need three applications:

-   `backend` in NestJS - we got it
-   `admin-frontend` in Angular - application, which will allow us to add a new room and assign meetings to it
-   `room-frontend` in Angular - the application which will display the room's timetable

Our frontend applications have a few common components like buttons, lists, inputs, etc. It would be nice to share these components between apps.

In this lesson, we'll generate the applications and libraries we need. The plan for that is to make the folder structure look like this:

```text
- apps
    - backend // done
    - admin-frontend
    - room-frontend
- libs
    - dtos // done
    - components
        - button
        - list
        - card
        - room-list
        - room-background
```

I'm going to create them in advance. In real life, you may make them when solving a problem you currently have. For this course, it's better to have them created and focus on more important aspects.

## Apps

We want to have CSS as a styling solution and routing enabled for all applications.

```bash
yarn add -D @nx/angular
yarn nx g @nx/angular:app apps/admin-frontend --prefix admin
yarn nx g @nx/angular:app apps/room-frontend --prefix room
```

## Libs

```bash
yarn nx g @nx/angular:lib libs/shared/components/button --prefix shared --buildable --publishable --importPath "shared/components/button"
yarn nx g @nx/angular:lib libs/shared/components/list --prefix shared --buildable --publishable --importPath "shared/components/list"
yarn nx g @nx/angular:lib libs/shared/components/card --prefix shared --buildable --publishable --importPath "shared/components/card"
yarn nx g @nx/angular:lib libs/shared/components/room-list --prefix shared --buildable --publishable --importPath "shared/components/room-list"
yarn nx g @nx/angular:lib libs/shared/components/room-background --prefix shared --buildable --publishable --importPath "shared/components/room-background"
```

## Styles

For the purpose of this course, I'm providing you with the full CSS code needed to build every component in the next few lessons. Please copy the code below to `src/styles.css` in both frontend applications.

```css
/* You can add global styles to this file, and also import other style files */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
    --button: #38bdf8;
    --button-hover: #0ea5e9;
    --primary: #38bdf8;
    --red: #ef4444;
    --disabled: #d4d4d4;
    --shadow: #bae6fd;
    --border: #e5e5e5;
    --border-width-sm: 1px;
    --border-width: 2px;
    --border-width-lg: 4px;
    --radius: 5px;
    --size-1: 5px;
    --size-2: 10px;
    --size-3: 15px;
    --font-small: 12px;
    --font-regular: 14px;
}

galczo5

Add new Angular apps to the existing NX repository

Adding new Angular apps to existing monorepo

According to the plan and design, we need to create three applications. Backend

and we have it, we migrated it from Nege.js application, admin frontend

and room frontend application. And of course, we need to have multiple

shared pieces of code inside of that libraries. In this lesson, we are going to

them in advance to make our work easier in future. As always, we need to add

to our nx monorepo. So we are at minus capital D, nx slash angular. Let's wait

we have to generate our first angular application. And I'm using the command

So yarn nx g for generate at nx slash angular app, apps admin frontend, that's

to my application, and prefix admin. All options that I selected for this

on the screen. After a minute, our admin application is generated, we have it

admin frontend and admin frontend end to end tests. Let's repeat the command

application. So yarn nx generate, nx angular app, and the path is apps slash

with prefix room. I'm using the same options for the second app. Okay, we have

applications that we need. We have back end one with end to end tests. We have

end to end tests. And the last one, the room application, of course, with end

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

called room list and room background. I'm going to use generate comment, which

So we have yarn and x generate, of course, nx slash angular leap, and then the

I'm going to put all my libraries in leaps slash shared slash components. So it

where you have your components. And then I'm going to add prefix because it's

prefix is shared to flex buildable and publishable. It's my personal preference

likes if you want. And I'm adding an import path, which is obligatory for

And import by this shared slash components slash button for button. And I'm

comment five times for all the components I have. So for button list card room

See you in a second. I'm using as provided for every library that I'm creating.

want, you can use derived. So I'm going to choose as provided for all five

All libraries are generated. Let's check what has changed in the file system.

leaps directory in shed, we have a new directory called components. And we have

library skiers. So we have baton, which has all the configuration files and

And the same for the rest of libraries. The last thing we're going to do in

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

applications when you do this at home. So to apply it, you need to go to admin

as our C style CSS. And here you should put the code I provided. So let's paste

lines of code, nothing really complicated, but you have everything here. Of

your own CSS. I want to encourage you to do this just because when you write a

train your skills. So if you don't have time, you want to learn annex and

just paste my own styles. If you want to train CSS skills, please write your

provide the same code in a room front end application. So let's go to room

as I'll see styles and let's paste the code here. And that's all for this

everything prepared. In next lesson, we are going to generate storybook

bit different approach than previously. So see you in the next lesson.

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