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.

To create a new React application, add the 

 package to your dependencies. Then, you can execute the command to generate a new React application.

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 application generated by NX comes with the following:

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

, which contains the necessary dependencies for React Native projects.

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

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).

> 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

---
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/building-angular-applications-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/building-angular-applications-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
```

galczo5

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

Built-in app types in NX

In this lesson we're going to check out what other framers are supported by NX

The main goal here is to give you the full overview of NX features,

what you can do by default, what you need to install, and how it works.

It is very simple and you will notice a very simple role how to install any

framework in your Monorepo. So our work today will start by creating a new Mon

Between the lessons, NX released a new NX version, so I want to show you the

when you create a new Monorepo. I will skip parts that we went through at least

so let's start by executing NPX create NX workspace with yarn.

And the first noticeable difference is NX cloud many choices. So you can choose

you can skip as previously, but you can choose one of the additional options,

additional configurations for a configuration for GitHub actions and for Circle

need to configure it by yourself. I'm going to choose NX cloud but without any

GitHub actions or CircleCI integration. Let's start with React, so we are going

React application to our Monorepo. To do this, first of all, you need to

dependencies. So yarn add -d add NX/react. And after a few seconds, you will

Similar to Angular, all you need to do to add a new React application to your

execute command NX generate and so on. So yarn NX generate add NX/react

app and you have to add application name. So I'm going to use apps/react app

And again, similar to Angular, you have some kind of interactive wizard to get

the installation process. So first of all, you have to choose style sheet

probably the most popular choices here. You can use plain CSS, SAS, LAS, and of

styled components and others. I'm going to choose styled components because why

You can choose if you're going to use React router or not. Let's say that we

And in the next step, you can choose it to eat as runner. For these lessons, I

generate any additional it to eat solutions here. So I'm going to choose none.

of three bumplers. You can choose VIT, Webpack, and AirSpack. I really like VIT

choose it. And again, after some time, it will be installed and ready to be

while. So as you can see, everything is installed, and we can access our new

change the directory to apps, react app example here. And let's list all the

L, A. And as you can see, similar to Angular, we have everything configured for

as linked RC, we have TypeScript, we have our VIT config. And we don't need to

can just continue creating our new awesome application. Now let's add React

mono repo. So we can keep your mobile applications inside the same directory,

as you have your web applications. So again, we need to add additional

necessary for a React Native. So yarn add nx react slash native. And the rule

you need to generate a new application. So yarn, nx generate nx react native

react native app example as in my name. Do you want to run pod install for

Let's say I don't want to do this right now. And I can choose one of two bund

VIT and webpack. Again, I like BIT. So why not? After some time, everything is

So we can access our apps. And here we have our react native app example. So

example. And let's check what what is inside. So as you can see, again,

and configured by for you. So we have Metro, you have Aslean, Babel, you have

necessary for Android and iOS. And you don't need to care about configuring it

The other not so popular framework supported by an X by default is Expo. And as

know right now, all we need to do is to execute yarn add nx slash expo.

And if you want to generate a new X publication, you have to generate it so

nx Expo app. And the name will be apps slash Expo app.

Example, I don't want to waste your time watching me installing other few

what is inside and so on. Everything you may possibly need is in the script to

So I did all the work for you. And if you're curious what is inside, for

Express JS application or in sjs application, you can check it inside the

I want you to remember that the most popular choices are react, react native

nest JS, node JS, and web components are supported by an X by default.

And the installation process is always the same. So add additional dependency

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