Forem: NextjsVietnam

NestJS Course Lesson 05 - Repository Pattern

NextjsVietnam — Tue, 25 Jul 2023 04:01:22 +0000

Lession 05 Source Code

Lesson 05

A brief introduction to the repository pattern
Introduction to dependency injection in NestJS
Refactor the PetCategory code applying the repository pattern

Brief introduction to repository pattern

In the previous post, you can see the following diagram in the MVC pattern

The controller uses the ORM's Model directly to execute queries to the database.
This design will expose the following weaknesses:

Reusability of queries: since it is located directly in the controller, it is almost impossible to reuse and share between different controllers.
Increasing the complexity of the controller, the more complex queries, the bigger the controller.
Unit Test implementation becomes difficult, because the database query part is mixed into the controller's code

To solve this problem, you should divide the code into different layers. The aim is to help increase the scalability and maintainability of the project.

That's why the Repository Pattern is applied. To the definition of

Repository is a class born to do the task of performing queries to the database.

Because of the above characteristics, it only performs a single task, which is querying the database. Complex queries are encapsulated in this class. As a result, the 3 problems mentioned above will be thoroughly solved.

You can read more about Repository in this article about Domain Driven Design.

Here, let's apply the above definition to practice with NestJS.
In the previous post, the Model got them directly in the Controller as follows

const petCategories = await PetCategory.findAll();
await PetCategory.destroy({ where: { id } });
const newPetCategory = await PetCategory.create({ ...object });
const petCategory = await PetCategory.findByPk(id);
await petCategory.update(object);

// src\pet\repositories\pet-category.repository.ts
import { Injectable } from "@nestjs/common";
import { PetCategory } from "../models/pet-category.model";

@Injectable()
export class PetCategoryRepository {
   findAll() {
     return PetCategory.findAll();
   }
}

// src/pet/pet.module.ts

import { Module } from "@nestjs/common";
import { PetController } from "./controllers/pet.controller";
import { ManagePetController } from "./controllers/admin/manage-pet.controller";
import { ManagePetCategoryController } from "./controllers/admin/manage-pet-category.controller";
import { ManagePetAttributeController } from "./controllers/admin/manage-pet-attribute.controller";
import { nestjsFormDataModule } from "nestjs-form-data";
import { PetCategoryRepository } from "./repositories/pet-category.repository";
@Module({
   imports: [NestjsFormDataModule],
   controllers: [
     PetController,
     ManagePetController,
     ManagePetCategoryController,
     ManagePetAttributeController,
   ],
   // registered providers
   providers: [PetCategoryRepository],
})
export class PetModule {}

@Controller("admin/pet-categories")
export class ManagePetCategoryController {
   constructor(private petCategoryRepository: PetCategoryRepository) {}
   @Get("")
   @Render("pet/admin/manage-pet-category/list")
   async getList() {
     const petCategories = await this.petCategoryRepository.findAll();
     return {
       petCategories,
     };
   }
   // ...
}

Brief introduction to dependency injection

Note in the above 3 code snippets, to use the repository, as you can see, you need to do 3 things:

Declare the repository as an Injectable type
Declare the repository for the Providers list of the module
Inject the repository into the constructor of the controller you want to use

If you are unfamiliar with the above concepts, please learn more details in the article about NestJS Provider.

To put it simply, when you want to use a class in a module, instead of having to automatically initialize each time you use it, this will inadvertently cause this class to be initialized too many times unnecessarily. As well as writing code will become quite confusing.

Instead, if you apply the Dependency Injection pattern, you can easily solve this problem. Example of how dependency injection solves the above problem.

import "reflect-metadata";
import { injectable, inject, container } from "tsyringe";

type ID = string | number;
interface Repository<T> {
   findOne(id: ID): T;
}
interface CrudService<Model> {
   findOne(id: ID): Model;
}

class User {
   id!: ID;
   firstName!: string;
   lastName!: string;
   constructor(payload: Partial<User>) {
     Object.assign(this, payload);
   }
}

class Role {
   id!: ID;
   name!: string;
   permissions: string[] = [];
   constructor(payload: Partial<Role>) {
     Object.assign(this, payload);
   }
}

class UserRepository implements Repository<User> {
   findOne(id: ID): User {
     const user = new User({
       id,
       firstName: "Typescript",
       lastName: "Master Class",
     });
     return user;
   }
}

class RoleRepository implements Repository<Role> {
   findOne(id: ID): Role {
     const role = new Role({
       id,
       name: "Admin",
       permissions: ["CreateUser", "EditUser", "RetrieveUser", "DeleteUser"],
     });
     return role;
   }
}

abstract class BaseService<M, R extends Repository<M>>
   implements CrudService<M>
{
   constructor(private repository: R) {}
   findOne(id: ID): M {
     return this.repository.findOne(id);
   }
}

@injectable()
class UserService extends BaseService<User, UserRepository> {
   constructor(
     @inject(UserRepository.name) userRepository: UserRepository,
     @inject(RoleRepository.name) private roleRepository: RoleRepository
   ) {
     super(userRepository);
   }

   retrievePermission(user: User) {
     return this.roleRepository.findOne(user.id);
   }
}

const main = () => {
   container.register("UserRepository", {
     useClass: UserRepository,
   });
   container.register("RoleRepository", {
     useClass: RoleRepository,
   });
   const userService = container.resolve(UserService);
   const user = userService.findOne(1);
   const permissions = userService.retrievePermission(user);
   console.log(user, permissions);
};

main();

In the code illustrated above, you can clearly see, the service will depend on the repository. However, the initialization of the repository will be delegated. To better understand this pattern, you can learn in detail through the article Learn Enough Oop to Be Dangerous

Thus, it can be seen that when working with NestJS, creating a class and embedding another class to use is quite simple, isn't it.

In addition to creating a repository actively as above, in the nestjs ecosystem, you can use the following way. Use the model itself as a repository

Create provider using custom token and useValue

The reason is that this repository will use the static methods of the model. So initializing this dependency will use the Model itself as the value.

import { PetCategory } from "../models/pet-category.model";

export const PetCategoryInjectionKey = "Pet_Category";
export const PetCategoryProvider = {
   provide: PetCategoryInjectionKey,
   useValue: PetCategory,
};

// src/pet/pet.module.ts

import { Module } from "@nestjs/common";
import { PetController } from "./controllers/pet.controller";
import { ManagePetController } from "./controllers/admin/manage-pet.controller";
import { ManagePetCategoryController } from "./controllers/admin/manage-pet-category.controller";
import { ManagePetAttributeController } from "./controllers/admin/manage-pet-attribute.controller";
import { nestjsFormDataModule } from "nestjs-form-data";
import { PetCategoryRepository } from "./repositories/pet-category.repository";
import { PetCategoryProvider } from "./providers/pet-category.provider";
@Module({
   imports: [NestjsFormDataModule],
   controllers: [
     PetController,
     ManagePetController,
     ManagePetCategoryController,
     ManagePetAttributeController,
   ],
   providers: [PetCategoryRepository, PetCategoryProvider],
})
export class PetModule {}

