Offering many out of the box solutions for complex use-cases, Angular is one of the best frameworks for developing single-page applications. Another great thing about Angular is that it’s very opinionated about architecture. This is especially important for bigger development teams since it facilitates the on-boarding of new members and communication between different teams throughout an organization.

The Angular CLI (command line interface) is another amazing tool. It allows us to scaffold an entire Angular application with one command and perform common tasks such as extending, linting, testing, and building our application.

Nest JS, on the other hand, is a framework to develop backend applications with TypeScript. It's based on express JS. If you never heard of Nest JS, I recommend you to check out this article:

Here’s the cool thing. Nest is deeply inspired by Angular. It offers out of the box solutions for many problems, comes with the same architectural building blocks and a similar command-line interface.

This similarity makes it very easy for Angular developers to implement backend features. You can apply the same principles from the backend to the frontend. Let’s take a closer look by learning a handful of commands to build an Angular app with a Nest JS backend.

What we are going to build

Since I am a big fan of the best football team in the world, we are going to build a small application that displays players from Real Madrid. Yes, Real Madrid is the best team, not Barcelona 😉.

The Angular app will fetch data over REST from a Nest backend and display them.

To build this application, we are going to use the Nest CLI and the Angular CLI.

The basic building blocks

As mentioned in the introduction, Angular and Nest use the same architectural concepts/building blocks.

Modules

Modules are the main part of every Nest and Angular application. A small application may consist of only one module, while a bigger application usually contains multiple modules.

Services

Services are a great way to encapsulate logic into a dedicated class. This increases encapsulation and testability.

If you like this blog post and want to get updated about new cool things that happen in modern frontend development — follow me on Twitter.

Components / Controller

In Angular, we speak of components, while in Nest JS, we use Controllers. In the frontend, a component represents a small block on the UI. A component contains a TypeScript class, an HTML file, a styles file and a .spec file for testing.

In the backend, a controller contains methods that deliver responses over REST.

Both CLIs offer great support to generate those features out of the box.

Building the backend

Let’s start by building our backend application. To scaffold a Nest JS application, we use the Nest CLI that we can globally install using the following command.

npm i -g @nestjs/cli

Once installed, we can use the CLI to scaffold a new Nest JS project. Let’s first create a folder for our project and change into it.

mdkir playersapp
cd playersapp

Now, its time to create the application

nest new playersapp-backend

After the setup wizard is completed, we end up with a Nest JS application. Once created, we can use the start script (npm start) to start up our server. Currently, our server has one controller that returns Hello World on port 3000. We are now ready to extend our application.

Adding a players endpoint

As mentioned earlier, Nest JS is deeply inspired by Angular. Therefore it uses the same building blocks. One of the core building blocks for new features is a module. A module is an important piece of clean architecture because it contains multiple components that belong together.

nest g module players

We generate a player's module that will then contain the REST controller and the player's service.

Running this command automatically adds the freshly created module to the imports array in the app.module.ts.

A module itself is pretty useless; what we need next is a service that delivers the players.

nest g service players

This command will generate players.service.ts, players.service.spec.ts and register it in the players.module.ts.

So far, the players.service.ts is pretty boring. It's just a simple TypeScript class with an annotation.

The job of this service is to deliver an array of players. A real-world application such as a service usually gets the players from a database. For our small example, it's enough to add them as a public class field.

Nice, we created a module and a service that exposes an array of players. But so far, the players are still no accessible via REST. We need a controller.

nest g controller players

This command adds a players.controller.ts, a players.controller.spec.ts and adds it to the declarations array in the players.modle.ts.

Again, the players.controller.ts is a plain TypeScript class with the @Controller annotation. To deliver the players, we can use Nest’s dependency injection to get a hold of the PlayersService and then use it to access the players in a method with the @Get annotation. The @Get annotation tells Nest that this method should be called if we make a GET request to this controller.

That’s it for our backend. We can now perform a GET request via command line or Postman to localhost:3000/players We can open this URL in a browser to see the player's array returned by our controller.

Epic! We implemented a REST API with 4 simple commands:

• nest new players-backend
• nest g module players
• nest g service players
• nest g component players

Our server is ready. But we already know that our front end in local development will be served on a different port than the server. To allow requests from a different port, we need to set the correct CORS (cross-origin resource sharing) headers. Nest JS allows us to call the enableCors method of our app inside the main.ts.

In a real-world application you don’t want to allow all resources to access your backend. Therefore your CORS configuration needs to be more sophisticated. You can find out more on the official Nest docs.

Building the Angular application

Let’s move to the frontend and implement our Angular application to display the list of players. Like Nest, we will also use a command-line interface called Angular CLI to scaffold our application.

npm i -g @angular/cli

Once installed, we can generate our frontend next to the backend.

ng new players-app

After completing the setup wizard, we can either use npm start or ng serve to spin up our Angular application on localhost:4200.

Like the backend, we will create a players module to logically group services and components.

ng g module players --module=app

In contrast to the Nest command, the ng g module player command generates a players.module.ts but doesn't update the app.module.ts. The module to be updated needs to be specified with the --module flag.

Again, a module alone does nothing. We need to have a service and a component. Let’s first start by generating a service.

ng g service players

This command creates a players.service.ts and a players.service.spec.ts.

Let’s use Angulars HTTPClient to request the players from our backend.

Our PlayersService provides a public getPlayers method that fetches an array of players. Next, we need a component which then calls this method.

ng g component players

We successfully created a component. The CLI automatically creates us the TypeScript file, a .spec file for testing and an HTML and styles file according to the style setting you chose during the setup wizard.

We can now inject the PlayersService in our component and call it in the ngOnInit lifecycle hook to assign the retrieved players to a players$ field.

To display our players$ we use Angulars async pipe in combination with the ngFor directive.

The last thing left is implementing a navbar component and dropping in some styles for our player's list.

If we now run ng serve we encounter the following page.

Epic! We implemented our frontend with 4 CLI commands and a couple of extra lines of code.

• ng new players-frontend
• ng g module players --module=app
• ng g service players
• ng g component players

Learn it once — apply it in frontend and backend

Throughout this article, you probably noticed the similarity between the commands and the architectural building blocks we used while implementing the frontend app and the backend.

Thanks to Nest and Angular's similarity, it’s straightforward for Angular devs to build backends. As an experienced Angular dev, you will be very fast with Nest JS, even if you have never heard of it before.

🧞‍ 🙏 If you liked this post, share it and give some claps👏🏻 by clicking multiple times on the left side’s clap button.