DEV Community: AliFathy-1999

How to Implement Data Validation in NestJS Using nestjs-joi and joi-class-decorators

AliFathy-1999 — Thu, 20 Jun 2024 18:14:08 +0000

Here are some topics I can cover:

Introduction to Data Validation in Web Applications.
Setting Up NestJS for Validation.
- Prerequisites and project setup.
- Creating and Using Validation Schemas
Introduction to pipe and how to use it with Joi
Validation on Param and Query Params using Joi.
Practical Implementation: Explore a complete NestJS application utilizing nestjs-joi and joi-class-decorators on GitHub: NestJS Sample App with nestjs-joi.

1. Introduction to Data Validation in Web Applications.

Data validation is the process of ensuring that data entered by users or obtained from external sources satisfies the specified criteria and format. Data validation can be done at several levels, including client-side, server-side, and database-level.

2. Setting Up NestJS for Validation.

Prerequisites and project setup:

1. Install Node and npm :

Make sure that you installed Node on your device

node -v to detect whether you have installed the Node or not. If you installed node output is v20.13.1 or any version. If you didn't install node output will be node: command not found.

You need to install node by going to Nodejs website NodeJS website

Make sure that you installed Node Package Manager npm on your device npm -v to detect whether you have installed the npm or not. If you installed npm output is 10.8.0 or any version. If you didn't install npm output will be npm: command not found.

2. Install NestJs and create new nestApp :

npm i -g @nestjs/cli
nest new my-nestjs-app
cd ./my-nestjs-app

3. create a new pipe called validation:

// --no-spec => Disable spec files generation 
// --flat => Do not generate a folder for the element.
nest g pipe validation --no-spec --flat

4. Installing necessary packages (nestjs-joi, joi-class-decorators)

npm i class-transformer joi nestjs-joi joi-class-decorators

Creating and Using Validation Schemas:

1. Create Endpoint '/testBody', Method type: Post,In app controller

import { Body, Controller, HttpCode, HttpStatus, Post, Req, Res } from '@nestjs/common';
import { AppService } from './app.service';
import { Request, Response } from 'express';
import { validationBodyDto } from './validate.dto';

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

  @Post('/testBody')
  @HttpCode(HttpStatus.OK)
  testJoiValidation(@Req() req: Request, @Res() res: Response, @Body() reqBody: validationBodyDto) {
    const data = reqBody;
    res.json(data);
  }
}

2. Create Dto file called (validate.dto.ts) to validate this endpoint and create joi schema class (validationBodyDto):

import { Expose } from "class-transformer";
import { JoiSchema, JoiSchemaOptions } from "joi-class-decorators";
import * as Joi from 'joi';

interface reviewInterface {
    rating: number;
    comment: string;
}
// @Expose ==> is used to mark properties that should be included in the transformation process, typically for serialization and deserialization. However.
// @JoiSchema() ==> Define a schema on a type (class) property. Properties with a schema annotation are used to construct a full object schema.


//It ensures strict validation by disallowing any properties that are not explicitly defined in your schema. 
@JoiSchemaOptions({
    allowUnknown: false
})

export class validationBodyDto {

    //Basic Validation is type string and required
    @Expose() @JoiSchema(Joi.string().trim().required())
    fullName: string;

    //Check on length, and is valid egyptian phone number
    @Expose() @JoiSchema(Joi.string().length(11).pattern(/^(011|012|015|010)\d{8}$/).required())
    phoneNumber: string;

    //Check is valid email
    @Expose() @JoiSchema(Joi.string().email().optional())
    email?: string;

    //Check value is valid in case of M or F only
    @Expose() @JoiSchema(Joi.string().valid('M', 'F').required())
    gender: string;

    //militaryStatus is mendatory if gender is M otherwise is optional
    @Expose() @JoiSchema(
        Joi.when('gender', {
            is: 'M',
            then: Joi.string().required(),
            otherwise: Joi.string().optional(),
        }),
    )
    militaryStatus: string;

    //Check age is number, min 14 and max age is 100
    @Expose() @JoiSchema(Joi.number().min(14).max(100).message('Invalid age'))
    age: number;

    //Check on Array of object is valid or invalid
    @Expose()
    @JoiSchema(
        Joi.array().items(
                Joi.object({
                        rating: Joi.number().min(0.1).required(),
                        comment: Joi.string().min(3).max(300).required(),
                    }).required(),
            ).required(),
    )
    reviews: reviewInterface[];

    //allow this field with empty string
    @Expose() @JoiSchema(Joi.string().allow('').optional())
    profilePicture?: string;

    //profileFileName is mendatory if profilePicture has an value otherwise it optional 
    @Expose() @JoiSchema(
        Joi.when('profilePicture', {
            is: Joi.string().exist(),
            then:  Joi.string().required(),
            otherwise: Joi.string().allow('').optional(),
    }))
    profileFileName: string;