import { PetCategoryInjectionKey } from './../../providers/pet-category.provider';
import {
   Body,
   controller,
   Get,
   render,
   Inject,
} from '@nestjs/common';
@Controller('admin/pet-categories')
export class ManagePetCategoryController {
   constructor(
     @Inject(PetCategoryInjectionKey)
     private defaultPetCategoryRepository: typeof PetCategory,
   ) {}
   @Get('')
   @Render('pet/admin/manage-pet-category/list')
   async getList() {
     const petCategories = await this.defaultPetCategoryRepository.findAll();
     return {
       petCategories,
     };
   }

However, method #2 does not completely solve the problem like method #1, although it seems that an additional class repository appears when used in a controller. But writing the query will still be entirely in the controller.
Although it looks like the controller and model will be more independent, the essence of the problem is still not solved.
Therefore, when applied in real projects, you should choose method 1, because there will be many cases where complex queries are needed, instead of just CRUD.

Refactor code for Pet Website application

In this section, you will practice separating code into separate classes, to ensure that the application's code base has a consistent, coherent structure, and has a logical separation that helps the code base become:

Easy to maintain
Easy to test
Easy to add new/change

In the above model, the components are defined as follows:

DTO : data transfer object

Request DTO

This part is the data received from the client

Response DTO

This part is the data after a process of processing through different steps that will be bound to the View section

Controller

This part is the part that receives data from the client side and performs the next steps in the process. Responsible for connecting to the service to get the ResponseDTO and read the template from the View and render the final result to the user.

Service

This part is responsible for receiving data from the Controller and executing the business logic. Including: checking input data, transforming data if necessary, connecting with other services to perform processing operations, connecting to corresponding repositories to interact with the stored data layer. The goal is to provide aggregated data after business execution for the Controller

Entity

The main business object, including the properties that represent the object in the application

Model

Object mapping of data stored in the database.

Usually, it is possible to use the same class for both Entity and Model because these two objects are quite similar.

Repository

This middle class is responsible for performing queries to the database

Following the above structure, please refactor the code of Pet Website.

Feel free to read full article about NestJS Course Lesson 05 - Repository Pattern

khóa học nestjs, khoa hoc nestjs, nextjs vietnam, [nestjs tips and tricks)[https://nextjsvietnam.com/]

ReactJS Course - Lesson 03 - Props and States

NextjsVietnam — Fri, 21 Jul 2023 11:21:34 +0000

Note: All source code for this course is publicly available on github at ReactJS Tutorial 2023

Lesson 03

Learn the theory of props, state, hooks and illustration
Learn the theory of how to organize data structures in applications and illustrate
Summary

In the previous article, you have learned the structure of a ReactJS application which is a combination of components.

Learn about props, state, hooks through examples

Design button "New Link" and LinkFormComponent

Install bootstrap
Handle Event when pressing "New Link" button will open Modal without input form for new link
In the input form for the new link, it is required to enter the link, the title part if the user leaves it blank, use the entered link as the title.
When clicking Close/Esc will close the modal. When reopening the Modal for New Link, the form data must be empty.
When you click Save Changes in the main screen, it will display the JSON format of the added links.

Using bootstrap

npm install bootstrap sass --save

index.html

<!DOCTYPE html>
<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>%VITE_APP_NAME% - %MODE%</title>
   </head>
   <body>
     <div id="root" class="container"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
</html>

main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
// Bootstrap Bundle JS
import "bootstrap/dist/js/bootstrap.bundle.min";
// reset css
import "./index.scss";

ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
);

index.scss

$primary: #176d16;
$danger: #ff4136;

@import "node_modules/bootstrap/scss/bootstrap";

Event Handler in ReactJS

<a
   href="https://nextjsvietnam.com"
   className="btn btn-primary"
   onClick={(e) => {
     e.preventDefault();
     alert(`You're going to redirect to ${e.target.href}`);
   }}
>
   Event Handler
</a>

Props

In ReactJS, components often use props to communicate with each other. Parent components will usually pass data to child components via props. In addition, props also includes HTML attributes, values in Javascript such as: objects, arrays, including functions.

import { useState } from "react";
import enviroment from "./shared/environment";

const Counter = ({ number, children, ...props }) => {
   return (
     <>
       <a {...props}>
         Counter Name:{children}
         <br />
         Value: {number}
       </a>
     </>
   );
};

const Lesson003 = () => {
   const values = [1, 2, 3, 4, 5, 6, 7, 8, 9];
   return (
     <>
       {values.map((v, index) => (
         <Counter key={index} number={v} className="btn btn-primary">
           Counter {index + 1}
         </Counter>
       ))}
     </>
   );
};

export default Lesson003;

There are 3 points to keep in mind here when using props:

All attributes passed as attributes of a tag/component are included in props. However, use the spread operator to select certain properties, this makes it easy for the editor to assist you in the coding process.
In the above example you will see the appearance of chidren, this keyword means that the content inside the 2 opening and closing tags of the component will be assigned to the prop with the key children.
Props are readonly, never try to change the value of props (immutable). Always use the underlying state when a variable type is needed to change the value each time the user interacts.

One note, when rendering a list in ReactJS, we will see the following error appear on the console.

The reason is that in the design of ReactJS, in order to optimize rendering and DOM updates, when rendering a list of items, assigning a unique key to each element in the array, will help ReactJS optimize rendering when an item is added/removed/updated.

State

It is essentially the component's memory, representing the current state of the component and will change when the user interacts with the component

Consider the following example

import enviroment from "./shared/environment";

const Lesson003 = () => {
   let counter = 1;
   console.log("Before render");
   return (
     <>
       <h2>State and Event</h2>
       <h3>Counter: {counter}</h3>
       <button
         type="button"
         className="btn btn-primary"
         onClick={(e) => {
           e.preventDefault();
           console.log(`Increase counter from ${counter} to ${counter + 1}`);
           counter += 1;
           console.log("After counter increased!", counter);
         }}
       >
         Increase counter
       </button>
     </>
   );
};

export default Lesson003;

As we have seen, the event handler is very similar to handling an event on the DOM, just a little different in syntax, is that instead of calling the function immediately, in JSX you need to assign an event to a function. This function can be an anonymous function as in the example, or a previously declared function.

<button onclick="myFunction()">Click me</button>

Looking at the above code, you will think, when the counter variable changes, on the screen now, you will see its new value. However, keep an eye on the console.log and the results of each click of the Increase counter button.

The expected result is that after each counter mutate, console.log will record an extra line of "Before render". And the counter on the interface will also be updated.

The answer is, React Component has no reason to re-render, it just re-renders if and only when state changes. Below is the syntax to declare and use state in ReactJS.

import { useState } from "react";
import enviroment from "./shared/environment";

const Lesson003 = () => {
   const [counter, setCounter] = useState(0);
   console.log("Before render, counter:", counter);
   return (
     <>
       <h2>State and Event</h2>
       <h3>Counter: {counter}</h3>
       <button
         type="button"
         className="btn btn-primary"
         onClick={(e) => {
           e.preventDefault();
           console.log(`Increase counter from ${counter} to ${counter + 1}`);
           setCounter(counter + 1);
           console.log("After counter increased!", counter);
         }}
       >
         Increase counter
       </button>
     </>
   );
};

export default Lesson003;

After rewriting the original code, using the syntax in React to declare and update the state. We notice three things:

The state cannot be updated directly, only the provided setState function can be used.
When the setState function is called, the value of state does not change immediately.
After the Component is re-rendered, we will see the new value of the state.
If the state is an object, it should be noted that the new value of the state must form a new object, then React will recognize the changed state and re-render (because the object in javascript is always referenced to a fixed address at initialization and during the value change process, this reference address remains unchanged).

Suppose, we call the state update function consecutively, what will happen:

import { useState } from "react";
import enviroment from "./shared/environment";

const Lesson003 = () => {
   const [counter, setCounter] = useState(0);
   console.log("Before render, counter:", counter);
   return (
     <>
       <h2>State and Event</h2>
       <h3>Counter: {counter}</h3>
       <button
         type="button"
         className="btn btn-primary"
         onClick={(e) => {
           e.preventDefault();
           console.log(`Increase counter from ${counter} to ${counter + 1}`);
           setCounter(counter + 1);
           setCounter(counter + 2);
           setCounter(counter + 3);
           console.log("After counter increased!", counter);
         }}
       >
         Increase counter
       </button>
     </>
   );
};

export default Lesson003;

Maybe 6 or so? As a result, only setCounter(counter+3) is executed.

Explanation: In an event, when the state update happens, ReactJS will collect these updates and execute it once, at this time the state counter will be a fixed value in each update event, so even though the previous state update events of +1,+2 are performed, but at step number +3, the counter value is still taken from the original value, so the result will be as we have seen.
Let's test updating 2 separate states in the same event and check how many times ReactJS will render.

import { useState } from "react";
import enviroment from "./shared/environment";

const Lesson003 = () => {
   const [counter, setCounter] = useState(0);
   const [counter2, setCounter2] = useState(1);
   console.log("Before render, counter:", counter, "counter2:", counter2);
   return (
     <>
       <h2>State and Event</h2>
       <h3>Counter: {counter}</h3>
       <h3>Counter2: {counter2}</h3>
       <button
         type="button"
         className="btn btn-primary"
         onClick={(e) => {
           e.preventDefault();
           console.log(`Increase counter from ${counter} to ${counter + 2}`);
           console.log(`Increase counter from ${counter2} to ${counter2 + 3}`);
           setCounter(counter + 2);
           setCounter2(counter2 + 3);
         }}
       >
         Increase counter
       </button>
     </>
   );
};

export default Lesson003;

If instead of using state value directly in component, and update state using callback function like below

import { useState } from "react";
import enviroment from "./shared/environment";

const Lesson003 = () => {
   const [counter, setCounter] = useState(0);
   const [counter2, setCounter2] = useState(1);
   console.log("Before render, counter:", counter, "counter2:", counter2);
   return (
     <>
       <h2>State and Event</h2>
       <h3>Counter: {counter}</h3>
       <h3>Counter2: {counter2}</h3>
       <button
         type="button"
         className="btn btn-primary"
         onClick={(e) => {
           e.preventDefault();
           console.log(`Increase counter from ${counter} to ${counter + 2}`);
           console.log(`Increase counter from ${counter2} to ${counter2 + 3}`);
           setCounter((counter) => counter + 2);
           setCounter((counter) => counter + 4);
           setCounter2((counter2) => counter2 + 3);
         }}
       >
         Increase counter
       </button>
     </>
   );
};

export default Lesson003;

The results are exactly as described.

Further testing with setTimeOut,

import { useState } from "react";
import enviroment from "./shared/environment";

const Lesson003 = () => {
   const [counter, setCounter] = useState(0);
   const [counter2, setCounter2] = useState(1);
   console.log("Before render, counter:", counter, "counter2:", counter2);
   return (
     <>
       <h2>State and Event</h2>
       <h3>Counter: {counter}</h3>
       <h3>Counter2: {counter2}</h3>
       <button
         type="button"
         className="btn btn-primary"
         onClick={(e) => {
           e.preventDefault();
           console.log(`Increase counter from ${counter} to ${counter + 2}`);
           console.log(`Increase counter from ${counter2} to ${counter2 + 3}`);
           setCounter((counter) => counter + 2);
           setCounter((counter) => counter + 4);
           setTimeout(() => {
             setCounter((counter) => counter + 6);
           }, 0);
           setCounter2((counter2) => counter2 + 3);
         }}
       >
         Increase counter
       </button>
     </>
   );
};

export default Lesson003;

As a result, we have 2 renders, because the update of state counter + 6 takes place in another process.

Same test with object for statestate

import { useState } from "react";
import enviroment from "./shared/environment";

const Lesson003 = () => {
   const [stateObject, setStateObject] = useState({
     a: {
       b: {
         c: 1,
       },
     },
   });
   console.log("Before render, stateObject.a.b.c:", stateObject.a.b.c);
   return (
     <>
       <h2>State and Event</h2>
       <h3>StateObject: {JSON.stringify(stateObject)}</h3>
       <button
         type="button"
         className="btn btn-primary"
         onClick={(e) => {
           e.preventDefault();
           setStateObject((obj) => {
             console.log(obj.a.b.c, "obj === stateObject", obj === stateObject);
             obj.a.b.c += 1;
             return obj;
           });
         }}
       >
         Increase counter
       </button>
     </>
   );
};

export default Lesson003;

As a result, even though we see the value of c has changed, in fact the UI still does not re-render.

Therefore, mutating the object directly and the resulting change still refer to the same object, will make the React Component not aware that it will have to re-render, because it performs the comparison between the two objects.
Therefore, it is imperative that you do not change this object directly, but rather create an object consisting of the values of the old object mixed with the new changed value.

import { useState } from "react";
import enviroment from "./shared/environment";

const Lesson003 = () => {
   const [stateObject, setStateObject] = useState({
     a: {
       b: {
         c: 1,
       },
     },
   });
   console.log("Before render, stateObject.a.b.c:", stateObject.a.b.c);
   return (
     <>
       <h2>State and Event</h2>
       <h3>StateObject: {JSON.stringify(stateObject)}</h3>
       <button
         type="button"
         className="btn btn-primary"
         onClick={(e) => {
           e.preventDefault();
           setStateObject((obj) => {
             console.log(obj.a.b.c, "obj === stateObject", obj === stateObject);
             return {
               ...obj,
               a: {
                 b: {
                   c: obj.a.b.c + 1,
                 },
               },
             };
           });
         }}
       >
         Increase counter
       </button>
     </>
   );
};

export default Lesson003;

Now both on the UI, and on the console, the value of c is updated accordingly.

How to get the value of form input

import { useState } from "react";

const Lesson003 = () => {
   const [input, setInput] = useState("");
   const [items, setItems] = useState([]);

   return (
     <>
       <h2>State Array</h2>
       <div className="mb-3">
         <label htmlFor="exampleFormControlInput1" className="form-label">
           Item name
         </label>
         <input
           value={input}
           onChange={(e) => {
             setInput(e.target.value);
           }}
           type="email"
           className="form-control"
           id="exampleFormControlInput1"
           placeholder="name"
         />
       </div>
       <button
         type="button"
         className="btn btn-primary"
         onClick={(e) => {
           e.preventDefault();
           setItems((items) => {
             return [...items, input];
           });
         }}
       >
         Add new item
       </button>
       <ul>
         {items.map((item, index) => (
           <li key={index}>{item}</li>
         ))}
       </ul>
     </>
   );
};

export default Lesson003;

So we can see that by using state, and the onChange event, you will be able to synchronize the user input and the state of this input. Thanks to the mechanism of ReactJS, in the picture you only see the re-rendered part is the content of the input, not the whole, which makes the application so smooth.

Let's try with state as array

<button
   type="button"
   className="btn btn-primary"
   onClick={(e) => {
     e.preventDefault();
     setItems((items) => {
       return [...items, input];
     });
   }}
>
   Add new item
</button>

Through the above examples, we can conclude the following:

However, the above way of writing makes the code look quite complicated and difficult to maintain. You can use the immutable library to still ensure the immutable state of the state, but when you write the code, it looks like it's mutating.

npm install use-immer --save

import { useState } from "react";
import { useImmer } from "use-immer";

const Lesson003 = () => {
   const [input, setInput] = useState("");
   const [items, setItems] = useImmer([]);

   return (
     <>
       <h2>State Array</h2>
       <div className="mb-3">
         <label htmlFor="exampleFormControlInput1" className="form-label">
           Item name
         </label>
         <input
           value={input}
           onChange={(e) => {
             setInput(e.target.value);
           }}
           type="email"
           className="form-control"
           id="exampleFormControlInput1"
           placeholder="name"
         />
       </div>
       <button
         type="button"
         className="btn btn-primary"
         onClick={(e) => {
           e.preventDefault();
           setItems((items) => {
             items.push(input);
           });
         }}
       >
         Add new item
       </button>
       <ul>
         {items.map((item, index) => (
           <li key={index}>{item}</li>
         ))}
       </ul>
     </>
   );
};

export default Lesson003;

This new code looks much cleaner, doesn't it?

The process of rendering a ReactJS Component will proceed as follows:

Trigger -> Render -> Commit

Trigger:

When the application is initialized at this step, ReactJS will embed the application in the DOM node root, and call the render method of the components.
Re-render: every time the component updates its state, it will re-render itself, which leads to its children components re-rendering as well.

Render:

As mentioned above, when the application initializes, React will call the root component to perform the rendering.

For the next time, React will actually call the function components whose state update triggers this rendering.

Commit:

When the application initializes, after the root component renders successfully, React will now append all the generated DOM nodes to the DOM tree.
For subsequent iterations, React will do the comparison and only update the DOM tree if there is actually a change.

So you have an overview of state, props in ReactJS and how ReactJS re-renders components when state changes.

Practice building a link management application

Application requirements

In real application, we need to solve more conundrums. Within the scope of this lesson, we seek to answer the following questions.

Suppose, you have to build a small application, to manage a list of links.
Each link can be: Website Link, Image(png/jpg/jpeg), Youtube Link.

The application will include a single screen, adding and editing tasks will open a modal that allows the user to enter/change information, after saving, the information in the list will be updated.

Main features of the application include:

Add, Edit, Delete Link
Display links in 3 formats: website (link form with entered title, if title is blank, use link), image (image format with entered title, if blank, use link), youtube link (iframe with embed link)
Store application information on the user's machine, so that when the application is closed and reopened, the saved information still exists.

Interface requirements are as follows

Home screen

Modal add, edit

Feel free to read full course at ReactJS Course 2023

From Khóa Học ReactJS

NestJS Course Lesson 04 - Model and Repository Pattern

NextjsVietnam — Wed, 05 Jul 2023 01:48:28 +0000

Source Code

Lession 04 Source Code

Lesson 04

Brief introduction to one of popular ORM - Sequelize
Learn about the ActiveRecord Pattern
How to create database schema with Sequelize in NestJS
How to add seeding data with Sequelize in NestJS

1. Configure NestJS to work with MySQL via Sequelize

First you need to create the database first
Database name : nestjs_tutorial_2023

CREATE DATABASE `nestjs_tutorial_2023` CHARACTER SET 'utf8mb4' COLLATE 'utf8mb4_bin';

Connect to MYSQL using Sequelize
Connect to PostgreSQL using TypeORM
Connect to MongoDB using Mongoose

1.1. Connect to MYSQL using Sequelize

Install packages

npm install --save @nestjs/sequelize sequelize sequelize-typescript mysql2
npm install --save-dev @types/sequelize
npm install --save-dev sequelize-cli
npx sequelize-cli init

In this part, I would like to introduce to you 3 main steps to work with databases:

[x] Establish connection
[x] Declare model
[x] Database migration directory structure - initialize, update database schema

Set up connection

// src/app.module.ts

import { Module } from "@nestjs/common";
import { ServeStaticModule } from "@nestjs/serve-static";
import { join } from "path";
import { PetModule } from "./pet/pet.module";
import { SequelizeModule } from "@nestjs/sequelize";

@Module({
   imports: [
     // public folder
     ServeStaticModule.forRoot({
       rootPath: join(process.cwd(), "public"),
       serveRoot: "/public",
     }),
     PetModule,
     SequelizeModule.forRoot({
       dialect: "mysql",
       host: "localhost",
       port: 3306,
       username: "root",
       password: "123456",
       database: "nestjs_tutorial_2023",
       models: [],
     }),
   ],
   providers: [],
})
export class AppModule {}

Model declaration

Model in ORM:

It is the mapping of an entity in the database, through the ORM we only need to work with the methods of the Model, the rest are SQL/NoSQL statements that will be handled by the ORM. The advantage is that programming becomes easier and more consistent. The downside is that sometimes some queries will be slow and difficult to implement complex queries. However, in that case ORM still supports them to perform traditional SQL/NoSQL queries.

"use strict";

import { PetCategory } from "src/pet/models/pet-category.model";

/** @type {import('sequelize-cli').Migration} */

module.exports = {
   async up(queryInterface, Sequelize) {
     /**
      * Add altering commands here.
      *
      * Example:
      * await queryInterface.createTable('users', { id: Sequelize.INTEGER });
      */
     await queryInterface.createTable("pet_categories", {
       id: {
         type: Sequelize.UUID,
         defaultValue: Sequelize.UUIDV4,
         primaryKey: true,
       },
       name: {
         type: Sequelize.STRING(60),
         allowNull: false,
       },
       createAt: {
         type: Sequelize.DATE,
         defaultValue: Sequelize.fn("NOW"),
       },
       updatedAt: {
         type: Sequelize.DATE,
         defaultValue: Sequelize.fn("NOW"),
       },
     });
   },

   async down(queryInterface, Sequelize) {
     /**
      * Add reverting commands here.
      *
      * Example:
      * await queryInterface.dropTable('users');
      */
     await queryInterface.dropTable("pet_categories");
   },
};

Adjust the config to use the model and use the database uri

// src/app.module.ts

import { Module } from "@nestjs/common";
import { ServeStaticModule } from "@nestjs/serve-static";
import { join } from "path";
import { PetModule } from "./pet/pet.module";
import { SequelizeModule } from "@nestjs/sequelize";
import models from "./pet/models";

@Module({
   imports: [
     // public folder
     ServeStaticModule.forRoot({
       rootPath: join(process.cwd(), "public"),
       serveRoot: "/public",
     }),
     PetModule,
     SequelizeModule.forRoot({
       uri: "mysql://root:123456@localhost/nestjs_tutorial_2023",
       dialect: "mysql",
       models: models,
     }),
   ],
   providers: [],
})
export class AppModule {}

Database migration directory structure - initialize, update database schema

Some explanation why we need to use sequelize-cli to update database.
During project development, when there is a data table that needs to add/delete or update columns in the table. The most direct way is SQL statements, although we can still manage which statements have run or not and shared with team members or people in charge of deploying products on production environment.

In today's modern ORMs, to unify how and standardize, we will usually use the cli of these ORMs related to creating/editing databases, tables.
And perform the migration via command lines. The structure of the data tables will be implemented through code - for consistency with the model managed by the ORM.

After running the following default command of sequelize-cli we will have the following default directory structure.

npx sequelize-cli init

config
   database.json
db
   models
   seeders
   migrations

.sequelizerc

// .sequelizerc

const path = require("path");

module.exports = {
   config: path.resolve("config", "database.json"),
   "models-path": path.resolve("db", "models"),
   "seeders-path": path.resolve("db", "seeders"),
   "migrations-path": path.resolve("db", "migrations"),
};

However, to match the current structure of the project, we need to adjust a bit as follows

src
     database
         config
             config.ts
     migrations
         *.ts
     seeds
         *.ts

.sequelizerc

const path = require("path");

module.exports = {
   config: path.resolve("./dist/database/config/config.js"),
   "seeders-path": path.resolve("./dist/database/seeders"),
   "migrations-path": path.resolve("./dist/database/migrations"),
};

Here, instead of running the source version directly, we will run their build

// config.ts
module.exports = {
   production: {
     url: "mysql://root:123456@localhost/nestjs_tutorial_2023",
     dialect: "mysql",
   },
};

// src/pet/models/pet-category.model
import { Column, DataType, Model, Table } from "sequelize-typescript";

@Table({
   tableName: "pet_categories",
})
export class PetCategory extends Model {
   @Column({
     primaryKey: true,
     type: DataType.UUID,
     defaultValue: DataType.UUIDV4,
   })
   id?: string;

