DEV Community: Edmar Diaz

Writing Blazing Fast and Less Code CRUD Operation + OpenAPI in NestJS

Edmar Diaz — Thu, 09 Apr 2020 00:33:58 +0000

Introduction

Hello guys, today I'm gonna share to you how I write my CRUD Operations in a fastest way.

In this tutorial, we will create a simple ToDo List Backend with CRUD Operations, we will be using mysql as our database and typeorm for our ORM. We will be using nestjsx/crud package for our easy crud operation.

Before we start make sure you have the following installed and configured:

MySQL
NestJS

Let's Get Started

First let's create a new project using nest-cli:

nest new crud-operation

First lets install typeporm, mysql library and dotenv:

npm install --save dotenv
npm install --save @nestjs/typeorm typeorm mysql

Now lets create our .env file and database configuration service:

touch .env
mkdir src/shared && mkdir src/shared/services
touch src/shared//services/database-connection.service.ts

Let open our .env file and configure our database credential, make sure to put your own database credentials:

DATABASE_HOST = "localhost"
DATABASE_PORT = 3306
DATABASE_USER = "root"
DATABASE_PASSWORD = "root"
DATABASE_DB = "nestjs_crud"

Now let's open our database-connection.service.ts and lets add the follwing code:

import { Injectable } from '@nestjs/common'
import { TypeOrmOptionsFactory, TypeOrmModuleOptions } from '@nestjs/typeorm'
import 'dotenv/config'

@Injectable()
export class DatabaseConnectionService implements TypeOrmOptionsFactory {

  createTypeOrmOptions(): TypeOrmModuleOptions {
    return {
      name: 'default',
      type: 'mysql',
      host: process.env.DATABASE_HOST,
      port: Number(process.env.DATABASE_PORT),
      username: process.env.DATABASE_USER,
      password: process.env.DATABASE_PASSWORD,
      database: process.env.DATABASE_DB,
      synchronize: true,
      dropSchema: false,
      logging: true,
      entities: ['dist/**/*.entity.js'],
    }
  }
}

After we created our database connection service lets configure our TypeOrmModule and use our database connection service, lets open app.module.ts import our TypeOrmModule:

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { TypeOrmModule } from '@nestjs/typeorm';
import { DatabaseConnectionService } from './shared/services/database-connection.service';

