Production-Grade Angular

Multiple Apps with Nx Workspaces

Lukas Ruebbelke

Lukas Ruebbelke

Venmo
Production-Grade Angular

Check out a free preview of the full Production-Grade Angular course

The "Multiple Apps with Nx Workspaces" Lesson is part of the full, Production-Grade Angular course featured in this preview video. Here's what you'd learn in this lesson:

Lukas demonstrates how to add multiple applications to the same monorepo, and how to add configure the JSON package to be able to run multiple applications from the same repository. The application added in this segment is the client application.

Preview
Close

Transcript from the "Multiple Apps with Nx Workspaces" Lesson

[00:00:00]
>> So we've actually covered quite a bit of stuff. The main thing has been around the Angular CLI and Nx Workspaces. And talking about data modeling and file structure and complexity, what's funny is we're maybe 20% through this list. But we've really covered I would say 80% of the material that I would want to cover when we start talking about how do you write Angular applications that are appropriate for production.

[00:00:33]
And so by production applications, there is an implied level of quality. And so what do we mean when we say production? We're putting something into production versus a proof of concept. There is an implied level of quality, stability, scalability, all of the abilities and so when you if you look up, Software quality and you start to look around on the internet.

[00:01:00]
There's a just a huge list of ilities, scalability, usability, on and on, that you really want to endeavor to try to absorb as much of that into your application so at the end of the day, your application performs as expected for your stakeholders and your clients. And so, complexity and file structure.

[00:01:27]
Those are major components, I would say these tectonic plates in which your application sits. And so we're going to slowly move this rock forward and I just wanna show you a quick example of what happens when you have another application in your workspace. So hopping into the code Let me get my terminal mark over here And we're going to generate another application in the code.

[00:02:28]
So from the command line and what's interesting is that we've actually generated a lot of code. We've actually built a lot of stuff, if you're gonna believe it. But the majority of what we've done has been done by the CLI. So what I wanna do is I want to generate a new application.

[00:02:51]
So ng g and we're gonna go app and I'm gonna call this client and we're going to give it a linter of tslint and style is going to be scss. And just for the sake of keeping this simple, we're going to give routing is false. And let's give this a dry run flag just to see what happens.

[00:03:20]
All right, so now, you'll see here that it's generating a client application and the client e2e application. So let's go ahead and run this. And we're going to generate this. All right. Now let's go into our code. And what do you think that we are going to see?

[00:03:52]
Well now, not only do we have an API, but we have our dashboard app which we previously had. And then we had our now we have our new client application. And so if we go back into the command line, we can go nx run client:serve. And I may run into a port conflict here but, good, not so much.

[00:04:27]
So let me just drag this over here and we can see this. So for this a new workspace let me just rearrange this real quick. All right, so now we have the new application running within our workspace from the command line. So I'm gonna close that real quick.

[00:04:49]
Now let's hop into our code and. Search JSON, what I'm going to do is I'm going to, add a new command. So you're starting to hopefully see this kind of this repetitious or convention repetition, whatever you want to call it, these patterns and I'm starting to repeat over and over.

[00:05:17]
So, nx And we'll go port 4400. And let's give this a spin, all right. mpm run This one second here There we go, so you can see now it's running on port 4400 and it is the brand new applications.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now