Introduction to Nest and Installation

Introduction to Nest

Nest (NestJS) is a framework for building efficient, scalable Node.js server-side applications (https://docs.nestjs.com/). It uses JavaScript, is built with and fully supports TypeScript. It combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming). Under the hood, Nest makes use of robust HTTP Server frameworks like Express (https://expressjs.com/).

Nest vs Angular, React, and Vue

The main difference between Nest and Angular, React, and Vue is that Nest is used to develop server-side applications, while Angular, React, and Vue are used to develop front-end applications.

Nest vs Express

Both Nest and Express are used to develop server-side applications. The main difference is that Express is a minimalist framework which does not provide a predefined architecture. Instead, Nest provides an out-of-the-box application architecture which allows developers and teams to create highly testable, scalable, loosely coupled, and easily maintainable applications. The Nest architecture is heavily inspired by Angular.

Nest v8

When writing this book, the latest version is Nest 8 which we will use to build our Online Store application.

Note: A new Nest version might be available at the time you are reading this book. We recommend you continue using Nest 8 for this project. Once you complete this book, you can upgrade to the latest Nest version. In this way, most of the code will remain reusable. Some others might require minor adjustments.

Requirements (Node.js and npm)

To create Nest applications, we need to install Node.js and npm.

Node.js

Node.js is a free, open-source server environment. Node.js uses JavaScript on the server. Node.js represents a "JavaScript everywhere" paradigm, unifying web application development around a single programming language, rather than different languages for server-side and client-side scripts.

If you don’t have Node.js installed, go to https://nodejs.org/en/download/. Download and install it. Once Node.js is installed, go to the Terminal, and execute the following command.

Execute in Terminal

node -v

If the installation was successful, you would see a result as presented in Fig 3-1.

npm

npm is a package manager for Node.js. It consists of a command line client, called npm, and an online database of public and paid-for private packages, called the npm registry. With npm, you can declare the libraries your project depends on, and it will manage (install/update) them for you.

The Node.js installer already includes the npm package manager. So, we already have npm. Go to the Terminal and execute the following command.

Execute in Terminal

npm -v

You would see a result as presented in Fig 3-2.

Create a new Nest project

There are a couple of ways of creating Nest projects. We will use the Nest CLI in this book. The Nest CLI is a command-line interface tool that helps you initialize, develop, and maintain your Nest applications. To install the Nest CLI, go to the Terminal, and execute the following command.

Execute in Terminal

npm install -g @nestjs/cli

To create a Nest project, open your Terminal, and in a location of your choice, execute the following command.

Execute in Terminal

nest new online-store

You will be asked “Which package manager would you like to use?” -> Select “npm” and press “Enter”.

The previous command creates a new Nest project inside the online-store folder. Next, in your Terminal, move to the online-store folder, and run the application with the following commands

Execute in Terminal

cd online-store

npm run start

The npm run start command executes a script command defined in the package.json file. This script executes nest start which launches the server (see Fig. 3-3).

If the installation and setup were successful, open your browser at http://localhost:3000/ and you should see a hello-world message as shown in Fig. 3-4.

Note: you can stop the server with Ctrl + C (on Windows), or Cmd + C (on Mac).

Nest project structure

Fig. 3-5 shows the Nest project structure. We will not explain all the folders and files since we want to start developing our web applications quickly. We will explain some of the more important ones. The others will be covered in upcoming chapters.

• dist/*: The /dist folder stands for distributable. The /dist folder contains the compiled version of the source code. It is the code used in production. We will see how to generate the application’s production code later.
• node_modules/*: The /node_modules folder contains all libraries downloaded from npm. The libraries/dependencies are listed in the package.json file. When we create a Nest project, internally, Nest uses npm to download and install all required libraries in the /node_modules folder.
• src/*: Nest projects contain a src/ folder populated with several core files.
• src/main.ts: This is the entry file of the application. It uses the core function NestFactory to create a Nest application instance. The main.ts includes an async function, which bootstraps our application.
• src/app.controller.spec.ts: Stores the unit tests for the app controller. We won’t design unit tests in this book since it is out of the book’s scope.
• src/app.module.ts: The root module of the application.
• src/app.controller.ts: A basic app controller with a single route.
• src/app.service.ts: A basic app service with a single method.
• test/*: The /test folder is used to define the application’s end-to-end tests. Again, we won’t use it since it is out of the book’s scope.
• package.json: It holds metadata relevant to the project and is used for managing the project’s dependencies, scripts, version and many more.
• tsconfig.json: It contains the TypeScript compiler configuration for our app.

As you can see, several files with different functionalities are used in the construction of Nest applications. For now, we will remove and modify some of those files to make our learning process more manageable. Later, we will

re-create some of those files again.

Simplified Hello-World

Let’s make some changes to simplify our initial project to make it easier to understand.

src/app.controller.spec.ts and src/app.service.ts

We won’t use Nest services yet, so we delete the app.service.ts file. We will also remove the unit tests for the app controller by deleting the app.controller.spec.ts file.

src/app.controller.ts

In src/app.controller.ts , remove the AppService import, remove the constructor , and replace the getHello return with the following in bold.

We removed everything related to the app service (since we removed the app.service.ts file). Instead of using the AppService , we returned a simple “Hello World!” text. We wrapped this text around a “b” tag. This is an HTML tag which displays our text in bold. As you can see, we have some Nest annotations (i.e., @Get and @Controller ), and some methods. We will explain them in upcoming chapters.

For now, know that the main app route (http://localhost:3000/) will invoke the getHello method which returns the “Hello World!” text.

src/app.module.ts

In src/app.module.ts , remove the AppService import and also the providers parameter.

We will explain Nest Modules in upcoming chapters.

Running the app

In the Terminal, stop the server with Ctrl + C (on Windows), or Cmd + C (on Mac), and execute the following command.

Execute in Terminal

npm run start:dev

The npm run start:dev launches the server and watches your files. It rebuilds the app as you make changes to those files. This is the command that we will use from now. Otherwise, we will need to stop and start the server each time we have a code change.

Now, you can check the “Hello World!” message in bold (see Fig. 3-6)

In the next chapter, we will include the view layer to our application to avoid defining our HTML code inside our controllers, i.e.:

Analyze Code

getHello(): string {

return '<b>Hello World!</b>';

}

See Next Article Nest JS ....