Introduction to NestJs with Nx Monorepo

February 09, 2020

Monorepo is a very common pattern to share dependencies among different projects.
In this article, we will be creating an Nx monorepo to create a project in Angular with Nest.Js as backend.

nestjs and nx monorepo tutorial, Javascript tutorial


Installing the dependencies

We will begin by installing the @nrwl/schematics package for creating an Nx monorepo. We will also install NestJs CLI globally.

npm i -g @nrwl/schematics
npm i -g @nestjs/cli

Creating the project

To create a project, simply run the command

npx create-nx-workspace myapp

Running the command will ask for selecting the presets. In this article, we will be focusing on creating an Angular application with NestJs as a backend.


Select angular-nest and press Enter.

In the next step, enter the Angular application name and select the CSS engine(CSS/Sass/Less).


This will create an Nx monorepo boilerplate with NestJs and Angular.


Following is the folder structure of the application created.

/apps folder contains all of the apps(NestJs, Angular, e2e test cases).

/apps/myapp
is the Angular application.

/apps/api
is the NestJs API backend.

/libs
contains all libraries shared between different projects(frontend and backend)

/node_modules
folder is at the root of the project and is shared by all the projects in the /apps folder.

Beginning with NestJs

Node.Js Express framework is a very popular choice when it comes to creating an application with Node.Js. But Express is very raw. There are no strict paradigms to follow. Having no paradigms makes it a little difficult from an understandability perspective.

Developers (like me) coming from a C# or Java background initially feel discomfort when switching to the Express Node framework.

Nest.Js is a framework that provides a strict paradigm to the JavaScript developers.

Nest.Js Similarity with Angular

If you have worked with Angular, you must be knowing how Angular provides a strict paradigm to be followed, be it Angular modules, services, or components.

Nest.Js is almost taking that Angular's strict paradigm to the Node.Js side along with the advantage of using TypeScript. Using TypeScript over JavaScript also helps developers staying away from typos and also lets them make use of code editor's intelligent suggestions. 

Nest.Js folder Structure

NestJs follows a really close folder structure as that of Angular. The /apps/api folder is the NestJs backend.

A NestJs backend is divided into different modules.

A module has controllers that handle the requests and responses.

A module also has Services that handles the business logic.

The main.ts file is the first file to load a NestJs application. The main.ts file looks like:


As seen in the file, AppModule is the first module that will be loaded by the main.ts file.

The app.module.ts file also looks similar to an Angular's module.


Creating a ToDo's module in NestJs

We will be using the Angular CLI to create Angular as well as NestJs stuff like modules, controllers, etc.

Creating the module

To create a ToDos module, we run the command

ng g @nestjs/schematics:module todos --path app --source-root apps/api/src

Considering the terminal to be at the project's root,

 - -source-root apps/api/src defines the location to the NestJs src folder

 -- path app defines the module in which the ToDo module is to be imported

PRO TIP: 

 DRY RUN YOUR COMMANDS: 
To check if the command will execute or not, simply add a -d flag at the end of the command that will dry run the command. Dry Running means the actual files will not be created/updated, instead only the output of running the command will be shown to the user.


The actual files will only be created after we remove the -d flag from the end.

Running the command creates the todos module and also updates the app.module.ts file.





Now that we have created the Todos module, we now need to create a Todos controller for handling requests and a service for manipulating todos listing.

. . .

For keeping this article precise, I will write another article that continues it further.
Keep watching for next article... :)

You Might Also Like

0 comments