Built-in app types in NX

[00:00 - 00:12] In this lesson we're going to check out what other framers are supported by NX by default. 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.

[00:13 - 00:41] It is very simple and you will notice a very simple role how to install any supported by NX framework in your Monorepo. So our work today will start by creating a new Mon orepo. Between the lessons, NX released a new NX version, so I want to show you the difference when you create a new Monorepo. I will skip parts that we went through at least three times before, so let's start by executing NPX create NX workspace with yarn.

[00:42 - 01:58] And the first noticeable difference is NX cloud many choices. So you can choose to use NX cloud, you can skip as previously, but you can choose one of the additional options, so you can get additional configurations for a configuration for GitHub actions and for Circle CI, so you don't need to configure it by yourself. I'm going to choose NX cloud but without any additional GitHub actions or CircleCI integration. Let's start with React, so we are going to add a new React application to our Monorepo. To do this, first of all, you need to install necessary dependencies. So yarn add -d add NX/react. And after a few seconds, you will have everything installed. Similar to Angular, all you need to do to add a new React application to your Monorepo is to 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 example.

[01:59 - 02:31] And again, similar to Angular, you have some kind of interactive wizard to get you through the installation process. So first of all, you have to choose style sheet format. You have all probably the most popular choices here. You can use plain CSS, SAS, LAS, and of course, styled components and others. I'm going to choose styled components because why not? You can choose if you're going to use React router or not. Let's say that we are going to use it.

[02:32 - 04:18] And in the next step, you can choose it to eat as runner. For these lessons, I 'm not going to generate any additional it to eat solutions here. So I'm going to choose none. You can choose one of three bumplers. You can choose VIT, Webpack, and AirSpack. I really like VIT , so I'm going to choose it. And again, after some time, it will be installed and ready to be used. So let's wait a while. So as you can see, everything is installed, and we can access our new application. So let's change the directory to apps, react app example here. And let's list all the files. So L, S, Minos, L, A. And as you can see, similar to Angular, we have everything configured for us. So we have as linked RC, we have TypeScript, we have our VIT config. And we don't need to do anything. We can just continue creating our new awesome application. Now let's add React Native application to our mono repo. So we can keep your mobile applications inside the same directory, inside the same repository as you have your web applications. So again, we need to add additional dependencies that are necessary for a React Native. So yarn add nx react slash native. And the rule here is simple, you need to generate a new application. So yarn, nx generate nx react native app apps, react native app example as in my name. Do you want to run pod install for native modules?

[04:19 - 05:06] Let's say I don't want to do this right now. And I can choose one of two bund lers, you can choose VIT and webpack. Again, I like BIT. So why not? After some time, everything is again generated. So we can access our apps. And here we have our react native app example. So react native app example. And let's check what what is inside. So as you can see, again, everything was installed and configured by for you. So we have Metro, you have Aslean, Babel, you have everything that is necessary for Android and iOS. And you don't need to care about configuring it by yourself.

[05:07 - 05:42] The other not so popular framework supported by an X by default is Expo. And as you probably 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 yarn and X generate nx Expo app. And the name will be apps slash Expo app.

[05:43 - 06:06] Example, I don't want to waste your time watching me installing other few frameworks and showing what is inside and so on. Everything you may possibly need is in the script to this lesson. So I did all the work for you. And if you're curious what is inside, for example, Express JS application or in sjs application, you can check it inside the script.

[06:07 - 06:31] I want you to remember that the most popular choices are react, react native express JS, 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 that is almost always named as nx slash name of your framework and then generate a new application.