   @Column({
     type: DataType.STRING(60),
     allowNull: false,
   })
   name: string;
}

// src\database\migrations\20230704043449-create-pet-category-table.ts
"use strict";

import { PetCategory } from "src/pet/models/pet-category.model";

/** @type {import('sequelize-cli').Migration} */

module.exports = {
   async up(queryInterface, Sequelize) {
     /**
      * Add altering commands here.
      *
      * Example:
      * await queryInterface.createTable('users', { id: Sequelize.INTEGER });
      */
     await queryInterface.createTable("pet_categories", {
       id: {
         type: Sequelize.UUID,
         defaultValue: Sequelize.UUIDV4,
         primaryKey: true,
       },
       name: {
         type: Sequelize.STRING(60),
         allowNull: false,
       },
     });
   },

   async down(queryInterface, Sequelize) {
     /**
      * Add reverting commands here.
      *
      * Example:
      * await queryInterface.dropTable('users');
      */
     await queryInterface.dropTable("pet_categories");
   },
};

Special note for the model here

Because the PetCategory Model in the example inherits from the Model from sequelize, it will inherit some predefined fields, although in the code of the PetCategory Model we do not see them appear.
Therefore, when creating a migration script for PetCategory, you should note these two default columns.

export declare abstract class Model<TModelAttributes extends {} = any, TCreationAttributes extends {} = TModelAttributes> extends OriginModel<TModelAttributes, TCreationAttributes> {
     id?: number | any;
     createAt?: Date | any;
     updatedAt?: Date | any;
     deletedAt?: Date | any;
     version?: number | any;
     static isInitialized: boolean;

Some common commands

$ npx sequelize-cli --help

Sequelize CLI [Node: 16.19.1, CLI: 6.6.1, ORM: 6.32.1]

sequelize <command>

Commands:
   sequelize db:migrate Run pending migrations
   sequelize db:migrate:schema:timestamps:add Update migration table to have timestamps
   sequelize db:migrate:status List the status of all migrations
   sequelize db:migrate:undo Reverts a migration
   sequelize db:migrate:undo:all Revert all migrations ran
   sequelize db:seed Run specified seeder
   sequelize db:seed:undo Deletes data from the database
   sequelize db:seed:all Run every seeder
   sequelize db:seed:undo:all Deletes data from the database
   sequelize db:create Create database specified by configuration
   sequelize db:drop Drop database specified by configuration
   sequelize init Initializes project
   sequelize init:config Initializes configuration
   sequelize init:migrations Initializes migrations
   sequelize init:models Initialize models
   sequelize init:seeders Initializes seeders
   sequelize migration:generate Generates a new migration file
   sequelize migration:create Generates a new migration file
   sequelize model:generate Generates a model and its migration
   sequelize model:create Generates a model and its migration
   sequelize seed:generate Generates a new seed file
   sequelize seed:create Generates a new seed file

I would like an example command to make a migration file, then build, and run

# create migration
npx sequelize-cli migration:create --name create-pet-category-table --migrations-path ./src/database/migrations
# build
npm run build
# run migration
npx sequelize-cli db:migrate --env production

Note that if env is not specified, the default is development. As in the config file above we only set one environment as production. And the configs will be replaced with environment variables.

After running migrate, now check the database we will see

In the next step, we start testing some basic methods of the Model: add, update, delete, search

A small note when continuing the lesson with the current Pet Category example, we need to update the PetCategory Model a bit, instead of column title -> will switch to column name, for compatibility with the database at this time.

Add PetCategory

import { PetCategory } from "src/pet/models/pet-category.model";
await PetCategory.create({ ...object });

@Controller("admin/pet-categories")
export class ManagePetCategoryController {
   @Post("create")
   @Render("pet/admin/manage-pet-category/create")
   @FormDataRequest()
   async create(@Body() createPetCategoryDto: CreatePetCategoryDto) {
     const data = {
       mode: "create",
     };
     // validation
     const object = plainToInstance(CreatePetCategoryDto, createPetCategoryDto);

     // ...

     // set value and show success message
     Reflect.set(data, "values", object);

     // create PetCategory
     const newPetCategory = await PetCategory.create({ ...object });

     Reflect.set(
       data,
       "success",
       `Pet Category : ${newPetCategory.id} - ${newPetCategory.name} has been created!`
     );
     // success
     return { data };
   }
}

After running http://localhost:3000/admin/pet-categories/create we get the results as below

In addition, Sequelize also supports you to configure so that you can see the details of the sql statements generated by the ORM. Change a bit in the config for the database connection in the app module.

SequelizeModule.forRoot({
   uri: 'mysql://root:123456@localhost/nestjs_tutorial_2023',
   dialect: 'mysql',
   models: models,
   logging: console.log,
}),

Search PetCategory - list

@Controller('admin/pet-categories')
export class ManagePetCategoryController {
   @Get('')
   @Render('pet/admin/manage-pet-category/list')
   async getList() {
     const petCategories = await PetCategory.findAll();
     return {
       petCategories,
     };
   }

<%- include('layouts/admin/header'); %>
<section class="col-12">
   <div class="card">
     <div class="card-body">
       <h5 class="card-title">List Pet Categories</h5>
       <div class="table-responsive">
         <table class="table table-light table-striped">
           <thead>
             <tr>
               <th scope="col" style="width: 360px">ID</th>
               <th scope="col">Name</th>
             </tr>
           </thead>
           <tbody>
             <% petCategories.forEach(petCategory => { %>
             <tr class="">
               <td><%= petCategory.id %></td>
               <td><%= petCategory.name %></td>
             </tr>
             <% }) %>
           </tbody>
         </table>
       </div>
     </div>
   </div>
</section>
<%- include('layouts/admin/footer'); %>

// find all
const petCategories = await PetCategory.findAll();
// delete
await PetCategory.destroy({ where: { id } });
// create
const newPetCategory = await PetCategory.create({ ...object });
// find by primary key
const petCategory = await PetCategory.findByPk(id);
// update
await petCategory.update(object);

Update source code of ManagePetCategory controllers and views

import {
  Body,
  Controller,
  Delete,
  Get,
  Param,
  Post,
  Redirect,
  Render,
} from '@nestjs/common';
import { CreatePetCategoryDto } from 'src/pet/dtos/pet-dto';
import { plainToInstance } from 'class-transformer';
import { validate, ValidationError } from 'class-validator';
import { FormDataRequest } from 'nestjs-form-data';
import { PetCategory } from 'src/pet/models/pet-category.model';
import { Response } from 'express';

const transformError = (error: ValidationError) => {
  const { property, constraints } = error;
  return {
    property,
    constraints,
  };
};
@Controller('admin/pet-categories')
export class ManagePetCategoryController {
  @Get('')
  @Render('pet/admin/manage-pet-category/list')
  async getList() {
    const petCategories = await PetCategory.findAll();
    return {
      petCategories,
    };
  }

