### Challenges and solutions in building large Angular apps

In large Angular applications, developers face several significant challenges. One major issue is managing complexity. These apps have lots of components, services, and modules that all need to work together smoothly. Keeping everything organized and easy to understand can be tough, especially with a big team.

Another problem is build times. As the app grows, it can take longer and longer for changes to show up during development. This can slow down the development process and make it harder to stay productive.

Dependency management is another headache. This involves making sure all the different parts of the app work well together and play nicely with outside libraries. 

### Tool limitations

Even experienced teams can struggle with managing large Angular applications without using the right tools. Organizing numerous components, services, and modules becomes challenging without tools that aid in clarity and team collaboration. Utilizing appropriate tools is key for experienced teams to successfully navigate the complexities of large Angular projects.

### Fixing problems with NX

NX offers several benefits for managing large Angular applications. It helps reduce the time it takes to build projects and keeps code well-organized by managing dependencies and structuring code into reusable parts. This makes it easier to maintain and expand applications over time.

One of NX's strengths is its ability to speed up builds. It does this by remembering previous build results and doing multiple tasks at the same time. This saves developers time and lets them make changes quickly.

NX also comes with tools for testing and checking code quality. It works well with common testing tools and helps keep code clean and consistent. This catches mistakes early and ensures code stays high-quality.

Furthermore, NX makes it easy to work together on projects. It keeps all code and shared parts in one place, making it simpler to share code between different projects or teams. This improves teamwork, reduces problems with combining code, and makes development smoother overall.

Manage Large Angular Apps and Supercharge Development Workflows

Learn how to create and maintain Angular applications using NX. 
Designed for Angular developers, this course covers best practices, improving workflow, and migrating existing applications to NX. 
Discover how to configure tools like Cypress for end-to-end testing and Storybook for UI component development. 
By the end of this course, you will have the knowledge and experience to work comfortably with NX on a daily basis.

Next-Level Angular Apps with NX

---
title: Built-in app types in NX
description: How can you add more apps to monorepo, which frameworks are available at the time, and advantages of keeping them together
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-angular-applications-with-nx-app/-/tree/main/manuscript/code/03.02-app-types?ref_type=heads
privateVideoUrl: https://stream.mux.com/riFvOAZP1F9k539wnP3JdUMflYK4uiKrDLhb6DIWMAk.m3u8
---

I assume that, as a front-end developer, you know that NX supports applications in various frameworks. It's essential to know which one exactly.

In this lesson, we'll check out what NX supports by default and what to do when your technology is not supported.

## React

To create a new React application, add the `@nx/react` package to your dependencies. Then, you can execute the command to generate a new React application.

```bash
yarn nx g @nx/react:app app-name
```

![React Generator #1](https://d2uusema5elisf.cloudfront.net/courses/next-level-angular-apps-with-nx/module_04/lesson_04.02/public/images/03-02-01.png)

The interactive installer will ask you about a few things, like which styling preprocess you want or which bundler you prefer. After a few seconds, your React application is ready.

![React Generator #2](https://d2uusema5elisf.cloudfront.net/courses/next-level-angular-apps-with-nx/module_04/lesson_04.02/public/images/03-02-02.png)

React application generated by NX comes with the following:

-   End-to-end testing configuration with Cypress framework
-   Full Typescript configuration
-   ESLint configuration
-   Unit testing configuration with Vitest or Jest with the `@testing-library/react` library installed

Similar to the Angular application, you have everything needed to start.

## React Native

First, you need to install `@nx/react-native`, which contains the necessary dependencies for React Native projects.

Generating new React Native applications is almost identical to other kinds of applications.

```bash
yarn nx g @nx/react-native:app app-name
```

A significant change is that in the case of React Native, there's no interactive installation wizard, and it comes with default configuration (Metro, Typescript, Jest, ESLint, and Detox).

```text
> cd apps/react-native-app
> ll
total 88
-rw-r--r--  1 kamil  staff   159B Aug  5 12:12 Gemfile
drwxr-xr-x  9 kamil  staff   288B Aug  5 12:12 android/
-rw-r--r--  1 kamil  staff    66B Aug  5 12:12 app.json
-rw-r--r--  1 kamil  staff    60B Aug  5 12:12 babel.config.json
drwxr-xr-x  8 kamil  staff   256B Aug  5 12:12 ios/
-rw-r--r--  1 kamil  staff   380B Aug  5 12:12 jest.config.ts
-rw-r--r--  1 kamil  staff   1.2K Aug  5 12:12 metro.config.js
lrwxr-xr-x  1 kamil  staff    95B Aug  5 12:12 node_modules
-rw-r--r--  1 kamil  staff   317B Aug  5 12:12 package.json
-rw-r--r--  1 kamil  staff   2.8K Aug  5 12:12 project.json
drwxr-xr-x  4 kamil  staff   128B Aug  5 12:12 src/
-rw-r--r--  1 kamil  staff    53B Aug  5 12:12 test-setup.ts
-rw-r--r--  1 kamil  staff   378B Aug  5 12:12 tsconfig.app.json
-rw-r--r--  1 kamil  staff   437B Aug  5 12:12 tsconfig.json
-rw-r--r--  1 kamil  staff   413B Aug  5 12:12 tsconfig.spec.json
```

How can you add more apps to monorepo, which frameworks are available at the time, and advantages of keeping them together