Use Nx to power up ⚡🐋 full-stack JavaScript projects with modern tooling, automation, and sophisticated code-sharing for monorepos https://nx.dev/

Nx is an open-source project from Nrwl  🦄🌊 https://nrwl.io

Watch more free videos at https://fireship.io

#nrwl #nx #javascript
2024-02-04T06:43:31.764Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
abb3d6e3-8f0e-47d3-bee8-e1cf9ac6ae75
99b6c1b4f268b1cf5bfcdad449685072b122d26db0d89f33f40f503bd4d43a69
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
One of the biggest challenges of building a full stack web application is managing complexity.
If you're building a serious product, you likely have multiple front end applications that communicate with the back end and share interfaces with multiple team members that need to collaborate efficiently.
Today, we're going to look at NX from Narwhal, a a tool that can dramatically simplify the way you organize, test, and share code between multiple JavaScript applications.
If you're new to the channel, like and subscribe, and and you can find the full tutorial on nx.dev.
The tool itself is based on the best practices developed at Google to scale thousands of applications across app as thousands of developers in a single mono repo.
But you don't need to be operating at Google scale to see the benefits of NX.
It can be a very powerful tool for projects of all sizes, and and not just Angular, but full stack JavaScript in general.
So why do big companies like Google, Microsoft, and Facebook like to manage their code in mono repos?
App, or in other words, use a single Git repository to manage multiple apps and libraries.
The simple answer is that this approach helps manage complexity by applying best practices organization wide.
App.
This delivers consistency and predictability in your code while also maximizing the ability to share code between projects.
But you can't just put all of out your code in a single repo and expect to reap the benefits.
You need the right tooling in place to test, build, and deploy your apps at scale, and that's where n x comes in.
Over the next 10 minutes, we'll look at how complexity can grow very quickly in a full stack project.
We'll build 2 front end applications, 1 with Angular and 1 with React, and then a shared back end with Nest.
On top of that, we'll add multiple shared libraries that can be used by all three of these apps.
Let's go ahead and create a new NX workspace to see how it can help us manage a project like this.
App.
From the command line, run npx create n x workspace followed by your organization or product name.
This will give us an empty workspace, and will be writing most of our code in the apps and libs directories.
Right out of the gate, n x is going to help you separate your shared code from your application code.
App.
For example, you might have 2 front end applications, one for your customers and one for your employees.
Those apps would live in the apps directory, but they might share common UI elements that would go in the libs directory.
Apptery.
So this works really well when you have a design system where you share common UI elements across multiple apps, but you might also have a back end app that gets deployed to a node server.
App.
And if you're using TypeScript, you'll likely want to share interfaces between your front end and back end code without having to duplicate and regenerate that code.
App.
Those interfaces can also live in the libs directory and be used reliably throughout a large application.
Let's go ahead and imagine that we're building a product for a travel company.
App.
We have a team of Angular engineers who are assigned to building the front end customer facing app.
We can opt into specific tooling for different frameworks like Angular, React, and Nest JS, so so we'll go ahead and do that for Angular first.
Our team of engineers want to use modern test tools like Cypress and Jest.
NX gives you the option to just set those things up automatically without any configuration on in your part.
Now that our workspace is configured for Angular, Jest, and Cypress, we'll go ahead and generate a new app.
That will create a new Angular app just like it with the Angular CLI, but tailored specific to this workspace.
You can find the app in the app's directory along with a folder for end to end testing configured with Cypress.
App.
Now up until this point, we've just been using the terminal to run these commands, but there's actually a better way to do this.
If you're using NX, I highly recommend that you install the Angular console Versus Code plug in.
App.
The plugin allows you to easily navigate all the commands that you have at your disposal through NX.
You don't need to memorize any commands or search through the docs.
It's just all right here in your IDE.
App, and this really helps manage complexity because you might have dozens of apps and libraries in a single monorepo.
For example, if we only want to run the end to end test apps in our current booking app.
We can do that by selecting the options we want and then clicking a button.
And that will give us Cypress running end to end tests for this specific app.
App.
And from the same screen, we can also run our component unit test, which were set up with Jest.
And another cool feature of the console is that it will save your commands and memory, so you can rerun them with the same options by simply clicking a button without having to think about it.
Now having this modern tooling is really nice, but the most powerful benefits of NX start to kick in as your app grows in complexity.
At this point, we just have a single customer facing Angular app, but let's imagine we have a separate team of developers who are working on an internal admin app for managing customer out teams, but this development team prefers to use React.
Now like I mentioned earlier, you can use NX with any JavaScript project, but it also includes first class support for React.
App.
We first need to opt in to the React tooling by running n g add narwhal react.
And if we go back to the console, we'll now have access to schematics specifically for generating React applications and components.
We'll go ahead and generate our admin React app just using the built in defaults.
And now we have a second application in the app's directory along with its own end to end test suite.
Now at this point, we have a monorepo with 2 individual applications in app.
But one of the common misconceptions that you may have heard is that putting all of your code into a single monorepo will slow down your testing and deployment pipelines.
App.
In a large project, you only want to rebuild and test the portions of the app that have been affected by change.
That might be an individual application, or it might mapping multiple applications that have been affected by a change to one of their shared dependencies.
NX can detect where code changes will impact the monorepo, allowing you to efficiently work with change in isolation at any scale.
If we look at the git master branch, you can see we have a clean working directory with no changes.
App.
Then if we go to the Angular console under dependency diagram, we can see both of our apps here, which are currently grayed out because there are no changes.
But if we go and make a change to our React app, it will be automatically highlighted in red.
And because NX knows which apps are affected by change in the current branch, we can test and build those in isolation.
App.
And this is what Narwhal means when they talk about developing like Google.
Because a company like Google might have thousands of apps under a single monorepo, and the only way to operate them at at scale is to understand what apps are affected by change.
If you look at the commands under the Angular console, you'll see a bunch of them that are prefixed by affected.
App.
These commands allow teams to work simultaneously on several apps or libraries and be able to build and test them in isolation without having to worry about everything else that's going on in the monorepo.
This This is especially important when you start talking about code that might affect multiple apps.
We can demonstrate that by generating a library with NX that will be used by both the Angular and React apps.
App.
We'll go ahead and call this our utilities library and because I use the default schematic, it's just going to generate a vanilla TypeScript project, app, but you can generate framework specific libraries as well.
Now another feature I wanna point out before we go any further is that you have the option to add tags to your libraries.
App.
This part is completely optional, but tags allow you to control which types of apps can take this library as a dependency.
For example, you might have a front end shared library that touches the DOM that you wouldn't want to be used by a node project.
So if a back end developer tries to use this library as a dependency, they will get a linting error that will tell them it's a bad idea.
App.
Now if you've ever created a shareable library, you know that there's a lot of steps involved.
You need to set up your TypeScript config, your build scripts, and all of your testing utilities.
App, but as you're about to see, NX makes this entire process completely trivial.
At this point, we'll go into the source code for our utilities library and I'll export a variable called unicorn rocket that contains some emoji characters because our design team said we need to show these characters on every single home page of every app throughout the entire company.
App.
Now the awesome thing about NX is that it makes code sharing dead simple.
At the beginning of this video, we set up this workspace with an organization name, app, and we can now import all of our shared code from that namespace starting with the at symbol.
All the configuration is done for us, so all we need to do is import the code that we wanna use.
We'll start by doing that in our Angular app, and then we'll switch over to React and do the same thing there.
So now we have 2 front end JavaScript apps sharing a common set of utilities.
App.
Now the really amazing thing is that NX will keep track of all the apps that depend on the shared library.
Let's just imagine that our design team comes to us and says that we need to add an additional emoji to the app stream.
If we make that change on a clean git branch and then go back to the dependency diagram, we can see exactly which apps are affected by the change.
App.
So even though we didn't actually change anything on the main front end applications, they'll still be highlighted in red because they depend on that utilities library, which did change.
App, and it's also worth pointing out that there's an additional command provided by n x that will help you visualize the entire dependency graph with the affected libraries being outlined in red.
Now Now at this point, we've only been talking about front end code, but n x can also handle server side node projects with first class support for Nest and Express.
App.
In this demo, we'll use Nest.
And the first thing we'll do is opt in to the schematics.
And then we'll go into the Angular console and find the command to generate a new Nest application.
App.
We'll give the back end a name of API, and its responsibility is to fetch items from the database related to customer bookings.
This adds another app to the app's app directory, but this time without end to end testing because it's a back end project.
Now one of the most common things to share between your front end and back end code are your TypeScript interfaces.
App, and Nest will want to read and write data in a back end database and make sure that that data has a specific shape with a TypeScript interface.
But we'll also very likely on IntelliSense when we read that data and use it in our front end applications.
What I'm doing now is creating another NX library, and then I'm going to add a TypeScript interface to it called reservation.
App.
By putting this code in a shared library, we can now use it in any one of our front end or back end apps.
And on top of that, we can leverage the dependency graph to figure out exactly which apps depend on this data type.
App.
So if this interface ever changes, then you know exactly which apps to test, to build, and ultimately deploy to your production server.
App So there's a lot of obvious benefits to a tool like NX.
Things like modern testing tools like Cypress and Jest, a dependency graph that will help you scale a monorepo to an infinitely large team, app, as well as task runners and cogenerators to keep your project organized.
And the end result is a set of tools that will help you develop like Google, giving your organization, a predictable way to collaborate and automate complex web applications at scale.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe, and make sure to check out the full tutorial on nx.dev.
Thanks for watching, and I will talk to you soon.
App.

Speaker 0: One of the biggest challenges of building a full stack web application is managing complexity. If you're building a serious product, you likely have multiple front end applications that communicate with the back end and share interfaces with multiple team members that need to collaborate efficiently. Today, we're going to look at NX from Narwhal, a a tool that can dramatically simplify the way you organize, test, and share code between multiple JavaScript applications. If you're new to the channel, like and subscribe, and and you can find the full tutorial on nx.dev. The tool itself is based on the best practices developed at Google to scale thousands of applications across app as thousands of developers in a single mono repo.

But you don't need to be operating at Google scale to see the benefits of NX. It can be a very powerful tool for projects of all sizes, and and not just Angular, but full stack JavaScript in general. So why do big companies like Google, Microsoft, and Facebook like to manage their code in mono repos? App, or in other words, use a single Git repository to manage multiple apps and libraries. The simple answer is that this approach helps manage complexity by applying best practices organization wide.

App. This delivers consistency and predictability in your code while also maximizing the ability to share code between projects. But you can't just put all of out your code in a single repo and expect to reap the benefits. You need the right tooling in place to test, build, and deploy your apps at scale, and that's where n x comes in. Over the next 10 minutes, we'll look at how complexity can grow very quickly in a full stack project.

We'll build 2 front end applications, 1 with Angular and 1 with React, and then a shared back end with Nest. On top of that, we'll add multiple shared libraries that can be used by all three of these apps. Let's go ahead and create a new NX workspace to see how it can help us manage a project like this. App. From the command line, run npx create n x workspace followed by your organization or product name.

This will give us an empty workspace, and will be writing most of our code in the apps and libs directories. Right out of the gate, n x is going to help you separate your shared code from your application code. App. For example, you might have 2 front end applications, one for your customers and one for your employees. Those apps would live in the apps directory, but they might share common UI elements that would go in the libs directory.

Apptery. So this works really well when you have a design system where you share common UI elements across multiple apps, but you might also have a back end app that gets deployed to a node server. App. And if you're using TypeScript, you'll likely want to share interfaces between your front end and back end code without having to duplicate and regenerate that code. App.

Those interfaces can also live in the libs directory and be used reliably throughout a large application. Let's go ahead and imagine that we're building a product for a travel company. App. We have a team of Angular engineers who are assigned to building the front end customer facing app. We can opt into specific tooling for different frameworks like Angular, React, and Nest JS, so so we'll go ahead and do that for Angular first.

Our team of engineers want to use modern test tools like Cypress and Jest. NX gives you the option to just set those things up automatically without any configuration on in your part. Now that our workspace is configured for Angular, Jest, and Cypress, we'll go ahead and generate a new app. That will create a new Angular app just like it with the Angular CLI, but tailored specific to this workspace. You can find the app in the app's directory along with a folder for end to end testing configured with Cypress.

App. Now up until this point, we've just been using the terminal to run these commands, but there's actually a better way to do this. If you're using NX, I highly recommend that you install the Angular console Versus Code plug in. App. The plugin allows you to easily navigate all the commands that you have at your disposal through NX.

You don't need to memorize any commands or search through the docs. It's just all right here in your IDE. App, and this really helps manage complexity because you might have dozens of apps and libraries in a single monorepo. For example, if we only want to run the end to end test apps in our current booking app. We can do that by selecting the options we want and then clicking a button.

And that will give us Cypress running end to end tests for this specific app. App. And from the same screen, we can also run our component unit test, which were set up with Jest. And another cool feature of the console is that it will save your commands and memory, so you can rerun them with the same options by simply clicking a button without having to think about it. Now having this modern tooling is really nice, but the most powerful benefits of NX start to kick in as your app grows in complexity.

At this point, we just have a single customer facing Angular app, but let's imagine we have a separate team of developers who are working on an internal admin app for managing customer out teams, but this development team prefers to use React. Now like I mentioned earlier, you can use NX with any JavaScript project, but it also includes first class support for React. App. We first need to opt in to the React tooling by running n g add narwhal react. And if we go back to the console, we'll now have access to schematics specifically for generating React applications and components.

We'll go ahead and generate our admin React app just using the built in defaults. And now we have a second application in the app's directory along with its own end to end test suite. Now at this point, we have a monorepo with 2 individual applications in app. But one of the common misconceptions that you may have heard is that putting all of your code into a single monorepo will slow down your testing and deployment pipelines. App.

In a large project, you only want to rebuild and test the portions of the app that have been affected by change. That might be an individual application, or it might mapping multiple applications that have been affected by a change to one of their shared dependencies. NX can detect where code changes will impact the monorepo, allowing you to efficiently work with change in isolation at any scale. If we look at the git master branch, you can see we have a clean working directory with no changes. App.

Then if we go to the Angular console under dependency diagram, we can see both of our apps here, which are currently grayed out because there are no changes. But if we go and make a change to our React app, it will be automatically highlighted in red. And because NX knows which apps are affected by change in the current branch, we can test and build those in isolation. App. And this is what Narwhal means when they talk about developing like Google.

Because a company like Google might have thousands of apps under a single monorepo, and the only way to operate them at at scale is to understand what apps are affected by change. If you look at the commands under the Angular console, you'll see a bunch of them that are prefixed by affected. App. These commands allow teams to work simultaneously on several apps or libraries and be able to build and test them in isolation without having to worry about everything else that's going on in the monorepo. This This is especially important when you start talking about code that might affect multiple apps.

We can demonstrate that by generating a library with NX that will be used by both the Angular and React apps. App. We'll go ahead and call this our utilities library and because I use the default schematic, it's just going to generate a vanilla TypeScript project, app, but you can generate framework specific libraries as well. Now another feature I wanna point out before we go any further is that you have the option to add tags to your libraries. App.

This part is completely optional, but tags allow you to control which types of apps can take this library as a dependency. For example, you might have a front end shared library that touches the DOM that you wouldn't want to be used by a node project. So if a back end developer tries to use this library as a dependency, they will get a linting error that will tell them it's a bad idea. App. Now if you've ever created a shareable library, you know that there's a lot of steps involved.

You need to set up your TypeScript config, your build scripts, and all of your testing utilities. App, but as you're about to see, NX makes this entire process completely trivial. At this point, we'll go into the source code for our utilities library and I'll export a variable called unicorn rocket that contains some emoji characters because our design team said we need to show these characters on every single home page of every app throughout the entire company. App. Now the awesome thing about NX is that it makes code sharing dead simple.

At the beginning of this video, we set up this workspace with an organization name, app, and we can now import all of our shared code from that namespace starting with the at symbol. All the configuration is done for us, so all we need to do is import the code that we wanna use. We'll start by doing that in our Angular app, and then we'll switch over to React and do the same thing there. So now we have 2 front end JavaScript apps sharing a common set of utilities. App.

Now the really amazing thing is that NX will keep track of all the apps that depend on the shared library. Let's just imagine that our design team comes to us and says that we need to add an additional emoji to the app stream. If we make that change on a clean git branch and then go back to the dependency diagram, we can see exactly which apps are affected by the change. App. So even though we didn't actually change anything on the main front end applications, they'll still be highlighted in red because they depend on that utilities library, which did change.

App, and it's also worth pointing out that there's an additional command provided by n x that will help you visualize the entire dependency graph with the affected libraries being outlined in red. Now Now at this point, we've only been talking about front end code, but n x can also handle server side node projects with first class support for Nest and Express. App. In this demo, we'll use Nest. And the first thing we'll do is opt in to the schematics.

And then we'll go into the Angular console and find the command to generate a new Nest application. App. We'll give the back end a name of API, and its responsibility is to fetch items from the database related to customer bookings. This adds another app to the app's app directory, but this time without end to end testing because it's a back end project. Now one of the most common things to share between your front end and back end code are your TypeScript interfaces.

App, and Nest will want to read and write data in a back end database and make sure that that data has a specific shape with a TypeScript interface. But we'll also very likely on IntelliSense when we read that data and use it in our front end applications. What I'm doing now is creating another NX library, and then I'm going to add a TypeScript interface to it called reservation. App. By putting this code in a shared library, we can now use it in any one of our front end or back end apps.

And on top of that, we can leverage the dependency graph to figure out exactly which apps depend on this data type. App. So if this interface ever changes, then you know exactly which apps to test, to build, and ultimately deploy to your production server. App So there's a lot of obvious benefits to a tool like NX. Things like modern testing tools like Cypress and Jest, a dependency graph that will help you scale a monorepo to an infinitely large team, app, as well as task runners and cogenerators to keep your project organized.