@Module({
  imports: [
    TypeOrmModule.forRootAsync({
      useClass: DatabaseConnectionService
    })
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Now that we have our database connection configured lets check if we are really connected lets run our application by using this command:

npm run start:dev

Now lets wait for the compilation and build and after it we should see the following:

Now let's make our todo module, service and controller:

nest g module todo
nest g service todo
nest g controller todo

After we created our todo module, service and controller lets install the nestjsx/crud:

npm i @nestjsx/crud class-transformer class-validator
npm i @nestjsx/crud-typeorm

Now lets create our todo entity (Database Entity) :

touch src/todo/todo.entity.ts

Let's open our todo.entity.ts and create our todo entity:

import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn } from "typeorm";

@Entity('todos')
export class TodoEntity {

  @PrimaryGeneratedColumn() 
  id: number;

  @Column() 
  title: string;

  @Column()
  description: string

  @Column({
    type: 'boolean',
    default: false
  })
  is_done: boolean

  @CreateDateColumn()
  create_at: Date

  @UpdateDateColumn()
  updated_at: Date
}

We successfully created our todos table in our database.

Now Let's start our CRUD Operation, lets open our todo.service.ts and write the following code:

import { Injectable } from '@nestjs/common';
import { TypeOrmCrudService } from "@nestjsx/crud-typeorm";
import { TodoEntity } from './todo.entity';
import { InjectRepository } from '@nestjs/typeorm';

@Injectable()
export class TodoService extends TypeOrmCrudService<TodoEntity>{
  constructor(@InjectRepository(TodoEntity) repo) {
    super(repo)
  }
}

Now lets open our todo.controller.ts and write the following:

import { Controller } from '@nestjs/common';
import { Crud, CrudController } from '@nestjsx/crud';
import { TodoEntity } from './todo.entity';
import { TodoService } from './todo.service';

@Crud({
  model: {
    type: TodoEntity
  }
})

@Controller('todo')
export class TodoController implements CrudController<TodoEntity> {
  constructor(public service: TodoService) {}
}

At this point we are almost done with our service and controller and ofcourse CRUD Operation, we just need to import our TypeOrmModule and use our TodoEntity on our todo.module.ts so lets open up our todo.module.ts:

import { Module } from '@nestjs/common';
import { TodoService } from './todo.service';
import { TodoController } from './todo.controller';
import { TypeOrmModule } from '@nestjs/typeorm';
import { TodoEntity } from './todo.entity';

@Module({
  imports: [
    TypeOrmModule.forFeature([TodoEntity])
  ],
  providers: [TodoService],
  controllers: [TodoController]
})
export class TodoModule {}

At this point our CRUD Operation is done, now maybe you are wondering WTF where is @post, @Get, @Put, @Patch, @Delete methods?? Nestjs/Crud package handles it for us automatically but we can override different method if we want our own custom logic just go to their wiki for more info about it, Now lets setup our OpenAPI, for this we will be using nestjs swagger:

npm install --save @nestjs/swagger swagger-ui-express

After installing swagger lets open our main.ts:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';

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

  const options = new DocumentBuilder()
    .setTitle('Todo Crud')
    .setDescription('The todo API description')
    .setVersion('1.0')
    .addTag('todo')
    .build();
  const document = SwaggerModule.createDocument(app, options);
  SwaggerModule.setup('api/docs', app, document);

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

Now our openAPI is configured we can now access it on http://localhost:3000/api/docs

Now we can see our different todo endpoints. But our openAPI is not properly documented at this moment we need to add api tags for us to show what are the fields that we need on creating a todo for example this screenshot.

It's empty right?, We dont know what are to fields on our post request

In order to fix this we need to add @ApiProperty() on our column in our entity file, lets open our todo.entity.ts and add the decorator:

import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn, UpdateDateColumn } from "typeorm";
import { ApiProperty } from "@nestjs/swagger";

@Entity('todos')
export class TodoEntity {

  @PrimaryGeneratedColumn() 
  id: number;

  @ApiProperty()
  @Column() 
  title: string;

  @ApiProperty()
  @Column()
  description: string

  @ApiProperty()
  @Column({
    type: 'boolean',
    default: false
  })
  is_done: boolean

  @CreateDateColumn()
  create_at: Date

  @UpdateDateColumn()
  updated_at: Date
}

Lets refresh the page and, now we can see the fields

We can now test our crud operation.

Aside from that nestjs/crud comes in with different options like pagination, filters, etc

You dont have to worry about pagination, writing your own filters, etc, its blazing fast right and less code.

If you want to explore more and go deep in you can check nestjsx/crud wiki and repo

Wiki: https://github.com/nestjsx/crud/wiki
Repo: https://github.com/nestjsx/crud

FileUpload with NestJS using MinIO

Edmar Diaz — Tue, 07 Apr 2020 01:11:43 +0000

Introduction

Hello guys, since we are in a pandemic crisis due to coronavirus. Most of us are working from home and today I've decided to make a simple guide about FileUpload with NestJs and MinIO. This is going to be my first post on Dev.to.

Before I start the guide let me first give you a background about the technology that we are going to use in this post.

What is MinIO?

Minio is an open source object storage server released under Apache License V2. It is compatible with Amazon S3 cloud storage service. Minio follows a minimalist design philosophy.

Minio is light enough to be bundled with the application stack. It sits on the side of NodeJS, Redis, MySQL and the likes. Unlike databases, Minio stores objects such as photos, videos, log files, backups, container / VM images and so on. Minio is best suited for storing blobs of information ranging from KBs to TBs each. In a simplistic sense, it is like a FTP server with a simple get / put API over HTTP.

What is NestJS?

Nest (NestJS) is a server-side (backend) application framework beautifully crafted to support developers productivity and make their lives happier.

It uses progressive JavaScript, is built with and fully supports TypeScript (yet still enables developers to code in pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).

It is heavily inspired by common libraries and frameworks such as Angular and Java Spring Boot which improve developer productivity and experience.

Let's Get Started

Before starting make sure you have the following installed and configured:

NestJS - https://docs.nestjs.com/first-steps
MinIO - (I have my MinIO on docker) https://docs.min.io/

Create a new project on nest-cli:



 nest new minio-fileupload

You will be asked to choose between yarn or npm as package manager. Feel free to choose what suits you.

We will be using nestjs-minio-client as our nestjs minio client:

via NPM:



npm install nestjs-minio-client --save

via YARN:



yarn add nestjs-minio-client

After installing the nestjs-minio-client, lets generate our module, service on nest-cli:



nest g module minio-client
nest g service minio-client

After generating module and service let's create a config file:



touch src/minio-client/config.ts

Inside the config.ts (this is my MinIO configuration. You must use yours):



export const config = {
  MINIO_ENDPOINT: 'localhost',
  MINIO_PORT: 9001,
  MINIO_ACCESSKEY: 'AKIAIOSFODNN7EXAMPLE',
  MINIO_SECRETKEY: 'wJalrXUtnFEMIK7MDENGbPxRfiCYEXAMPLEKEY',
  MINIO_BUCKET: 'test'
}

Let us now register and configure our MinioModule and export our MinioService on our minio-client.module.ts file:



import { Module } from '@nestjs/common';
import { MinioClientService } from './minio-client.service';
import { MinioModule } from 'nestjs-minio-client';
import { config } from './config'
@Module({
  imports: [
    MinioModule.register({
      endPoint: config.MINIO_ENDPOINT,
      port: config.MINIO_PORT,
      useSSL: false,
      accessKey: config.MINIO_ACCESSKEY,
      secretKey: config.MINIO_SECRETKEY,
    })
  ],
  providers: [MinioClientService],
  exports: [MinioClientService]
})
export class MinioClientModule {}

Now that we register our MinioModule let's start creating our file models:



touch src/minio-client/file.model.ts

Here is the code for our file.model.ts:



export interface BufferedFile {
  fieldname: string;
  originalname: string;
  encoding: string;
  mimetype: AppMimeType;
  size: number;
  buffer: Buffer | string;
}

export interface StoredFile extends HasFile, StoredFileMetadata {}

export interface HasFile {
  file: Buffer | string;
}
export interface StoredFileMetadata {
  id: string;
  name: string;
  encoding: string;
  mimetype: AppMimeType;
  size: number;
  updatedAt: Date;
  fileSrc?: string;
}

export type AppMimeType =
  | 'image/png'
  | 'image/jpeg';

Nest step, inside our minio-client.service.ts:



import { Injectable, Logger, HttpException, HttpStatus } from '@nestjs/common';
import { MinioService } from 'nestjs-minio-client';
import { Stream } from 'stream';
import { config } from './config'
import { BufferedFile } from './file.model';
import * as crypto from 'crypto'

@Injectable()
export class MinioClientService {
    private readonly logger: Logger;
    private readonly baseBucket = config.MINIO_BUCKET

  public get client() {
    return this.minio.client;
  }

  constructor(
    private readonly minio: MinioService,
  ) {
    this.logger = new Logger('MinioStorageService');
  }

  public async upload(file: BufferedFile, baseBucket: string = this.baseBucket) {
    if(!(file.mimetype.includes('jpeg') || file.mimetype.includes('png'))) {
      throw new HttpException('Error uploading file', HttpStatus.BAD_REQUEST)
    }
    let temp_filename = Date.now().toString()
    let hashedFileName = crypto.createHash('md5').update(temp_filename).digest("hex");
    let ext = file.originalname.substring(file.originalname.lastIndexOf('.'), file.originalname.length);
    const metaData = {
      'Content-Type': file.mimetype,
      'X-Amz-Meta-Testing': 1234,
    };
    let filename = hashedFileName + ext
    const fileName: string = `${filename}`;
    const fileBuffer = file.buffer;
    this.client.putObject(baseBucket,fileName,fileBuffer,metaData, function(err, res) {
      if(err) throw new HttpException('Error uploading file', HttpStatus.BAD_REQUEST)
    })

    return {
      url: `${config.MINIO_ENDPOINT}:${config.MINIO_PORT}/${config.MINIO_BUCKET}/${filename}` 
    }
  }

  async delete(objetName: string, baseBucket: string = this.baseBucket) {
    this.client.removeObject(baseBucket, objetName, function(err, res) {
      if(err) throw new HttpException("Oops Something wrong happend", HttpStatus.BAD_REQUEST)
    })
  }
}

If you notice on my metaData object i have X-Amz-Meta-Testing this is just a sample if you want to add your custom metadata.

At this point, our minio-client module is now ready, to test it lets make a new module with service and controller:



nest g module file-upload
nest g service file-upload
nest g controller file-upload

Now let's open our src/file-upload/file-upload.module.ts and import our MinioClientModule:



import { Module } from '@nestjs/common';
import { FileUploadService } from './file-upload.service';
import { FileUploadController } from './file-upload.controller';
import { MinioClientModule } from 'src/minio-client/minio-client.module';

@Module({
  imports: [
    MinioClientModule
  ],
  providers: [FileUploadService],
  controllers: [FileUploadController]
})
export class FileUploadModule {}

Now we will create our first route on our file-upload.controller.ts:



import { Controller, Post, UseInterceptors, UploadedFile } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express'
import { FileUploadService } from './file-upload.service';
import { BufferedFile } from 'src/minio-client/file.model';

@Controller('file-upload')
export class FileUploadController {
  constructor(
    private fileUploadService: FileUploadService
  ) {}

  @Post('single')
  @UseInterceptors(FileInterceptor('image'))
  async uploadSingle(
    @UploadedFile() image: BufferedFile
  ) {
    console.log(image)
  }
}

In this code, we created the HTTP POST Method with and endpoint /file-upload/single first lets try to console.log the image to see if we get the BufferFile. Here is the screenshot:

Via Insomnia / Postman (Multipart Form):

Buffered Image File

Our next step is to use our MinioClientService to upload it on our MinIO S3 Storage, let's open our file-upload.service.ts:



import { Injectable } from '@nestjs/common';
import { MinioClientService } from 'src/minio-client/minio-client.service';
import { BufferedFile } from 'src/minio-client/file.model';

@Injectable()
export class FileUploadService {
  constructor(
    private minioClientService: MinioClientService
  ) {}

  async uploadSingle(image: BufferedFile) {

    let uploaded_image = await this.minioClientService.upload(image)

    return {
      image_url: uploaded_image.url,
      message: "Successfully uploaded to MinIO S3"
    }
  }
}

The next step is to use our FileUploadService on FileUploadController, let's go back to our file-upload.controller.ts:



import { Controller, Post, UseInterceptors, UploadedFile } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express'
import { FileUploadService } from './file-upload.service';
import { BufferedFile } from 'src/minio-client/file.model';

@Controller('file-upload')
export class FileUploadController {
  constructor(
    private fileUploadService: FileUploadService
  ) {}

  @Post('single')
  @UseInterceptors(FileInterceptor('image'))
  async uploadSingle(
    @UploadedFile() image: BufferedFile
  ) {
    return await this.fileUploadService.uploadSingle(image)
  }
}

Now try sending another POST request on Postman or Insomnia. And you should see the follwing:

Congrats, at this point we successfully uploaded our image on our MinIO storage. But wait!!! There's more.. How about multiple image field??? Is it possible on nestjs?? Well, my answer is YES!!! xD and heres how

First we need to create a new endpoint on our file-upload.controller.ts:



import { Controller, Post, UseInterceptors, UploadedFile, UploadedFiles } from '@nestjs/common';
import { FileInterceptor, FileFieldsInterceptor } from '@nestjs/platform-express'
import { FileUploadService } from './file-upload.service';
import { BufferedFile } from 'src/minio-client/file.model';

@Controller('file-upload')
export class FileUploadController {
  constructor(
    private fileUploadService: FileUploadService
  ) {}

  @Post('single')
  @UseInterceptors(FileInterceptor('image'))
  async uploadSingle(
    @UploadedFile() image: BufferedFile
  ) {
    return await this.fileUploadService.uploadSingle(image)
  }

  @Post('many')
  @UseInterceptors(FileFieldsInterceptor([
    { name: 'image1', maxCount: 1 },
    { name: 'image2', maxCount: 1 },
  ]))
  async uploadMany(
    @UploadedFiles() files: BufferedFile,
  ) {
    return this.fileUploadService.uploadMany(files)
  }
}

Then we add the uploadMany method on our FileUploadService:



import { Injectable } from '@nestjs/common';
import { MinioClientService } from 'src/minio-client/minio-client.service';
import { BufferedFile } from 'src/minio-client/file.model';

@Injectable()
export class FileUploadService {
  constructor(
    private minioClientService: MinioClientService
  ) {}

  async uploadSingle(image: BufferedFile) {

    let uploaded_image = await this.minioClientService.upload(image)

    return {
      image_url: uploaded_image.url,
      message: "Successfully uploaded to MinIO S3"
    }
  }

  async uploadMany(files: BufferedFile) {

    let image1 = files['image1'][0]
    let uploaded_image1 = await this.minioClientService.upload(image1)

    let image2 = files['image2'][0]
    let uploaded_image2 = await this.minioClientService.upload(image2)

    return {
      image1_url: uploaded_image1.url,
      image2_url: uploaded_image2.url,
      message: 'Successfully uploaded mutiple image on MinioS3'
    }
  }
}

Then try sending another post request on Postman or Insomnia. And you should see the follwing:

Now we are all done. Congratulations and Keep Safe Everyone.

I will leave the repo here:
https://github.com/efd1006/nestjs-file-upload-minio.git