  @Post('delete/:id')
  @Redirect('/admin/pet-categories/')
  async deleteOne(@Param() { id }: { id: string }) {
    await PetCategory.destroy({ where: { id } });
  }

  @Get('create')
  @Render('pet/admin/manage-pet-category/create')
  view_create() {
    // a form
    return {
      data: {
        mode: 'create',
      },
    };
  }

  @Post('create')
  @Render('pet/admin/manage-pet-category/create')
  @FormDataRequest()
  async create(@Body() createPetCategoryDto: CreatePetCategoryDto) {
    const data = {
      mode: 'create',
    };
    // validation
    const object = plainToInstance(CreatePetCategoryDto, createPetCategoryDto);
    const errors = await validate(object, {
      stopAtFirstError: true,
    });
    if (errors.length > 0) {
      Reflect.set(data, 'error', 'Please correct all fields!');
      const responseError = {};
      errors.map((error) => {
        const rawError = transformError(error);
        Reflect.set(
          responseError,
          rawError.property,
          Object.values(rawError.constraints)[0],
        );
      });
      Reflect.set(data, 'errors', responseError);
      return { data };
    }
    // set value and show success message
    Reflect.set(data, 'values', object);

    // create PetCategory
    const newPetCategory = await PetCategory.create({ ...object });

    Reflect.set(
      data,
      'success',
      `Pet Category : ${newPetCategory.id} - ${newPetCategory.name} has been created!`,
    );
    // success
    return { data };
  }

  @Get(':id')
  @Render('pet/admin/manage-pet-category/create')
  async getDetail(@Param() { id }: { id: string }) {
    const data = {
      mode: 'edit',
    };
    const petCategory = await PetCategory.findByPk(id);
    Reflect.set(data, 'values', petCategory);
    return { data };
  }

  @Post(':id')
  @Render('pet/admin/manage-pet-category/create')
  @FormDataRequest()
  async updateOne(
    @Param() { id }: { id: string },
    @Body() createPetCategoryDto: CreatePetCategoryDto,
  ) {
    const data = {
      mode: 'edit',
    };
    const petCategory = await PetCategory.findByPk(id);
    // validation
    const object = plainToInstance(CreatePetCategoryDto, createPetCategoryDto);
    const errors = await validate(object, {
      stopAtFirstError: true,
    });
    if (errors.length > 0) {
      Reflect.set(data, 'error', 'Please correct all fields!');
      const responseError = {};
      errors.map((error) => {
        const rawError = transformError(error);
        Reflect.set(
          responseError,
          rawError.property,
          Object.values(rawError.constraints)[0],
        );
      });
      Reflect.set(data, 'errors', responseError);
      return { data };
    }
    // set value and show success message
    await petCategory.update(object);

    Reflect.set(data, 'values', petCategory);
    return { data };
  }
}

Views - list.html

<%- include('layouts/admin/header'); %>
<section class="col-12">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">List Pet Categories</h5>
      <div class="pb-4">
        <a
          class="btn btn-primary"
          href="/admin/pet-categories/create"
          role="button"
          >New Pet Category</a
        >
      </div>
      <div class="table-responsive">
        <table class="table table-light table-striped">
          <thead>
            <tr>
              <th scope="col" style="width: 360px">ID</th>
              <th scope="col">Name</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
          <tbody>
            <% petCategories.forEach(petCategory => { %>
            <tr class="">
              <td><%= petCategory.id %></td>
              <td><%= petCategory.name %></td>
              <td>
                <a
                  href="/admin/pet-categories/<%= petCategory.id %>"
                  title="Edit"
                  >Edit</a
                >
                <form
                  action="/admin/pet-categories/delete/<%= petCategory.id %>"
                  method="post"
                >
                  <button type="submit">Delete</button>
                </form>
              </td>
            </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
<%- include('layouts/admin/footer'); %>

Views - Create/Edit

<%- include('layouts/admin/header'); %>
<section class="col-6">
  <form method="post" enctype="multipart/form-data">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">
          <% if (data.mode === 'create') { %> New Pet Category <% } %> <% if
          (data.mode === 'edit') { %> Edit Pet Category <% } %>
        </h5>
        <!-- error -->
        <% if (data.error){ %>
        <div class="alert alert-danger" role="alert"><%= data.error %></div>
        <% } %>
        <!-- success -->
        <% if (data.success){ %>
        <div class="alert alert-success" role="alert"><%= data.success %></div>
        <script type="text/javascript">
          setTimeout(() => {
            window.location.href = "/admin/pet-categories/";
          }, 2000);
        </script>
        <% } %>
        <div class="mb-3">
          <label for="title" class="form-label">Name</label>
          <div class="input-group has-validation">
            <input
              type="text"
              class="form-control <%= data.errors && data.errors['name'] ? 'is-invalid': '' %>"
              id="name"
              name="name"
              value="<%= data.values && data.values['name'] %>"
              placeholder="Pet Category name"
            />
            <% if (data.errors && data.errors['name']) { %>
            <div id="validationServerUsernameFeedback" class="invalid-feedback">
              <%= data.errors['name'] %>
            </div>
            <% } %>
          </div>
        </div>
      </div>
      <% if(!data.success) { %>
      <div class="mb-3 col-12 text-center">
        <button type="submit" class="btn btn-primary">Save</button>
      </div>
      <% } %>
    </div>
  </form>
</section>
<%- include('layouts/admin/footer'); %>

Generate data seed with sequelize-cli

Note at this step, if using generate of cli, target directory in sequelize's config is now dist directory.

Therefore, we need to slightly adjust the config for .sequelizerc as follows. A next note, is to remember to edit the extension file for the seeding or migrations file to the ts extension.

const path = require("path");

const database_dist = process.env.NODE_ENV === "production" ? "dist" : "src";

module.exports = {
   config: path.resolve(`./${database_dist}/database/config/config.js`),
   "seeders-path": path.resolve(`./${database_dist}/database/seeders`),
   "migrations-path": path.resolve(`./${database_dist}/database/migrations`),
};

# create migration
npx sequelize-cli migration:create --name create-pet-category-table --migrations-path ./src/database/migrations
# create seed
npx sequelize-cli seed:generate --name pet-category
# build
npm run build
# run migration/seeds
NODE_ENV=production npx sequelize-cli db:migrate --env production

import { Column, DataType, Model, Table } from "sequelize-typescript";

export const PetCategoryTableName = "pet_categories";

@Table({
   tableName: PetCategoryTableName,
})
export class PetCategory extends Model {
   @Column({
     primaryKey: true,
     type: DataType.UUID,
     defaultValue: DataType.UUIDV4,
   })
   id?: string;

   @Column({
     type: DataType.STRING(60),
     allowNull: false,
   })
   name: string;
}

src\database\seeders\20230706141027-pet-category.ts

"use strict";

import {
   PetCategory,
   PetCategoryTableName,
} from "src/pet/models/pet-category.model";

/** @type {import('sequelize-cli').Migration} */
module.exports = {
   async up(queryInterface, Sequelize) {
     /**
      * Add seed commands here.
      *
      * Example:
      * await queryInterface.bulkInsert('People', [{
      * name: 'John Doe',
      * isBetaMember: false
      * }], {});
      */
     await queryInterface.bulkInsert(
       PetCategoryTableName,
       [
         { name: "Dogs" },
         { name: "Cats" },
         { name: "Pigs" },
         { name: "Birds" },
         { name: "Others" },
       ],
       {}
     );
   },

   async down(queryInterface, Sequelize) {
     /**
      * Add commands to revert seed here.
      *
      * Example:
      * await queryInterface.bulkDelete('People', null, {});
      */
     await queryInterface.bulkDelete(PetCategoryTableName, null, {});
   },
};

Everything looks fine, however, when running the migrate seed command, you may get the error described here here

Loaded configuration file "dist\database\config\config.js".
Using environment "production".
== 20230706141027-pet-category: migrating =======

ERROR: Field 'id' doesn't have a default value

To bypass this issue while sequelize doesn't have a patch for this bug, at the time of migration, we will have to generate uuid directly, using this package

Update a bit the seed file src\database\seeders\20230706141027-pet-category.ts

"use strict";

import { PetCategoryTableName } from "src/pet/models/pet-category.model";

import { v4 as uuidv4 } from "uuid";

/** @type {import('sequelize-cli').Migration} */
module.exports = {
   async up(queryInterface, Sequelize) {
     /**
      * Add seed commands here.
      *
      * Example:
      * await queryInterface.bulkInsert('People', [{
      * name: 'John Doe',
      * isBetaMember: false
      * }], {});
      */
     await queryInterface.bulkInsert(
       PetCategoryTableName,
       [
         { id: uuidv4(), name: "Dogs" },
         { id: uuidv4(), name: "Cats" },
         { id: uuidv4(), name: "Pigs" },
         { id: uuidv4(), name: "Birds" },
         { id: uuidv4(), name: "Others" },
       ],
       {}
     );
   },

   async down(queryInterface, Sequelize) {
     /**
      * Add commands to revert seed here.
      *
      * Example:
      * await queryInterface.bulkDelete('People', null, {});
      */
     await queryInterface.bulkDelete(PetCategoryTableName, null, {});
   },
};

$ NODE_ENV=production npx sequelize-cli db:seed:all

Sequelize CLI [Node: 16.19.1, CLI: 6.6.1, ORM: 6.32.1]

Loaded configuration file "dist\database\config\config.js".
Using environment "production".
== 20230706141027-pet-category: migrating =======
== 20230706141027-pet-category: migrated (0.155s)

And results

Feel free to read the full courses at NestJS Course Lesson 04 - Model and Repository Pattern

NestJS Course Lesson 03 - Controllers & Views

NextjsVietnam — Tue, 04 Jul 2023 13:51:10 +0000

Source Code

Lession 03 Source Code

Lesson 03

Learn about the module in NestJS - the application to build a directory structure for Pet Website
Learn about EJS and how to create generic layouts
Working with forms and checking input data

Overview

MVC pattern

Above the data flow model from the time the user makes the request until the result is received.

Step 1: Controller receives data from User (www/form-data, multiplart/form-data, uri segements, query params, headers, ...)
Step 2: Call to Service to request corresponding business processing, input is data from user
Step 3: Service makes calls to Model to read/write corresponding data
Step 4: The model reads/writes the corresponding data in the database
Step 5: The service sends back to the controller the corresponding data that has been read/written/processed
Step 6: The controller reads the corresponding template for the interface combined with the data received from the service to render the view to the user.
Step 7: After rendering the corresponding view, the controller sends this result back to the user -> HTML/JSON, ...

Apply this MVC architecture to the project and divide the project by module

Practice

Build the Pet module

1.1. Controllers

PetController - /pets - /pets/:petId
ManagePetController /admin/pets/
ManagePetCategoryController /admin/pet-categories
ManagePetAttributeController / admin/pet-attributes

1.2. Services

PetService
PetCategoryService
PetAttributeService

1.3. Models

Pet
PetCategory
PetAttribute

# let's create a pet module
nest g module pet
# let's create controllers
nest g controller pet/controllers/pet --flat
# for admin pages
nest g controller pet/controllers/admin/manage-pet --flat
nest g controller pet/controllers/admin/manage-pet-category --flat
nest g controller pet/controllers/admin/manage-pet-attribute --flat

app.module.ts

// src/app.module.ts

import { Module } from "@nestjs/common";
import { ServeStaticModule } from "@nestjs/serve-static";
import { join } from "path";
import { PetModule } from "./pet/pet.module";

@Module({
   imports: [
     // public folder
     ServeStaticModule.forRoot({
       rootPath: join(process.cwd(), "public"),
       serveRoot: "/public",
     }),
     PetModule,
   ],
   controllers: [],
   providers: [],
})
export class AppModule {}

pet.module.ts

// src/pet/pet.module.ts

import { Module } from "@nestjs/common";

@Module({})
export class PetModule {}

import { Controller, Get, Param } from "@nestjs/common";

@Controller("pets")
export class PetController {
   @Get("")
   getList() {
     return "Pet List";
   }

   @Get(":id")
   getDetail(@Param() { id }: { id: number }) {
     return `Pet Detail ${id}`;
   }
}

At this step NestJS provides some syntax to declare handler for each path

Reference about routes, params for controllers in NestJS

Now try to run your application again and see what we have

For admin

import { Controller, Get, Param } from "@nestjs/common";

@Controller("admin/pets")
export class ManagePetController {
   @Get("")
   getList() {
     return "admin pet list";
   }

   @Get(":id")
   getDetail(@Param() { id }: { id: string }) {
     return `admin pet detail ${id}`;
   }
}

import { Controller, Get, Param } from "@nestjs/common";

@Controller("admin/pet-categories")
export class ManagePetCategoryController {
   @Get("")
   getList() {
     return "admin pet categories";
   }

   @Get(":id")
   getDetail(@Param() { id }: { id: string }) {
     return `admin pet category detail ${id}`;
   }
}

import { Controller, Get, Param } from "@nestjs/common";

@Controller("admin/pet-attributes")
export class ManagePetAttributeController {
   @Get("")
   getList() {
     return "admin pet attribute list";
   }

   @Get(":id")
   getDetail(@Param() { id }: { id: string }) {
     return `admin pet attribute detail ${id}`;
   }
}

Let's start with the form to create a pet category

Integration with bootstrap (https://getbootstrap.com/docs/5.0/getting-started/download/)
Use ejs partial (separate common parts of the website - header, footer, and reuse in different templates)
Create routes
Connect with view
Get data from the form and process the results (fake data) The view folder structure will look like this:

views\pet\admin\manage-pet-category\create.ejs

So when using it, we just need to point the path to the template file located in the view directory

@Render("pet/admin/manage-pet-category/create")

After using some examples available at bootstrap we can use the template as below:

import { Controller, Get, Param, Post, Render } from "@nestjs/common";

@Controller("admin/pet-categories")
export class ManagePetCategoryController {
   @Get("")
   getList() {
     return "admin pet categories";
   }

   @Get("create")
   @Post("create")
   @Render("pet/admin/manage-pet-category/create")
   create() {
     // a form
     return {};
   }

   @Get(":id")
   getDetail(@Param() { id }: { id: string }) {
     return `admin pet category detail ${id}`;
   }
}

In which the header, footer will contain the shared elements in the template

<%- include('layouts/admin/header'); %>
<h1>Manage Pet Category - Create New Pet Category</h1>
<%- include('layouts/admin/footer'); %>

You can find all the related source code here:

And we have the following result:

Okie and let's go to the next step, let's design a form to input and process data for 1 PetCategory

Notice that we have 3 use cases for the same view create form of admin pet category:

Create New Pet Category
Create New Pet Category success/failure
Edit Pet Category
Update Pet Categeory success/failure

Some constraints of this form:

Pet category only has title
Pet category title cannot be left blank
Pet category title cannot be longer than 150 characters

# to support multipart/form-data
npm install nestjs-form-data --save
# to support data validation and transformation
npm install class-transformer reflect-metadata --save

To use multiplat/form-data, we need to import the NestJSFormData module as shown below.
By default NestJS is configured to only support json

// src/pet/pet.module.ts

import { Module } from "@nestjs/common";
import { PetController } from "./controllers/pet.controller";
import { ManagePetController } from "./controllers/admin/manage-pet.controller";
import { ManagePetCategoryController } from "./controllers/admin/manage-pet-category.controller";
import { ManagePetAttributeController } from "./controllers/admin/manage-pet-attribute.controller";
import { nestjsFormDataModule } from "nestjs-form-data";
@Module({
   imports: [NestjsFormDataModule],
   controllers: [
     PetController,
     ManagePetController,
     ManagePetCategoryController,
     ManagePetAttributeController,
   ],
})
export class PetModule {}

// pet-dto.ts

import { IsNotEmpty, MaxLength } from "class-validator";

class CreatePetCategoryDto {
   @MaxLength(50)
   @IsNotEmpty()
   title: string;
}

export { CreatePetCategoryDto };

import { Body, Controller, Get, Param, Post, Render } from "@nestjs/common";
import { CreatePetCategoryDto } from "src/pet/dtos/pet-dto";
import { plainToInstance } from "class-transformer";
import { validate, ValidationError } from "class-validator";
import { FormDataRequest } from "nestjs-form-data";

const transformError = (error: ValidationError) => {
   const { property, constraints } = error;
   return {
     properties,
     constraints,
   };
};
@Controller("admin/pet-categories")
export class ManagePetCategoryController {
   @Get("")
   getList() {
     return "admin pet categories";
   }

   @Get("create")
   @Render("pet/admin/manage-pet-category/create")
   view_create() {
     // a form
     return {
       data: {
         mode: "create",
       },
     };
   }

   @Post("create")
   @Render("pet/admin/manage-pet-category/create")
   @FormDataRequest()
   async create(@Body() createPetCategoryDto: CreatePetCategoryDto) {
     const data = {
       mode: "create",
     };
     // validation
     const object = plainToInstance(CreatePetCategoryDto, createPetCategoryDto);
     const errors = await validate(object, {
       stopAtFirstError: true,
     });
     if (errors.length > 0) {
       Reflect.set(data, "error", "Please correct all fields!");
       const responseError = {};
       errors.map((error) => {
         const rawError = transformError(error);
         Reflect.set(
           responseError,
           rawError.property,
           Object.values(rawError.constraints)[0]
         );
       });
       Reflect.set(data, "errors", responseError);
       return { data };
     }
     // set value and show success message
     Reflect.set(data, "values", object);
     Reflect.set(
       data,
       "success",
       `Pet Category : ${object.title} has been created!`
     );
     // success
     return { data };
   }

   @Get(":id")
   getDetail(@Param() { id }: { id: string }) {
     return `admin pet category detail ${id}`;
   }
}

<%- include('layouts/admin/header'); %>
<section class="col-6">
   <form method="post" enctype="multipart/form-data">
     <div class="card">
       <div class="card-body">
         <h5 class="card-title">
           <% if (data.mode === 'create') { %> New Pet Category <% } %>
         </h5>
         <!-- error -->
         <% if (data.error){ %>
         <div class="alert alert-danger" role="alert"><%= data.error %></div>
         <% } %>
         <!-- success -->
         <% if (data.success){ %>
         <div class="alert alert-success" role="alert"><%= data.success %></div>
         <% } %>
         <div class="mb-3">
           <label for="title" class="form-label">Title</label>
           <div class="input-group has-validation">
             <input
               type="text"
               class="form-control <%= data.errors && data.errors['title'] ? 'is-invalid': '' %>"
               id="title"
               name="title"
               value="<%= data.values && data.values['title'] %>"
               placeholder="Pet Category Title"
             />
             <% if (data.errors && data.errors['title']) { %>
             <div id="validationServerUsernameFeedback" class="invalid-feedback">
               <%= data.errors['title'] %>
             </div>
             <% } %>
           </div>
         </div>
       </div>
       <% if(!data.success) { %>
       <div class="mb-3 col-12 text-center">
         <button type="submit" class="btn btn-primary">Save</button>
       </div>
       <% } %>
     </div>
   </form>
</section>
<%- include('layouts/admin/footer'); %>

And we get 3 states of the form as shown below

Feel free to read the full courses at NestJS Course Lesson 03 - Controllers & Views

Nestjs Course - Lesson 02 - Introduction to the MVC pattern

NextjsVietnam — Sun, 02 Jul 2023 12:53:50 +0000

Source Code

Session 002 Source Code

Lesson 02

Preliminary design requirements analysis
Setting up the project structure
Overview of classes in the MVC model and code practice

Request parsing

Sitemap

Functional details

Database Design

Set up project structure

Create a new project with NestJS
Project folder structure according to module structure and MVC model
Debug NestJS project with VSCode

Create a new project with NestJS

nest new nestjs-tutorial-2023 --skip-install
cd nestjs-tutorial-2023
npm i

After initializing the project, the project's directory tree structure will look like the image below:

Project directory structure according to the module structure and MVC model

Install NestJS to support template Engine EJS

Let's go back a bit with the architecture of expressjs, you need to set some parameters as follows:

Template Engine: some popular template engines like pug, ejs, hbs
Static Assets: folder containing static files such as css, js, images of the website

const express = require("express");
const app = express();
const port = process.env.PORT || 1337;
const path = require("path");

// static assets
const publicAssetsPath = path.resolve(process.cwd(), "public");
// using express static middleware
app.use("/public", express.static(publicAssetsPath));
// Your asset will be placed at : http://localhost:1337/public/assets/main.css

// select view engine is ejs
app.set("view engine", "ejs");

// set view folder
const viewsPath = process.cwd() + "/views";
app.set("views", [viewsPath]);

// global variable through app
app.locals = {
   title: "MVC Tutorial",
};

// home page
app.get("/", (req, res) => {
   res.render("index", { heading: "Home page" });
});

app.listen(port, () => {
   console.log(`Example app listening at http://localhost:${port}`);
});

And in NestJS, how will we do it?

npm install --save @nestjs/serve-static
npm i --save ejs

// src/app.module.ts
import { Module } from "@nestjs/common";
import { AppController } from "./app.controller";
import { AppService } from "./app.service";
import { ServeStaticModule } from "@nestjs/serve-static";
import { join } from "path";

@Module({
   imports: [
     // public folder
     ServeStaticModule.forRoot({
       rootPath: join(process.cwd(), "public"),
       // Your asset will be placed at : http://localhost:1337/public/assets/main.css
       serveRoot: "/public",
     }),
   ],
   controllers: [AppController],
   providers: [AppService],
})
export class AppModule {}

// src/main.ts
import { NestFactory } from "@nestjs/core";
import { AppModule } from "./app.module";
import { NestExpressApplication } from "@nestjs/platform-express";
import { join } from "path";

async function bootstrap() {
   const app = await NestFactory.create<NestExpressApplication>(AppModule);

   // app.useStaticAssets(join(process.cwd(), 'public'));
   app.setViewEngine("ejs");
   app.setBaseViewsDir([join(process.cwd(), "views")]);

   await app.listen(3000);
}
bootstrap();

// src/app.controller.ts

import { Controller, Get, Render } from "@nestjs/common";
import { AppService } from "./app.service";

@Controller()
export class AppController {
   constructor(private readonly appService: AppService) {}

   @Get()
   @Render("index")
   homePage() {
     return {};
   }
}

views/index.ejs

<!DOCTYPE html>
<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= title %></title>
     <link rel="stylesheet" href="/public/assets/main.css" />
   </head>
   <body>
     <h1><%= title %></h1>
     <img
       src="/public/assets/nestjs-tutorial-2023.png"
       alt="NestJS Tutorial 2023"
     />
     <script src="/public/assets/main.js"></script>
   </body>
</html>

And here is what you get

References

Feel free to find out more details at Nestjs Course - Lesson 02 - Introduction to the MVC pattern

Build Restful Api With Nestjs the Right Way

NextjsVietnam — Wed, 02 Nov 2022 05:17:18 +0000

Foreword

If you are new with NestJS or you have been worked with it for several projects, this post is for you. In this article, I'll share with you the real world process to build a Restful API from scratch with NestJS

Okie, let's start. Imagination, we've already have detail specifications.
This is our requirements in this sample:

Create Restful API for a image storage service that allow:

Users can register to the system. They need to verify their account before using it (via email).
Users can only use the system if they have an active account
Users can upload images with png,jpg,jpeg format. The maximum size is 5MB
User's images won't be public unless they created a shared link and share with other people.
User's images can be used on other websites
A user has maximum 100 images.
A system will delete unused image(unused more than 1 year) automatically every weekends.

Infrastructure requirements:

Local : Local Docker
Staging: Run on VM with Docker
Production: Host everything on AWS

First of all, we need to write down what we have to do.

[x] Install NestJS CLI
[x] Setup your dev tools: vscode, config for debug, code linter
[x] Design source code structure: seperate them into layers
[x] Setup your local docker (database only)
[x] Setup your application's configuration
[x] Setup data access layer and configuration
[x] Business Layer: define business models: inputModels, outputModels
[x] Presentation Layer: define controllers
[x] Presentation Layer: integrate data validation from business models
[x] Business Layer: define business service
[x] Presentation Layer: integrate with business layer
[x] Presentation Layer: create swagger - the api document
[x] Persistence Layer: define database's entities, create and run migration scripts, seeds
[x] Persistence Layer: define repositories
[x] Business Layer: integrate repository with business layer
[x] Setup your staging docker: dockerfile, docker compose, setup scripts
[x] Setup your CI/CD flow and setup on your staging
[x] Design and setup AWS Infrastructure

And assume that we already have the high level designs

Step 1 : Install NestJS CLI

npm i -g @nestjs/cli
nest new your-project-name

Step 2: Setup your dev tools

How to debug NestJS in VSCode?

.vscode/launch.json

{
  "configurations": [
    {
      "name": "Debug API",
      "type": "node",
      "program": "${workspaceFolder}/src/application/api/main.ts",
      "runtimeArgs": [
        "-r",
        "ts-node/register",
        "-r",
        "tsconfig-paths/register"
      ],
      "console": "integratedTerminal",
      "request": "launch",
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/**/*.js", "!**/node_modules/**"]
    },
    {
      "name": "Debug remote api",
      "type": "node",
      "request": "attach",
      "remoteRoot": "/app",
      "localRoot": "${workspaceFolder}",
      "port": 9229,
      "restart": true,
      "address": "0.0.0.0",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Debug main app (file storage api)

F5 -> Select Debug API

Make sure your program path is your api's main file

Eg: "program": "${workspaceFolder}/src/application/api/main.ts",

Debug remote

Example: Start app in debug mode - debugger port 9229

F5 -> Select Debug remote API

npm run start:debug

Step 3: Design source code structure

Overview layers

solutions
- deployment -> deployment scripts, dockerfiles, k8s, ...
src

src/application -> applications: file-storage-api, web, queues, ...
src/domain -> Tables mapping
src/business -> Business logic
src/share -> Share/Common projects
src/persistence -> TypeORM Core
src/config -> config: log,environment, configuration

test -> test configuration

domain layer

application layer

business layer

persistence layer

config layer

This is the high level of the design.

You can visit Build Restful Api With Nestjs the Right Way for more detail examples.

Have a good day!

Made with love by Nextjs VietNam