And the end result is a set of tools that will help you develop like Google, giving your organization, a predictable way to collaborate and automate complex web applications at scale. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to check out the full tutorial on nx.dev. Thanks for watching, and I will talk to you soon. App.
One of the biggest challenges of building a full stack web application is managing complexity. If you're building a serious product, you likely have multiple front end applications that communicate with the back end and share interfaces with multiple team members that need to collaborate efficiently. Today, we're going to look at NX from Narwhal, a a tool that can dramatically simplify the way you organize, test, and share code between multiple JavaScript applications. If you're new to the channel, like and subscribe, and and you can find the full tutorial on nx.dev. The tool itself is based on the best practices developed at Google to scale thousands of applications across app as thousands of developers in a single mono repo. But you don't need to be operating at Google scale to see the benefits of NX. It can be a very powerful tool for projects of all sizes, and and not just Angular, but full stack JavaScript in general. So why do big companies like Google, Microsoft, and Facebook like to manage their code in mono repos?
networking
software
programming
architecture
google
App, or in other words, use a single Git repository to manage multiple apps and libraries.
The simple answer is that this approach helps manage complexity by applying best practices organization wide. App. This delivers consistency and predictability in your code while also maximizing the ability to share code between projects. But you can't just put all of out your code in a single repo and expect to reap the benefits. You need the right tooling in place to test, build, and deploy your apps at scale, and that's where n x comes in. Over the next 10 minutes, we'll look at how complexity can grow very quickly in a full stack project. We'll build 2 front end applications, 1 with Angular and 1 with React, and then a shared back end with Nest. On top of that, we'll add multiple shared libraries that can be used by all three of these apps.
software development
software
programming
Let's go ahead and create a new NX workspace to see how it can help us manage a project like this. App. From the command line, run npx create n x workspace followed by your organization or product name. This will give us an empty workspace, and will be writing most of our code in the apps and libs directories.
Right out of the gate, n x is going to help you separate your shared code from your application code. App. For example, you might have 2 front end applications, one for your customers and one for your employees. Those apps would live in the apps directory, but they might share common UI elements that would go in the libs directory.
software
Apptery. So this works really well when you have a design system where you share common UI elements across multiple apps, but you might also have a back end app that gets deployed to a node server.
App. And if you're using TypeScript, you'll likely want to share interfaces between your front end and back end code without having to duplicate and regenerate that code. App. Those interfaces can also live in the libs directory and be used reliably throughout a large application. Let's go ahead and imagine that we're building a product for a travel company. App. We have a team of Angular engineers who are assigned to building the front end customer facing app. We can opt into specific tooling for different frameworks like Angular, React, and Nest JS, so so we'll go ahead and do that for Angular first. Our team of engineers want to use modern test tools like Cypress and Jest. NX gives you the option to just set those things up automatically without any configuration on in your part. Now that our workspace is configured for Angular, Jest, and Cypress, we'll go ahead and generate a new app.
software development
software
architecture
engineering
That will create a new Angular app just like it with the Angular CLI, but tailored specific to this workspace. You can find the app in the app's directory along with a folder for end to end testing configured with Cypress. App. Now up until this point, we've just been using the terminal to run these commands, but there's actually a better way to do this. If you're using NX, I highly recommend that you install the Angular console Versus Code plug in. App. The plugin allows you to easily navigate all the commands that you have at your disposal through NX.
You don't need to memorize any commands or search through the docs. It's just all right here in your IDE. App, and this really helps manage complexity because you might have dozens of apps and libraries in a single monorepo. For example, if we only want to run the end to end test apps in our current booking app.
software
We can do that by selecting the options we want and then clicking a button. And that will give us Cypress running end to end tests for this specific app. App. And from the same screen, we can also run our component unit test, which were set up with Jest.
And another cool feature of the console is that it will save your commands and memory, so you can rerun them with the same options by simply clicking a button without having to think about it. Now having this modern tooling is really nice, but the most powerful benefits of NX start to kick in as your app grows in complexity. At this point, we just have a single customer facing Angular app, but let's imagine we have a separate team of developers who are working on an internal admin app for managing customer out teams, but this development team prefers to use React. Now like I mentioned earlier, you can use NX with any JavaScript project, but it also includes first class support for React.
software development
software
technology
customer support
computer science
App. We first need to opt in to the React tooling by running n g add narwhal react.
And if we go back to the console, we'll now have access to schematics specifically for generating React applications and components. We'll go ahead and generate our admin React app just using the built in defaults. And now we have a second application in the app's directory along with its own end to end test suite.
software development
software
Now at this point, we have a monorepo with 2 individual applications in app. But one of the common misconceptions that you may have heard is that putting all of your code into a single monorepo will slow down your testing and deployment pipelines.
App. In a large project, you only want to rebuild and test the portions of the app that have been affected by change. That might be an individual application, or it might mapping multiple applications that have been affected by a change to one of their shared dependencies. NX can detect where code changes will impact the monorepo, allowing you to efficiently work with change in isolation at any scale.
software
software development
If we look at the git master branch, you can see we have a clean working directory with no changes. App. Then if we go to the Angular console under dependency diagram, we can see both of our apps here, which are currently grayed out because there are no changes. But if we go and make a change to our React app, it will be automatically highlighted in red. And because NX knows which apps are affected by change in the current branch, we can test and build those in isolation.
App. And this is what Narwhal means when they talk about developing like Google. Because a company like Google might have thousands of apps under a single monorepo, and the only way to operate them at at scale is to understand what apps are affected by change. If you look at the commands under the Angular console, you'll see a bunch of them that are prefixed by affected.
google
App. These commands allow teams to work simultaneously on several apps or libraries and be able to build and test them in isolation without having to worry about everything else that's going on in the monorepo.
This This is especially important when you start talking about code that might affect multiple apps. We can demonstrate that by generating a library with NX that will be used by both the Angular and React apps. App. We'll go ahead and call this our utilities library and because I use the default schematic, it's just going to generate a vanilla TypeScript project, app, but you can generate framework specific libraries as well. Now another feature I wanna point out before we go any further is that you have the option to add tags to your libraries.
software development
software
programming
App. This part is completely optional, but tags allow you to control which types of apps can take this library as a dependency. For example, you might have a front end shared library that touches the DOM that you wouldn't want to be used by a node project.
So if a back end developer tries to use this library as a dependency, they will get a linting error that will tell them it's a bad idea. App. Now if you've ever created a shareable library, you know that there's a lot of steps involved. You need to set up your TypeScript config, your build scripts, and all of your testing utilities. App, but as you're about to see, NX makes this entire process completely trivial. At this point, we'll go into the source code for our utilities library and I'll export a variable called unicorn rocket that contains some emoji characters because our design team said we need to show these characters on every single home page of every app throughout the entire company. App. Now the awesome thing about NX is that it makes code sharing dead simple. At the beginning of this video, we set up this workspace with an organization name, app, and we can now import all of our shared code from that namespace starting with the at symbol. All the configuration is done for us, so all we need to do is import the code that we wanna use. We'll start by doing that in our Angular app, and then we'll switch over to React and do the same thing there. So now we have 2 front end JavaScript apps sharing a common set of utilities. App. Now the really amazing thing is that NX will keep track of all the apps that depend on the shared library. Let's just imagine that our design team comes to us and says that we need to add an additional emoji to the app stream. If we make that change on a clean git branch and then go back to the dependency diagram, we can see exactly which apps are affected by the change. App. So even though we didn't actually change anything on the main front end applications, they'll still be highlighted in red because they depend on that utilities library, which did change. App, and it's also worth pointing out that there's an additional command provided by n x that will help you visualize the entire dependency graph with the affected libraries being outlined in red. Now Now at this point, we've only been talking about front end code, but n x can also handle server side node projects with first class support for Nest and Express. App. In this demo, we'll use Nest. And the first thing we'll do is opt in to the schematics. And then we'll go into the Angular console and find the command to generate a new Nest application. App. We'll give the back end a name of API, and its responsibility is to fetch items from the database related to customer bookings.
software
software development
graphic design
programming
databases
This adds another app to the app's app directory, but this time without end to end testing because it's a back end project. Now one of the most common things to share between your front end and back end code are your TypeScript interfaces. App, and Nest will want to read and write data in a back end database and make sure that that data has a specific shape with a TypeScript interface.
But we'll also very likely on IntelliSense when we read that data and use it in our front end applications. What I'm doing now is creating another NX library, and then I'm going to add a TypeScript interface to it called reservation. App. By putting this code in a shared library, we can now use it in any one of our front end or back end apps. And on top of that, we can leverage the dependency graph to figure out exactly which apps depend on this data type. App. So if this interface ever changes, then you know exactly which apps to test, to build, and ultimately deploy to your production server. App So there's a lot of obvious benefits to a tool like NX. Things like modern testing tools like Cypress and Jest, a dependency graph that will help you scale a monorepo to an infinitely large team, app, as well as task runners and cogenerators to keep your project organized. And the end result is a set of tools that will help you develop like Google, giving your organization, a predictable way to collaborate and automate complex web applications at scale. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to check out the full tutorial on nx.dev. Thanks for watching, and I will talk to you soon. App.
software
software development
streaming
youtube
architecture
infrastructure
computer science
television
netflix
programming
machine learning
technology
video gaming
One of the biggest challenges of building a full stack web application is managing complexity. If you're building a serious product, you likely have multiple front end applications that communicate with the back end and share interfaces with multiple team members that need to collaborate efficiently. Today, we're going to look at NX from Narwhal, a a tool that can dramatically simplify the way you organize, test, and share code between multiple JavaScript applications. If you're new to the channel, like and subscribe, and and you can find the full tutorial on nx.dev. The tool itself is based on the best practices developed at Google to scale thousands of applications across app as thousands of developers in a single mono repo. But you don't need to be operating at Google scale to see the benefits of NX. It can be a very powerful tool for projects of all sizes, and and not just Angular, but full stack JavaScript in general. So why do big companies like Google, Microsoft, and Facebook like to manage their code in mono repos? App, or in other words, use a single Git repository to manage multiple apps and libraries. The simple answer is that this approach helps manage complexity by applying best practices organization wide. App. This delivers consistency and predictability in your code while also maximizing the ability to share code between projects. But you can't just put all of out your code in a single repo and expect to reap the benefits. You need the right tooling in place to test, build, and deploy your apps at scale, and that's where n x comes in. Over the next 10 minutes, we'll look at how complexity can grow very quickly in a full stack project. We'll build 2 front end applications, 1 with Angular and 1 with React, and then a shared back end with Nest. On top of that, we'll add multiple shared libraries that can be used by all three of these apps. Let's go ahead and create a new NX workspace to see how it can help us manage a project like this. App. From the command line, run npx create n x workspace followed by your organization or product name. This will give us an empty workspace, and will be writing most of our code in the apps and libs directories. Right out of the gate, n x is going to help you separate your shared code from your application code. App. For example, you might have 2 front end applications, one for your customers and one for your employees. Those apps would live in the apps directory, but they might share common UI elements that would go in the libs directory. Apptery. So this works really well when you have a design system where you share common UI elements across multiple apps, but you might also have a back end app that gets deployed to a node server. App. And if you're using TypeScript, you'll likely want to share interfaces between your front end and back end code without having to duplicate and regenerate that code. App. Those interfaces can also live in the libs directory and be used reliably throughout a large application. Let's go ahead and imagine that we're building a product for a travel company. App. We have a team of Angular engineers who are assigned to building the front end customer facing app. We can opt into specific tooling for different frameworks like Angular, React, and Nest JS, so so we'll go ahead and do that for Angular first. Our team of engineers want to use modern test tools like Cypress and Jest. NX gives you the option to just set those things up automatically without any configuration on in your part. Now that our workspace is configured for Angular, Jest, and Cypress, we'll go ahead and generate a new app. That will create a new Angular app just like it with the Angular CLI, but tailored specific to this workspace. You can find the app in the app's directory along with a folder for end to end testing configured with Cypress. App. Now up until this point, we've just been using the terminal to run these commands, but there's actually a better way to do this. If you're using NX, I highly recommend that you install the Angular console Versus Code plug in. App. The plugin allows you to easily navigate all the commands that you have at your disposal through NX. You don't need to memorize any commands or search through the docs. It's just all right here in your IDE. App, and this really helps manage complexity because you might have dozens of apps and libraries in a single monorepo. For example, if we only want to run the end to end test apps in our current booking app. We can do that by selecting the options we want and then clicking a button. And that will give us Cypress running end to end tests for this specific app. App. And from the same screen, we can also run our component unit test, which were set up with Jest. And another cool feature of the console is that it will save your commands and memory, so you can rerun them with the same options by simply clicking a button without having to think about it. Now having this modern tooling is really nice, but the most powerful benefits of NX start to kick in as your app grows in complexity. At this point, we just have a single customer facing Angular app, but let's imagine we have a separate team of developers who are working on an internal admin app for managing customer out teams, but this development team prefers to use React. Now like I mentioned earlier, you can use NX with any JavaScript project, but it also includes first class support for React. App. We first need to opt in to the React tooling by running n g add narwhal react. And if we go back to the console, we'll now have access to schematics specifically for generating React applications and components. We'll go ahead and generate our admin React app just using the built in defaults. And now we have a second application in the app's directory along with its own end to end test suite. Now at this point, we have a monorepo with 2 individual applications in app. But one of the common misconceptions that you may have heard is that putting all of your code into a single monorepo will slow down your testing and deployment pipelines. App. In a large project, you only want to rebuild and test the portions of the app that have been affected by change. That might be an individual application, or it might mapping multiple applications that have been affected by a change to one of their shared dependencies. NX can detect where code changes will impact the monorepo, allowing you to efficiently work with change in isolation at any scale. If we look at the git master branch, you can see we have a clean working directory with no changes. App. Then if we go to the Angular console under dependency diagram, we can see both of our apps here, which are currently grayed out because there are no changes. But if we go and make a change to our React app, it will be automatically highlighted in red. And because NX knows which apps are affected by change in the current branch, we can test and build those in isolation. App. And this is what Narwhal means when they talk about developing like Google. Because a company like Google might have thousands of apps under a single monorepo, and the only way to operate them at at scale is to understand what apps are affected by change. If you look at the commands under the Angular console, you'll see a bunch of them that are prefixed by affected. App. These commands allow teams to work simultaneously on several apps or libraries and be able to build and test them in isolation without having to worry about everything else that's going on in the monorepo. This This is especially important when you start talking about code that might affect multiple apps. We can demonstrate that by generating a library with NX that will be used by both the Angular and React apps. App. We'll go ahead and call this our utilities library and because I use the default schematic, it's just going to generate a vanilla TypeScript project, app, but you can generate framework specific libraries as well. Now another feature I wanna point out before we go any further is that you have the option to add tags to your libraries. App. This part is completely optional, but tags allow you to control which types of apps can take this library as a dependency. For example, you might have a front end shared library that touches the DOM that you wouldn't want to be used by a node project. So if a back end developer tries to use this library as a dependency, they will get a linting error that will tell them it's a bad idea. App. Now if you've ever created a shareable library, you know that there's a lot of steps involved. You need to set up your TypeScript config, your build scripts, and all of your testing utilities. App, but as you're about to see, NX makes this entire process completely trivial. At this point, we'll go into the source code for our utilities library and I'll export a variable called unicorn rocket that contains some emoji characters because our design team said we need to show these characters on every single home page of every app throughout the entire company. App. Now the awesome thing about NX is that it makes code sharing dead simple. At the beginning of this video, we set up this workspace with an organization name, app, and we can now import all of our shared code from that namespace starting with the at symbol. All the configuration is done for us, so all we need to do is import the code that we wanna use. We'll start by doing that in our Angular app, and then we'll switch over to React and do the same thing there. So now we have 2 front end JavaScript apps sharing a common set of utilities. App. Now the really amazing thing is that NX will keep track of all the apps that depend on the shared library. Let's just imagine that our design team comes to us and says that we need to add an additional emoji to the app stream. If we make that change on a clean git branch and then go back to the dependency diagram, we can see exactly which apps are affected by the change. App. So even though we didn't actually change anything on the main front end applications, they'll still be highlighted in red because they depend on that utilities library, which did change. App, and it's also worth pointing out that there's an additional command provided by n x that will help you visualize the entire dependency graph with the affected libraries being outlined in red. Now Now at this point, we've only been talking about front end code, but n x can also handle server side node projects with first class support for Nest and Express. App. In this demo, we'll use Nest. And the first thing we'll do is opt in to the schematics. And then we'll go into the Angular console and find the command to generate a new Nest application. App. We'll give the back end a name of API, and its responsibility is to fetch items from the database related to customer bookings. This adds another app to the app's app directory, but this time without end to end testing because it's a back end project. Now one of the most common things to share between your front end and back end code are your TypeScript interfaces. App, and Nest will want to read and write data in a back end database and make sure that that data has a specific shape with a TypeScript interface. But we'll also very likely on IntelliSense when we read that data and use it in our front end applications. What I'm doing now is creating another NX library, and then I'm going to add a TypeScript interface to it called reservation. App. By putting this code in a shared library, we can now use it in any one of our front end or back end apps. And on top of that, we can leverage the dependency graph to figure out exactly which apps depend on this data type. App. So if this interface ever changes, then you know exactly which apps to test, to build, and ultimately deploy to your production server. App So there's a lot of obvious benefits to a tool like NX. Things like modern testing tools like Cypress and Jest, a dependency graph that will help you scale a monorepo to an infinitely large team, app, as well as task runners and cogenerators to keep your project organized. And the end result is a set of tools that will help you develop like Google, giving your organization, a predictable way to collaborate and automate complex web applications at scale. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to check out the full tutorial on nx.dev. Thanks for watching, and I will talk to you soon. App.
One
one
of
of
the
the
biggest
biggest
challenges
challenges
of
of
building
building
a
a
full
full
stack
stack
web
web
application
application
is
is
managing
managing
complexity.
complexity
If
if
you're
you're
building
building
a
a
serious
serious
product,
product
you
you
likely
likely
have
have
multiple
multiple
front
front
end
end
applications
applications
that
that
communicate
communicate
with
with
the
the
back
back
end
end
and
and
share
share
interfaces
interfaces
with
with
multiple
multiple
team
team
members
members
that
that
need
need
to
to
collaborate
collaborate
efficiently.
efficiently
Today,
today
we're
we're
going
going
to
to
look
look
at
at
NX
nx
from
from
Narwhal,
narwhal
a
a
a
a
tool
tool
that
that
can
can
dramatically
dramatically
simplify
simplify
the
the
way
way
you
you
organize,
organize
test,
test
and
and
share
share
code
code
between
between
multiple
multiple
JavaScript
javascript
applications.
applications
If
if
you're
you're
new
new
to
to
the
the
channel,
channel
like
like
and
and
subscribe,
subscribe
and
and
and
and
you
you
can
can
find
find
the
the
full
full
tutorial
tutorial
on
on
nx.dev.
nx.dev
The
the
tool
tool
itself
itself
is
is
based
based
on
on
the
the
best
best
practices
practices
developed
developed
at
at
Google
google
to
to
scale
scale
thousands
thousands
of
of
applications
applications
across
across
app
app
as
as
thousands
thousands
of
of
developers
developers
in
in
a
a
single
single
mono
mono
repo.
repo
But
but
you
you
don't
don't
need
need
to
to
be
be
operating
operating
at
at
Google
google
scale
scale
to
to
see
see
the
the
benefits
benefits
of
of
NX.
nx
It
it
can
can
be
be
a
a
very
very
powerful
powerful
tool
tool
for
for
projects
projects
of
of
all
all
sizes,
sizes
and
and
and
and
not
not
just
just
Angular,
angular
but
but
full
full
stack
stack
JavaScript
javascript
in
in
general.
general
So
so
why
why
do
do
big
big
companies
companies
like
like
Google,
google
Microsoft,
microsoft
and
and
Facebook
facebook
like
like
to
to
manage
manage
their
their
code
code
in
in
mono
mono
repos?
repos
App,
app
or
or
in
in
other
other
words,
words
use
use
a
a
single
single
Git
git
repository
repository
to
to
manage
manage
multiple
multiple
apps
apps
and
and
libraries.
libraries
The
the
simple
simple
answer
answer
is
is
that
that
this
this
approach
approach
helps
helps
manage
manage
complexity
complexity
by
by
applying
applying
best
best
practices
practices
organization
organization
wide.
wide
App.
app
This
this
delivers
delivers
consistency
consistency
and
and
predictability
predictability
in
in
your
your
code
code
while
while
also
also
maximizing
maximizing
the
the
ability
ability
to
to
share
share
code
code
between
between
projects.
projects
But
but
you
you
can't
can't
just
just
put
put
all
all
of
of
out
out
your
your
code
code
in
in
a
a
single
single
repo
repo
and
and
expect
expect
to
to
reap
reap
the
the
benefits.
benefits
You
you
need
need
the
the
right
right
tooling
tooling
in
in
place
place
to
to
test,
test
build,
build
and
and
deploy
deploy
your
your
apps
apps
at
at
scale,
scale
and
and
that's
that's
where
where
n
n
x
x
comes
comes
in.
in
Over
over
the
the
next
next
10
10
minutes,
minutes
we'll
we'll
look
look
at
at
how
how
complexity
complexity
can
can
grow
grow
very
very
quickly
quickly
in
in
a
a
full
full
stack
stack
project.
project
We'll
we'll
build
build
2
2
front
front
end
end
applications,
applications
1
1
with
with
Angular
angular
and
and
1
1
with
with
React,
react
and
and
then
then
a
a
shared
shared
back
back
end
end
with
with
Nest.
nest
On
on
top
top
of
of
that,
that
we'll
we'll
add
add
multiple
multiple
shared
shared
libraries
libraries
that
that
can
can
be
be
used
used
by
by
all
all
three
three
of
of
these
these
apps.
apps
Let's
let's
go
go
ahead
ahead
and
and
create
create
a
a
new
new
NX
nx
workspace
workspace
to
to
see
see
how
how
it
it
can
can
help
help
us
us
manage
manage
a
a
project
project
like
like
this.
this
App.
app
From
from
the
the
command
command
line,
line
run
run
npx
npx
create
create
n
n
x
x
workspace
workspace
followed
followed
by
by
your
your
organization
organization
or
or
product
product
name.
name
This
this
will
will
give
give
us
us
an
an
empty
empty
workspace,
workspace
and
and
will
will
be
be
writing
writing
most
most
of
of
our
our
code
code
in
in
the
the
apps
apps
and
and
libs
libs
directories.
directories
Right
right
out
out
of
of
the
the
gate,
gate
n
n
x
x
is
is
going
going
to
to
help
help
you
you
separate
separate
your
your
shared
shared
code
code
from
from
your
your
application
application
code.
code
App.
app
For
for
example,
example
you
you
might
might
have
have
2
2
front
front
end
end
applications,
applications
one
one
for
for
your
your
customers
customers
and
and
one
one
for
for
your
your
employees.
employees
Those
those
apps
apps
would
would
live
live
in
in
the
the
apps
apps
directory,
directory
but
but
they
they
might
might
share
share
common
common
UI
ui
elements
elements
that
that
would
would
go
go
in
in
the
the
libs
libs
directory.
directory
Apptery.
apptery
So
so
this
this
works
works
really
really
well
well
when
when
you
you
have
have
a
a
design
design
system
system
where
where
you
you
share
share
common
common
UI
ui
elements
elements
across
across
multiple
multiple
apps,
apps
but
but
you
you
might
might
also
also
have
have
a
a
back
back
end
end
app
app
that
that
gets
gets
deployed
deployed
to
to
a
a
node
node
server.
server
App.
app
And
and
if
if
you're
you're
using
using
TypeScript,
typescript
you'll
you'll
likely
likely
want
want
to
to
share
share
interfaces
interfaces
between
between
your
your
front
front
end
end
and
and
back
back
end
end
code
code
without
without
having
having
to
to
duplicate
duplicate
and
and
regenerate
regenerate
that
that
code.
code
App.
app
Those
those
interfaces
interfaces
can
can
also
also
live
live
in
in
the
the
libs
libs
directory
directory
and
and
be
be
used
used
reliably
reliably
throughout
throughout
a
a
large
large
application.
application
Let's
let's
go
go
ahead
ahead
and
and
imagine
imagine
that
that
we're
we're
building
building
a
a
product
product
for
for
a
a
travel
travel
company.
company
App.
app
We
we
have
have
a
a
team
team
of
of
Angular
angular
engineers
engineers
who
who
are
are
assigned
assigned
to
to
building
building
the
the
front
front
end
end
customer
customer
facing
facing
app.
app
We
we
can
can
opt
opt
into
into
specific
specific
tooling
tooling
for
for
different
different
frameworks
frameworks
like
like
Angular,
angular
React,
react
and
and
Nest
nest
JS,
js
so
so
so
so
we'll
we'll
go
go
ahead
ahead
and
and
do
do
that
that
for
for
Angular
angular
first.
first
Our
our
team
team
of
of
engineers
engineers
want
want
to
to
use
use
modern
modern
test
test
tools
tools
like
like
Cypress
cypress
and
and
Jest.
jest
NX
nx
gives
gives
you
you
the
the
option
option
to
to
just
just
set
set
those
those
things
things
up
up
automatically
automatically
without
without
any
any
configuration
configuration
on
on
in
in
your
your
part.
part
Now
now
that
that
our
our
workspace
workspace
is
is
configured
configured
for
for
Angular,
angular
Jest,
jest
and
and
Cypress,
cypress
we'll
we'll
go
go
ahead
ahead
and
and
generate
generate
a
a
new
new
app.
app
That
that
will
will
create
create
a
a
new
new
Angular
angular
app
app
just
just
like
like
it
it
with
with
the
the
Angular
angular
CLI,
cli
but
but
tailored
tailored
specific
specific
to
to
this
this
workspace.
workspace
You
you
can
can
find
find
the
the
app
app
in
in
the
the
app's
app's
directory
directory
along
along
with
with
a
a
folder
folder
for
for
end
end
to
to
end
end
testing
testing
configured
configured
with
with
Cypress.
cypress
App.
app
Now
now
up
up
until
until
this
this
point,
point
we've
we've
just
just
been
been
using
using
the
the
terminal
terminal
to
to
run
run
these
these
commands,
commands
but
but
there's
there's
actually
actually
a
a
better
better
way
way
to
to
do
do
this.
this
If
if
you're
you're
using
using
NX,
nx
I
i
highly
highly
recommend
recommend
that
that
you
you
install
install
the
the
Angular
angular
console
console
Versus
versus
Code
code
plug
plug
in.
in
App.
app
The
the
plugin
plugin
allows
allows
you
you
to
to
easily
easily
navigate
navigate
all
all
the
the
commands
commands
that
that
you
you
have
have
at
at
your
your
disposal
disposal
through
through
NX.
nx
You
you
don't
don't
need
need
to
to
memorize
memorize
any
any
commands
commands
or
or
search
search
through
through
the
the
docs.
docs
It's
it's
just
just
all
all
right
right
here
here
in
in
your
your
IDE.
ide
App,
app
and
and
this
this
really
really
helps
helps
manage
manage
complexity
complexity
because
because
you
you
might
might
have
have
dozens
dozens
of
of
apps
apps
and
and
libraries
libraries
in
in
a
a
single
single
monorepo.
monorepo
For
for
example,
example
if
if
we
we
only
only
want
want
to
to
run
run
the
the
end
end
to
to
end
end
test
test
apps
apps
in
in
our
our
current
current
booking
booking
app.
app
We
we
can
can
do
do
that
that
by
by
selecting
selecting
the
the
options
options
we
we
want
want
and
and
then
then
clicking
clicking
a
a
button.
button
And
and
that
that
will
will
give
give
us
us
Cypress
cypress
running
running
end
end
to
to
end
end
tests
tests
for
for
this
this
specific
specific
app.
app
App.
app
And
and
from
from
the
the
same
same
screen,
screen
we
we
can
can
also
also
run
run
our
our
component
component
unit
unit
test,
test
which
which
were
were
set
set
up
up
with
with
Jest.
jest
And
and
another
another
cool
cool
feature
feature
of
of
the
the
console
console
is
is
that
that
it
it
will
will
save
save
your
your
commands
commands
and
and
memory,
memory
so
so
you
you
can
can
rerun
rerun
them
them
with
with
the
the
same
same
options
options
by
by
simply
simply
clicking
clicking
a
a
button
button
without
without
having
having
to
to
think
think
about
about
it.
it
Now
now
having
having
this
this
modern
modern
tooling
tooling
is
is
really
really
nice,
nice
but
but
the
the
most
most
powerful
powerful
benefits
benefits
of
of
NX
nx
start
start
to
to
kick
kick
in
in
as
as
your
your
app
app
grows
grows
in
in
complexity.
complexity
At
at
this
this
point,
point
we
we
just
just
have
have
a
a
single
single
customer
customer
facing
facing
Angular
angular
app,
app
but
but
let's
let's
imagine
imagine
we
we
have
have
a
a
separate
separate
team
team
of
of
developers
developers
who
who
are
are
working
working
on
on
an
an
internal
internal
admin
admin
app
app
for
for
managing
managing
customer
customer
out
out
teams,
teams
but
but
this
this
development
development
team
team
prefers
prefers
to
to
use
use
React.
react
Now
now
like
like
I
i
mentioned
mentioned
earlier,
earlier
you
you
can
can
use
use
NX
nx
with
with
any
any
JavaScript
javascript
project,
project
but
but
it
it
also
also
includes
includes
first
first
class
class
support
support
for
for
React.
react
App.
app
We
we
first
first
need
need
to
to
opt
opt
in
in
to
to
the
the
React
react
tooling
tooling
by
by
running
running
n
n
g
g
add
add
narwhal
narwhal
react.
react
And
and
if
if
we
we
go
go
back
back
to
to
the
the
console,
console
we'll
we'll
now
now
have
have
access
access
to
to
schematics
schematics
specifically
specifically
for
for
generating
generating
React
react
applications
applications
and
and
components.
components
We'll
we'll
go
go
ahead
ahead
and
and
generate
generate
our
our
admin
admin
React
react
app
app
just
just
using
using
the
the
built
built
in
in
defaults.
defaults
And
and
now
now
we
we
have
have
a
a
second
second
application
application
in
in
the
the
app's
app's
directory
directory
along
along
with
with
its
its
own
own
end
end
to
to
end
end
test
test
suite.
suite
Now
now
at
at
this
this
point,
point
we
we
have
have
a
a
monorepo
monorepo
with
with
2
2
individual
individual
applications
applications
in
in
app.
app
But
but
one
one
of
of
the
the
common
common
misconceptions
misconceptions
that
that
you
you
may
may
have
have
heard
heard
is
is
that
that
putting
putting
all
all
of
of
your
your
code
code
into
into
a
a
single
single
monorepo
monorepo
will
will
slow
slow
down
down
your
your
testing
testing
and
and
deployment
deployment
pipelines.
pipelines
App.
app
In
in
a
a
large
large
project,
project
you
you
only
only
want
want
to
to
rebuild
rebuild
and
and
test
test
the
the
portions
portions
of
of
the
the
app
app
that
that
have
have
been
been
affected
affected
by
by
change.
change
That
that
might
might
be
be
an
an
individual
individual
application,
application
or
or
it
it
might
might
mapping
mapping
multiple
multiple
applications
applications
that
that
have
have
been
been
affected
affected
by
by
a
a
change
change
to
to
one
one
of
of
their
their
shared
shared
dependencies.
dependencies
NX
nx
can
can
detect
detect
where
where
code
code
changes
changes
will
will
impact
impact
the
the
monorepo,
monorepo
allowing
allowing
you
you
to
to
efficiently
efficiently
work
work
with
with
change
change
in
in
isolation
isolation
at
at
any
any
scale.
scale
If
if
we
we
look
look
at
at
the
the
git
git
master
master
branch,
branch
you
you
can
can
see
see
we
we
have
have
a
a
clean
clean
working
working
directory
directory
with
with
no
no
changes.
changes
App.
app
Then
then
if
if
we
we
go
go
to
to
the
the
Angular
angular
console
console
under
under
dependency
dependency
diagram,
diagram
we
we
can
can
see
see
both
both
of
of
our
our
apps
apps
here,
here
which
which
are
are
currently
currently
grayed
grayed
out
out
because
because
there
there
are
are
no
no
changes.
changes
But
but
if
if
we
we
go
go
and
and
make
make
a
a
change
change
to
to
our
our
React
react
app,
app
it
it
will
will
be
be
automatically
automatically
highlighted
highlighted
in
in
red.
red
And
and
because
because
NX
nx
knows
knows
which
which
apps
apps
are
are
affected
affected
by
by
change
change
in
in
the
the
current
current
branch,
branch
we
we
can
can
test
test
and
and
build
build
those
those
in
in
isolation.
isolation
App.
app
And
and
this
this
is
is
what
what
Narwhal
narwhal
means
means
when
when
they
they
talk
talk
about
about
developing
developing
like
like
Google.
google
Because
because
a
a
company
company
like
like
Google
google
might
might
have
have
thousands
thousands
of
of
apps
apps
under
under
a
a
single
single
monorepo,
monorepo
and
and
the
the
only
only
way
way
to
to
operate
operate
them
them
at
at
at
at
scale
scale
is
is
to
to
understand
understand
what
what
apps
apps
are
are
affected
affected
by
by
change.
change
If
if
you
you
look
look
at
at
the
the
commands
commands
under
under
the
the
Angular
angular
console,
console
you'll
you'll
see
see
a
a
bunch
bunch
of
of
them
them
that
that
are
are
prefixed
prefixed
by
by
affected.
affected
App.
app
These
these
commands
commands
allow
allow
teams
teams
to
to
work
work
simultaneously
simultaneously
on
on
several
several
apps
apps
or
or
libraries
libraries
and
and
be
be
able
able
to
to
build
build
and
and
test
test
them
them
in
in
isolation
isolation
without
without
having
having
to
to
worry
worry
about
about
everything
everything
else
else
that's
that's
going
going
on
on
in
in
the
the
monorepo.
monorepo
This
this
This
this
is
is
especially
especially
important
important
when
when
you
you
start
start
talking
talking
about
about
code
code
that
that
might
might
affect
affect
multiple
multiple
apps.
apps
We
we
can
can
demonstrate
demonstrate
that
that
by
by
generating
generating
a
a
library
library
with
with
NX
nx
that
that
will
will
be
be
used
used
by
by
both
both
the
the
Angular
angular
and
and
React
react
apps.
apps
App.
app
We'll
we'll
go
go
ahead
ahead
and
and
call
call
this
this
our
our
utilities
utilities
library
library
and
and
because
because
I
i
use
use
the
the
default
default
schematic,
schematic
it's
it's
just
just
going
going
to
to
generate
generate
a
a
vanilla
vanilla
TypeScript
typescript
project,
project
app,
app
but
but
you
you
can
can
generate
generate
framework
framework
specific
specific
libraries
libraries
as
as
well.
well
Now
now
another
another
feature
feature
I
i
wanna
wanna
point
point
out
out
before
before
we
we
go
go
any
any
further
further
is
is
that
that
you
you
have
have
the
the
option
option
to
to
add
add
tags
tags
to
to
your
your
libraries.
libraries
App.
app
This
this
part
part
is
is
completely
completely
optional,
optional
but
but
tags
tags
allow
allow
you
you
to
to
control
control
which
which
types
types
of
of
apps
apps
can
can
take
take
this
this
library
library
as
as
a
a
dependency.
dependency
For
for
example,
example
you
you
might
might
have
have
a
a
front
front
end
end
shared
shared
library
library
that
that
touches
touches
the
the
DOM
dom
that
that
you
you
wouldn't
wouldn't
want
want
to
to
be
be
used
used
by
by
a
a
node
node
project.
project
So
so
if
if
a
a
back
back
end
end
developer
developer
tries
tries
to
to
use
use
this
this
library
library
as
as
a
a
dependency,
dependency
they
they
will
will
get
get
a
a
linting
linting
error
error
that
that
will
will
tell
tell
them
them
it's
it's
a
a
bad
bad
idea.
idea
App.
app
Now
now
if
if
you've
you've
ever
ever
created
created
a
a
shareable
shareable
library,
library
you
you
know
know
that
that
there's
there's
a
a
lot
lot
of
of
steps
steps
involved.
involved
You
you
need
need
to
to
set
set
up
up
your
your
TypeScript
typescript
config,
config
your
your
build
build
scripts,
scripts
and
and
all
all
of
of
your
your
testing
testing
utilities.
utilities
App,
app
but
but
as
as
you're
you're
about
about
to
to
see,
see
NX
nx
makes
makes
this
this
entire
entire
process
process
completely
completely
trivial.
trivial
At
at
this
this
point,
point
we'll
we'll
go
go
into
into
the
the
source
source
code
code
for
for
our
our
utilities
utilities
library
library
and
and
I'll
i'll
export
export
a
a
variable
variable
called
called
unicorn
unicorn
rocket
rocket
that
that
contains
contains
some
some
emoji
emoji
characters
characters
because
because
our
our
design
design
team
team
said
said
we
we
need
need
to
to
show
show
these
these
characters
characters
on
on
every
every
single
single
home
home
page
page
of
of
every
every
app
app
throughout
throughout
the
the
entire
entire
company.
company
App.
app
Now
now
the
the
awesome
awesome
thing
thing
about
about
NX
nx
is
is
that
that
it
it
makes
makes
code
code
sharing
sharing
dead
dead
simple.
simple
At
at
the
the
beginning
beginning
of
of
this
this
video,
video
we
we
set
set
up
up
this
this
workspace
workspace
with
with
an
an
organization
organization
name,
name
app,
app
and
and
we
we
can
can
now
now
import
import
all
all
of
of
our
our
shared
shared
code
code
from
from
that
that
namespace
namespace
starting
starting
with
with
the
the
at
at
symbol.
symbol
All
all
the
the
configuration
configuration
is
is
done
done
for
for
us,
us
so
so
all
all
we
we
need
need
to
to
do
do
is
is
import
import
the
the
code
code
that
that
we
we
wanna
wanna
use.
use
We'll
we'll
start
start
by
by
doing
doing
that
that
in
in
our
our
Angular
angular
app,
app
and
and
then
then
we'll
we'll
switch
switch
over
over
to
to
React
react
and
and
do
do
the
the
same
same
thing
thing
there.
there
So
so
now
now
we
we
have
have
2
2
front
front
end
end
JavaScript
javascript
apps
apps
sharing
sharing
a
a
common
common
set
set
of
of
utilities.
utilities
App.
app
Now
now
the
the
really
really
amazing
amazing
thing
thing
is
is
that
that
NX
nx
will
will
keep
keep
track
track
of
of
all
all
the
the
apps
apps
that
that
depend
depend
on
on
the
the
shared
shared
library.
library
Let's
let's
just
just
imagine
imagine
that
that
our
our
design
design
team
team
comes
comes
to
to
us
us
and
and
says
says
that
that
we
we
need
need
to
to
add
add
an
an
additional
additional
emoji
emoji
to
to
the
the
app
app
stream.
stream
If
if
we
we
make
make
that
that
change
change
on
on
a
a
clean
clean
git
git
branch
branch
and
and
then
then
go
go
back
back
to
to
the
the
dependency
dependency
diagram,
diagram
we
we
can
can
see
see
exactly
exactly
which
which
apps
apps
are
are
affected
affected
by
by
the
the
change.
change
App.
app
So
so
even
even
though
though
we
we
didn't
didn't
actually
actually
change
change
anything
anything
on
on
the
the
main
main
front
front
end
end
applications,
applications
they'll
they'll
still
still
be
be
highlighted
highlighted
in
in
red
red
because
because
they
they
depend
depend
on
on
that
that
utilities
utilities
library,
library
which
which
did
did
change.
change
App,
app
and
and
it's
it's
also
also
worth
worth
pointing
pointing
out
out
that
that
there's
there's
an
an
additional
additional
command
command
provided
provided
by
by
n
n
x
x
that
that
will
will
help
help
you
you
visualize
visualize
the
the
entire
entire
dependency
dependency
graph
graph
with
with
the
the
affected
affected
libraries
libraries
being
being
outlined
outlined
in
in
red.
red
Now
now
Now
now
at
at
this
this
point,
point
we've
we've
only
only
been
been
talking
talking
about
about
front
front
end
end
code,
code
but
but
n
n
x
x
can
can
also
also
handle
handle
server
server
side
side
node
node
projects
projects
with
with
first
first
class
class
support
support
for
for
Nest
nest
and
and
Express.
express
App.
app
In
in
this
this
demo,
demo
we'll
we'll
use
use
Nest.
nest
And
and
the
the
first
first
thing
thing
we'll
we'll
do
do
is
is
opt
opt
in
in
to
to
the
the
schematics.
schematics
And
and
then
then
we'll
we'll
go
go
into
into
the
the
Angular
angular
console
console
and
and
find
find
the
the
command
command
to
to
generate
generate
a
a
new
new
Nest
nest
application.
application
App.
app
We'll
we'll
give
give
the
the
back
back
end
end
a
a
name
name
of
of
API,
api
and
and
its
its
responsibility
responsibility
is
is
to
to
fetch
fetch
items
items
from
from
the
the
database
database
related
related
to
to
customer
customer
bookings.
bookings
This
this
adds
adds
another
another
app
app
to
to
the
the
app's
app's
app
app
directory,
directory
but
but
this
this
time
time
without
without
end
end
to
to
end
end
testing
testing
because
because
it's
it's
a
a
back
back
end
end
project.
project
Now
now
one
one
of
of
the
the
most
most
common
common
things
things
to
to
share
share
between
between
your
your
front
front
end
end
and
and
back
back
end
end
code
code
are
are
your
your
TypeScript
typescript
interfaces.
interfaces
App,
app
and
and
Nest
nest
will
will
want
want
to
to
read
read
and
and
write
write
data
data
in
in
a
a
back
back
end
end
database
database
and
and
make
make
sure
sure
that
that
that
that
data
data
has
has
a
a
specific
specific
shape
shape
with
with
a
a
TypeScript
typescript
interface.
interface
But
but
we'll
we'll
also
also
very
very
likely
likely
on
on
IntelliSense
intellisense
when
when
we
we
read
read
that
that
data
data
and
and
use
use
it
it
in
in
our
our
front
front
end
end
applications.
applications
What
what
I'm
i'm
doing
doing
now
now
is
is
creating
creating
another
another
NX
nx
library,
library
and
and
then
then
I'm
i'm
going
going
to
to
add
add
a
a
TypeScript
typescript
interface
interface
to
to
it
it
called
called
reservation.
reservation
App.
app
By
by
putting
putting
this
this
code
code
in
in
a
a
shared
shared
library,
library
we
we
can
can
now
now
use
use
it
it
in
in
any
any
one
one
of
of
our
our
front
front
end
end
or
or
back
back
end
end
apps.
apps
And
and
on
on
top
top
of
of
that,
that
we
we
can
can
leverage
leverage
the
the
dependency
dependency
graph
graph
to
to
figure
figure
out
out
exactly
exactly
which
which
apps
apps
depend
depend
on
on
this
this
data
data
type.
type
App.
app
So
so
if
if
this
this
interface
interface
ever
ever
changes,
changes
then
then
you
you
know
know
exactly
exactly
which
which
apps
apps
to
to
test,
test
to
to
build,
build
and
and
ultimately
ultimately
deploy
deploy
to
to
your
your
production
production
server.
server
App
app
So
so
there's
there's
a
a
lot
lot
of
of
obvious
obvious
benefits
benefits
to
to
a
a
tool
tool
like
like
NX.
nx
Things
things
like
like
modern
modern
testing
testing
tools
tools
like
like
Cypress
cypress
and
and
Jest,
jest
a
a
dependency
dependency
graph
graph
that
that
will
will
help
help
you
you
scale
scale
a
a
monorepo
monorepo
to
to
an
an
infinitely
infinitely
large
large
team,
team
app,
app
as
as
well
well
as
as
task
task
runners
runners
and
and
cogenerators
cogenerators
to
to
keep
keep
your
your
project
project
organized.
organized
And
and
the
the
end
end
result
result
is
is
a
a
set
set
of
of
tools
tools
that
that
will
will
help
help
you
you
develop
develop
like
like
Google,
google
giving
giving
your
your
organization,
organization
a
a
predictable
predictable
way
way
to
to
collaborate
collaborate
and
and
automate
automate
complex
complex
web
web
applications
applications
at
at
scale.
scale
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe,
subscribe
and
and
make
make
sure
sure
to
to
check
check
out
out
the
the
full
full
tutorial
tutorial
on
on
nx.dev.
nx.dev
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
App.
app
success
The speakers discuss the benefits of using NX from Narwhal for managing complexity in web applications and generate single apps with specific tools. They also explain how to use NX in various frameworks and configure it for each application. The speakers emphasize the potential for low complexity and efficient use of code and provide instructions on configuring NX in various frameworks. They also demonstrate how to use the utilities and resources in the front end and back end to create a job for a project and use the dependency graph to figure out which apps depend on certain data types.
Nx Quickstart - How to Scale a JavaScript Project
One of the biggest challenges of building a full stack web application is managing complexity. If you're building a serious product, you likely have multiple front end applications that communicate with the back end and share interfaces with multiple team members that need to collaborate efficiently. Today, we're going to look at NX from Narwhal, a a tool that can dramatically simplify the way you organize, test, and share code between multiple JavaScript applications. If you're new to the channel, like and subscribe, and and you can find the full tutorial on nx.dev. The tool itself is based on the best practices developed at Google to scale thousands of applications across app as thousands of developers in a single mono repo. But you don't need to be operating at Google scale to see the benefits of NX. It can be a very powerful tool for projects of all sizes, and and not just Angular, but full stack JavaScript in general. So why do big companies like Google, Microsoft, and Facebook like to manage their code in mono repos? App, or in other words, use a single Git repository to manage multiple apps and libraries. The simple answer is that this approach helps manage complexity by applying best practices organization wide. App. This delivers consistency and predictability in your code while also maximizing the ability to share code between projects. But you can't just put all of out your code in a single repo and expect to reap the benefits. You need the right tooling in place to test, build, and deploy your apps at scale, and that's where n x comes in. Over the next 10 minutes, we'll look at how complexity can grow very quickly in a full stack project. We'll build 2 front end applications, 1 with Angular and 1 with React, and then a shared back end with Nest. On top of that, we'll add multiple shared libraries that can be used by all three of these apps. Let's go ahead and create a new NX workspace to see how it can help us manage a project like this. App. From the command line, run npx create n x workspace followed by your organization or product name. This will give us an empty workspace, and will be writing most of our code in the apps and libs directories. Right out of the gate, n x is going to help you separate your shared code from your application code. App. For example, you might have 2 front end applications, one for your customers and one for your employees. Those apps would live in the apps directory, but they might share common UI elements that would go in the libs directory. Apptery. So this works really well when you have a design system where you share common UI elements across multiple apps, but you might also have a back end app that gets deployed to a node server. App. And if you're using TypeScript, you'll likely want to share interfaces between your front end and back end code without having to duplicate and regenerate that code. App. Those interfaces can also live in the libs directory and be used reliably throughout a large application. Let's go ahead and imagine that we're building a product for a travel company. App. We have a team of Angular engineers who are assigned to building the front end customer facing app. We can opt into specific tooling for different frameworks like Angular, React, and Nest JS, so so we'll go ahead and do that for Angular first. Our team of engineers want to use modern test tools like Cypress and Jest. NX gives you the option to just set those things up automatically without any configuration on in your part. Now that our workspace is configured for Angular, Jest, and Cypress, we'll go ahead and generate a new app. That will create a new Angular app just like it with the Angular CLI, but tailored specific to this workspace. You can find the app in the app's directory along with a folder for end to end testing configured with Cypress. App. Now up until this point, we've just been using the terminal to run these commands, but there's actually a better way to do this. If you're using NX, I highly recommend that you install the Angular console Versus Code plug in. App. The plugin allows you to easily navigate all the commands that you have at your disposal through NX. You don't need to memorize any commands or search through the docs. It's just all right here in your IDE. App, and this really helps manage complexity because you might have dozens of apps and libraries in a single monorepo. For example, if we only want to run the end to end test apps in our current booking app. We can do that by selecting the options we want and then clicking a button. And that will give us Cypress running end to end tests for this specific app. App. And from the same screen, we can also run our component unit test, which were set up with Jest. And another cool feature of the console is that it will save your commands and memory, so you can rerun them with the same options by simply clicking a button without having to think about it. Now having this modern tooling is really nice, but the most powerful benefits of NX start to kick in as your app grows in complexity. At this point, we just have a single customer facing Angular app, but let's imagine we have a separate team of developers who are working on an internal admin app for managing customer out teams, but this development team prefers to use React. Now like I mentioned earlier, you can use NX with any JavaScript project, but it also includes first class support for React. App. We first need to opt in to the React tooling by running n g add narwhal react. And if we go back to the console, we'll now have access to schematics specifically for generating React applications and components. We'll go ahead and generate our admin React app just using the built in defaults. And now we have a second application in the app's directory along with its own end to end test suite. Now at this point, we have a monorepo with 2 individual applications in app. But one of the common misconceptions that you may have heard is that putting all of your code into a single monorepo will slow down your testing and deployment pipelines. App. In a large project, you only want to rebuild and test the portions of the app that have been affected by change. That might be an individual application, or it might mapping multiple applications that have been affected by a change to one of their shared dependencies. NX can detect where code changes will impact the monorepo, allowing you to efficiently work with change in isolation at any scale. If we look at the git master branch, you can see we have a clean working directory with no changes. App. Then if we go to the Angular console under dependency diagram, we can see both of our apps here, which are currently grayed out because there are no changes. But if we go and make a change to our React app, it will be automatically highlighted in red. And because NX knows which apps are affected by change in the current branch, we can test and build those in isolation. App. And this is what Narwhal means when they talk about developing like Google. Because a company like Google might have thousands of apps under a single monorepo, and the only way to operate them at at scale is to understand what apps are affected by change. If you look at the commands under the Angular console, you'll see a bunch of them that are prefixed by affected. App. These commands allow teams to work simultaneously on several apps or libraries and be able to build and test them in isolation without having to worry about everything else that's going on in the monorepo. This This is especially important when you start talking about code that might affect multiple apps. We can demonstrate that by generating a library with NX that will be used by both the Angular and React apps. App. We'll go ahead and call this our utilities library and because I use the default schematic, it's just going to generate a vanilla TypeScript project, app, but you can generate framework specific libraries as well. Now another feature I wanna point out before we go any further is that you have the option to add tags to your libraries. App. This part is completely optional, but tags allow you to control which types of apps can take this library as a dependency. For example, you might have a front end shared library that touches the DOM that you wouldn't want to be used by a node project. So if a back end developer tries to use this library as a dependency, they will get a linting error that will tell them it's a bad idea. App. Now if you've ever created a shareable library, you know that there's a lot of steps involved. You need to set up your TypeScript config, your build scripts, and all of your testing utilities. App, but as you're about to see, NX makes this entire process completely trivial. At this point, we'll go into the source code for our utilities library and I'll export a variable called unicorn rocket that contains some emoji characters because our design team said we need to show these characters on every single home page of every app throughout the entire company. App. Now the awesome thing about NX is that it makes code sharing dead simple. At the beginning of this video, we set up this workspace with an organization name, app, and we can now import all of our shared code from that namespace starting with the at symbol. All the configuration is done for us, so all we need to do is import the code that we wanna use. We'll start by doing that in our Angular app, and then we'll switch over to React and do the same thing there. So now we have 2 front end JavaScript apps sharing a common set of utilities. App. Now the really amazing thing is that NX will keep track of all the apps that depend on the shared library. Let's just imagine that our design team comes to us and says that we need to add an additional emoji to the app stream. If we make that change on a clean git branch and then go back to the dependency diagram, we can see exactly which apps are affected by the change. App. So even though we didn't actually change anything on the main front end applications, they'll still be highlighted in red because they depend on that utilities library, which did change. App, and it's also worth pointing out that there's an additional command provided by n x that will help you visualize the entire dependency graph with the affected libraries being outlined in red. Now Now at this point, we've only been talking about front end code, but n x can also handle server side node projects with first class support for Nest and Express. App. In this demo, we'll use Nest. And the first thing we'll do is opt in to the schematics. And then we'll go into the Angular console and find the command to generate a new Nest application. App. We'll give the back end a name of API, and its responsibility is to fetch items from the database related to customer bookings. This adds another app to the app's app directory, but this time without end to end testing because it's a back end project. Now one of the most common things to share between your front end and back end code are your TypeScript interfaces. App, and Nest will want to read and write data in a back end database and make sure that that data has a specific shape with a TypeScript interface. But we'll also very likely on IntelliSense when we read that data and use it in our front end applications. What I'm doing now is creating another NX library, and then I'm going to add a TypeScript interface to it called reservation. App. By putting this code in a shared library, we can now use it in any one of our front end or back end apps. And on top of that, we can leverage the dependency graph to figure out exactly which apps depend on this data type. App. So if this interface ever changes, then you know exactly which apps to test, to build, and ultimately deploy to your production server. App So there's a lot of obvious benefits to a tool like NX. Things like modern testing tools like Cypress and Jest, a dependency graph that will help you scale a monorepo to an infinitely large team, app, as well as task runners and cogenerators to keep your project organized. And the end result is a set of tools that will help you develop like Google, giving your organization, a predictable way to collaborate and automate complex web applications at scale. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe, and make sure to check out the full tutorial on nx.dev. Thanks for watching, and I will talk to you soon. App.
The speakers discuss the benefits of using NX from Narwhal for managing complexity in web applications and generate single apps with specific tools. They also explain how to use NX in various frameworks and configure it for each application. The speakers emphasize the potential for low complexity and efficient use of code and provide instructions on configuring NX in various frameworks. They also demonstrate how to use the utilities and resources in the front end and back end to create a job for a project and use the dependency graph to figure out which apps depend on certain data types.