    //Check if isVerified is boolean and required
    @Expose() @JoiSchema(Joi.boolean().required())
    isVerified: boolean;

}

3. Introduction to pipe and how to use it with Joi

In NestJS, a "pipe" is a class annotated with the @Injectable() decorator that implements the PipeTransform interface. Pipes are typically used for transforming or validating data. They can be used at various levels, including method-level, controller-level, or globally.
Introduction to Pipes
- Transformation: Pipes can transform input data to a desired format.
- Validation: Pipes can validate the data before passing it to the request handler. If the data is invalid, the pipe can throw an exception, which will be handled by NestJS.
In our case, we use it to transform plain object into a typed object so that we can apply validation.
So let us use the validation pipe that we created before:

import { BadRequestException, Injectable, PipeTransform, Type } from '@nestjs/common';
import { plainToInstance } from 'class-transformer';
import { getClassSchema } from 'joi-class-decorators';

@Injectable()
export class ValidationPipe implements PipeTransform {
  transform(value: any, metadata: ArgumentMetadata) {
    const { metatype } = metadata;
    const bodyDto = metatype; // Dto Schema
    /*
      To transform our plain JavaScript argument object into a typed object so that we can apply validation.
      The reason we must do this is that the incoming post body object, when deserialized from the network request, does not have any type information. 
    */

    // getClassSchema(bodyDto) ==> A function from joi-class-decorators to retrieve the Joi validation schema associated with a class.
    const bodyInput = plainToInstance(bodyDto, value); // Convert plain Dto object to instance to transform it manually
    const bodySchema = getClassSchema(bodyDto); // Get Joi Schema from Dto
    // Validates the class instance against the Joi schema. If validation fails, error will contain the validation errors.
    const error = bodySchema.validate(bodyInput).error;  
    if (error) {
      throw new BadRequestException(`Validation failed: ${error.details.map((err) => err.message).join(', ')}.`);  
    }
    return value
  }
}
interface ArgumentMetadata {
  type: 'body' | 'query' | 'param' | 'custom';
  metatype?: Type<unknown>;
  data?: string;
}

To use this validation pipe on our endpoint, we have four ways:
- Use Global scoped pipes, It will be applied on every route handler across the entire application.

// In main.ts
async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(new ValidationPipe());
  await app.listen(3000);
}
bootstrap();

Use parameter-scoped pipes, It will be applied on param reqBody.

  @Post('/testBody')
  @HttpCode(HttpStatus.OK)
  testJoiValidation(@Body(new ValidationPipe()) reqBody: validationBodyDto, @Res() res: Response) {
    const data = reqBody;
    res.json(data);
  }

Use method-scoped pipes, It will be applied on method testJoiValidation.

  @Post('/testBody')
  @HttpCode(HttpStatus.OK)
  @UsePipes(new ValidationPipe()) // Method Scope
  testJoiValidation(@Body() reqBody: validationBodyDto, @Res() res: Response) {
    const data = reqBody;
    res.json(data);
  }

Use controller-scoped pipes, It will be applied on method testJoiValidation.

@Controller()
@UsePipes(new ValidationPipe()) //Controller-scoped
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Post('/testBody')
  @HttpCode(HttpStatus.OK)
  testJoiValidation(@Body() reqBody: validationBodyDto, @Res() res: Response) {
    const data = reqBody;
    res.json(data);
  }
}

4. Validation on Param and Query Params using Joi.

Create an endpoint '/testParams/:category', method type: GET, It took param named category ('Fashions', 'Electronics', 'MobilesPhones', 'Perfumes') and two Query Params limit and page.

  @Get('/testParams/:category')
  @HttpCode(HttpStatus.OK)
  @UsePipes(new ValidationPipe())
  testJoiValidationParam(
    @Param() category: validationParamDto,
    @Query() limitAndPageSize: validationQueryParamDto,
    @Res() res: Response
  ) {
    res.json({
      category,
      limitAndPageSize
    });
  }

Create two dtos for those params:

export class validationParamDto {
    @Expose() @JoiSchema(Joi.string().valid('Fashions', 'Electronics', 'MobilesPhones', 'Perfumes').required())
    category: string;
}

@JoiSchemaOptions({
    allowUnknown: false
})

export class validationQueryParamDto {

    @Expose() @JoiSchema(Joi.number().min(0).max(100).message('Invalid limit'))
    limit: string;

    @Expose() @JoiSchema(Joi.number().min(0).max(100).message('Invalid page size'))
    page: string;
}

Finally, I want to thank you for taking the time to read my article and I hope this article is useful for you :).

For hands-on implementation and further exploration, you can access the complete codebase of a sample NestJS application using nestjs-joi and joi-class-decorators on GitHub. The repository includes practical examples and configurations demonstrating how to integrate and leverage robust data validation in NestJS:

Explore the NestJS Sample App on GitHub

Feel free to clone, fork, or contribute to enhance your understanding and implementation of data validation in NestJS.

Why should we use Typescript with NodeJs and Express?

AliFathy-1999 — Wed, 29 Mar 2023 00:05:40 +0000

Here are some topics I can cover to explain why using Typescript with Node and Express is beneficial :

1. What is Typescript and why is it useful in web development?

2. Why You Should Choose Typescript Over JavaScript?

3. How to set up TypeScript with Node.js and Express.

4. Best practices for using TypeScript with Node.js and Express.

1. What is Typescript?

Typescript is a programming language that adds static typing, compiling and OOP to JavaScript. It can be used for both client-side (Front-end Frameworks like Angular, React and vue) and server-side applications (Nodejs).

Why is it useful in web development?

It makes our code more secure and robust by preventing many bugs before the code is even shipped.
It catches problems during code development and integrates wonderfully with code editors like Visual Studio Code.

2. Why You Should Choose Typescript Over JavaScript?

Three reasons why you should choose TypeScript over JavaScript

Typescript is an enhanced version of JavaScript.
TypeScript makes it easier to write accurate code more quickly and catch bugs prior to runtime.
TypeScript is more reliable and easier to refactor. This enables developers to avoid errors and do restructure much easier.
TypeScript is more explicit. It takes our attention to make types explicitly on variables, return type and etc...
TypeScript is an object-oriented scripting language. These features make it possible for developers to write more structured, maintainable, and scalable code.
Dependent language (compiles to JavaScript).

3. How to set up TypeScript with Node.js and Express.

Steps to setup Nodejs typescript project :

1. Install Node and npm :

Make sure that you installed Node on your device

node -v to detect whether you have installed the Node or not. If you installed node output is v18.15.0 or any version. If you didn't install node output will be node: command not found.

You need to install node by going to Nodejs website NodeJS website

Make sure that you installed Node Package Manager npm on your device npm -v to detect whether you have installed the npm or not. If you installed npm output is 9.6.1 or any version. If you didn't install npm output will be npm: command not found.

2. Create a New Project Folder.

3. Start running npm in your project folder :

Open a terminal.
Run the command npm init -y to initial npm and install packages.

4. Add TypeScript as a dev dependency

npm install typescript --save-dev

5. Install ambient Node.js types for TypeScript :

npm install @types/node --save-dev

6. Create `tsconfig.json` :

npx tsc --init

Copy this in tsconfig.json

{
  "compilerOptions": {
    "target": "es5",                          
    "module": "commonjs",                    
    "lib": ["es6"],                     
    "allowJs": true,
    "outDir": "dist",                          
    "rootDir": ".",
    "strict": true,         
    "noImplicitAny": true,
    "esModuleInterop": true,
    "resolveJsonModule": true
  }
}

7. To reload server :

npm install nodemon ts-node -D

nodemon which is used to watch for changes to our code and automatically restart when a file is changed.
ts-node for running TypeScript code directly without having to wait for it be compiled.
Add nodemon.json file and write the following in it:

{
    "watch": ["./"],
    "ext": ".ts,.js",
    "ignore": [],
    "exec": "npx ts-node index.ts"
  }

8. Write in scripts in package.json, to use it in running server :

  "scripts": {
    "start:dev": "npx nodemon"
  },

9. Create our first TypeScript file `index.ts`.

10. Create simple server using express framework

First install express and @types/express

npm i express
npm i @types/express -D

Write in index.ts

import express,{ Application, Router ,Request, Response} from "express";

const app :Application = express();
var router :Router= require('express').Router();
const port :number = 3000;
app.use(router);

router.get("/", function (req:Request, res:Response) : void {
    res.send("<h1>Hello, I'm Ali Ahmed. I'm Software Engineer</h1>");
  });
app.listen(port, () => {
    console.log(`Server Running here 👉 http://localhost:${port}`);
})

11. Finally run this command to run server

npm run start:dev

Output will be :

> testnodewithtypescript@1.0.0 start:dev
> npx nodemon

[nodemon] 2.0.22
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): **/*
[nodemon] watching extensions: ts,js
[nodemon] starting `npx ts-node index.ts`
Server Running here 👉 http://localhost:3000

4. Best practices for using TypeScript with Node.js and Express.

1. Use strict typing:

{
  "compilerOptions": {
    "strict": true
  }
}

One of the key advantages of TypeScript is that it provides strong typing.
Strict mode activates 2 main compiler options:
1. noImplicitAny : explicit anys are not accepted by TypeScript.
2. strictNullChecks : will ask to tell when a value can be null.

2. Use interfaces:

Interfaces are a powerful feature of TypeScript that allow you to define a contract for an object's properties and methods. This can help you catch errors at compile-time and make your code more organized and maintainable. Use interfaces to define the shape of your data models and API responses. By using an interface to define the shape of the user object, you can catch errors at compile-time if you try to assign the wrong type of data to a property, or if you forget to include a required property. This can help you write more reliable code and avoid common bugs.

// In API responses
import { Request, Response } from 'express';

interface User {
    id: number;
    name: string;
    email: string;
    socialMediaProfile:string[]
    createdAt: Date;
  }

function getUser(req: Request, res: Response): void {
    const user: User = {
        id: 1,
        name: 'Ali Ahmed',
        email: 'aliahmedfathi37@gmail.com',
        socialMediaProfile:[
            "linkedin.com/in/ali-ahmed-fathi", // linkedin profile
            "https://github.com/AliFathy-1999", //Github profile
        ],
        createdAt: new Date(),
      };
}

//In Data models:

interface IUserModel{
    fname:String,
    lname:String,
    email:String,
    password:String,
}
const schema= new Schema<IUserModel>({
    fname:{
        type:String,
        required:true,
        trim:true,
        minlength:3,
        maxlength:20
    },
    lname:{
        type:String,
        required:true,
        trim:true,
        minlength:3,
        maxlength:20
    },
    email:{
        type:String,
        required:true,
        unique:true,
    },
    password:{
        type:String,
        required:true,
        trim:true,
        minlength:6,
    },
},{
    timestamps:true  //createdAt, updatedAt
});

3. Use Generics:

It helps developers to write more reusable and flexible code. Use generics to write functions and classes that can work with different types of data.

/*
Let's say you have a function that takes an array of objects and returns an array of a specific property from each object. You can use generics to make this function work with any type of object and any type of property.
*/
  function myGeneric<T, K extends keyof T>(items: T[], key: K): T[K][] {
    return items.map(item => item[key]);
  }
  const users: User[] = [
    { id: 1, name: 'Mustafa Mahmoud',socialMediaProfile:["",""], email: 'Mustafa@hotmail.com',createdAt:new Date },
    { id: 2, name: 'Bassem Mahmoud',socialMediaProfile:["",""], email: 'Bassem@hotmail.com',createdAt:new Date },
  ];

  const names = myGeneric(users, 'name'); // ['Mustafa Mahmoud', 'Bassem Mahmoud']

4. Use Async/Await:

API endpoint that fetches some data from a database using an asynchronous function.

  const getUserByEmail = async (req: Request, res: Response): Promise<void> =>{
    try {
        const { body: { email } } = req
      const data = await User.findOne({email});
      res.json(data);
    } catch (err) {
      res.status(500).json({ error: 'Internal server error' });
    }
  }

DEV Community: AliFathy-1999

How to Implement Data Validation in NestJS Using nestjs-joi and joi-class-decorators

Here are some topics I can cover:

1. Introduction to Data Validation in Web Applications.

2. Setting Up NestJS for Validation.

1. Install Node and npm :

2. Install NestJs and create new nestApp :

3. create a new pipe called validation:

4. Installing necessary packages (nestjs-joi, joi-class-decorators)

1. Create Endpoint '/testBody', Method type: Post,In app controller

2. Create Dto file called (validate.dto.ts) to validate this endpoint and create joi schema class (validationBodyDto):

3. Introduction to pipe and how to use it with Joi

4. Validation on Param and Query Params using Joi.

Finally, I want to thank you for taking the time to read my article and I hope this article is useful for you :).

Why should we use Typescript with NodeJs and Express?

Here are some topics I can cover to explain why using Typescript with Node and Express is beneficial :

1. What is Typescript and why is it useful in web development?

2. Why You Should Choose Typescript Over JavaScript?

3. How to set up TypeScript with Node.js and Express.

4. Best practices for using TypeScript with Node.js and Express.

1. What is Typescript?

Why is it useful in web development?

2. Why You Should Choose Typescript Over JavaScript?

3. How to set up TypeScript with Node.js and Express.

Steps to setup Nodejs typescript project :

1. Install Node and npm :

2. Create a New Project Folder.

3. Start running npm in your project folder :

4. Add TypeScript as a dev dependency

5. Install ambient Node.js types for TypeScript :

6. Create tsconfig.json :

7. To reload server :

8. Write in scripts in package.json, to use it in running server :

9. Create our first TypeScript file index.ts.

10. Create simple server using express framework

11. Finally run this command to run server

4. Best practices for using TypeScript with Node.js and Express.

1. Use strict typing:

2. Use interfaces:

3. Use Generics:

4. Use Async/Await:

Finally, I want to thank you for taking the time to read my article and I hope this article is useful for you :).

6. Create `tsconfig.json` :

9. Create our first TypeScript file `index.ts`.