Full-stack monorepo — Part II: Nest and Angular

Burak Tasci
Jan 21 · 8 min read

On this second part of series, we’ll extend our application in JavaScript both for the client and server side; by adding microservices in Node.js using the Nest framework and create the user-facing part which consumes the API, in Angular.

Nest (NestJS) is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with and fully supports TypeScript (yet still enables developers to code in pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).

Since both Angular and Nest come with nice CLI tools that deliver an application that already works — right out of the box, we’ll use Nx, providing a set of workspace schematics and builders to extend the CLI functionality to kick-off the things faster and a lot easier.

Getting started

In addition to the Node.js runtime which we installed during the previous part, to get started you’ll need to install Angular CLI.

Then, run the nx-workspace command at the repository root, to create the an empty workspace located in nodejs directory.

Note: You must have cleaned the contents of nodejs directory beforehand, otherwise the CLI will return and error.

This will create an empty workspace powered by Angular CLI, and use yarn as the package manager throughout the further stages.

Docker images for the apps

Even though the CLI offers a development server (ng serve) with hot-reloading features, etc. we’ll focus on getting a production-ready lean image.

We start by creating two base Dockerfiles in nodejs directory: Dockerfile.angular and Dockerfile.nest, with the instructions below.

  • Dockerfile.angular
  • Dockerfile.nest

And the following Dockerfile.test to run test suites.

Directory structure

At this point, we have (more or less) the following directory structure for our Node.js workspace, and we’re just one-step before adding a Nest and Angular application.

The apps and libs directory contain all the projects in the workspace, in a way apps having the minimal amount of code required to package a bunch of reusable libraries together.

Finally, the tools directory contains custom scripts and workspace schematics, which is not a topic covered by this article.

Adding the Angular app

Our first step is to add an Angular application and as a prerequisite we need to start adding Angular capabilities to the workspace — by running the following command on the terminal, still in nodejs directory.

With the Angular capabilities (and test runner configuration) at hand, we can finally generate the frontend app using the CLI.

Then it will take a while for the CLI to generate the frontend application (also the e2e test suites), and for yarn to resolve and install dependencies. Grab a cup of coffee (better beer) meanwhile.

It’s actually a matter of just few minutes for the CLI to finish its job, and then we can confirm the directory structure below.

Adding a Nest service

The second step is to add a Node.js service and we’ll use the Nest framework since it uses similar techniques to Angular — use of modules, providers, etc. and controllers in place of components.

We need to begin by adding Nest capabilities to the workspace by running the following command on the terminal …

… followed by generating a Nest application called ocean (since I miss being on beach vacation these days).

This time we don’t need to wait really much until CLI finishes the job and generates our first Nest application, located in apps/ocean directory.

Consuming the API

First of all, we need a small change at the Nest application since we have to enable CORS mechanism in order to allow the ocean service to be requested from frontend domain.

  • nodejs/apps/ocean/src/main.ts

Later on, we need to send a get request from the frontend app to ocean service, and then write the result on the home page.

Here are the changes on the frontend app.

  • nodejs/apps/ocean/src/app/app.module.ts
  • nodejs/apps/ocean/src/app/app.component.ts
  • nodejs/apps/ocean/src/app/app.component.spec.ts
  • nodejs/apps/ocean/src/app/app.component.html

Docker Compose configuration

We need to update the Docker Compose configuration since we have to use two more Docker containers for the frontend and ocean apps.

  • docker-compose.yml
  • docker-compose.test.yml

Put it all together

If you followed everything correctly, you may run the tests by using make test, and run the containers for all the Go services and newly added Node.js apps by using make start.

And then start the application by navigating to http://localhost:8000.

Angular app consuming the API

You can compare the payload by sending a get request to http://localhost:8003/api to check everything works as expected.

Nest app on port 8003

Voila! They’re identical, and we finally managed to add an Angular app and a Nest app to our monorepo, consume the API and to dockerize them.

Wrapping it up

Things were very lean and even more straightforward on this second part. I had to skip several steps such as consuming the Go services calypso and echo, configuring their CORS, etc. but the idea is the same.

My aim was to keep the focus on step-by-step explaining how to organize that polyglot group of projects and use Docker Compose to orchestrate them.

Meanwhile, keep in mind that this fullstack-monorepo project is currently (yeah, still) very much WIP and still more is underway. I created this tag to keep the point where we are with everything explained in this article.

Next steps

  • Faster (incremental) builds and and tests using a dependency graph
  • Deploying on Kubernetes

Burak Tasci (fulls1z3)
https://www.linkedin.com/in/buraktasci
http://stackoverflow.com/users/7047325/burak-tasci
https://github.com/fulls1z3

Burak Tasci

In depth articles about software technologies

Burak Tasci

Written by

Full-stack software engineer and enthusiastic power-lifter

Burak Tasci

In depth articles about software technologies

More From Medium

More on Monorepo from Burak Tasci

More on Monorepo from Burak Tasci

Full-stack monorepo - Part I: Go services

Jan 4 · 7 min read

39

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade