DEV Community: adewale-codes

gRPC with NestJS: A Comprehensive Beginner's Guide

adewale-codes — Sat, 08 Jun 2024 17:34:50 +0000

The world of software development is changing quickly, and creating scalable and effective microservices is crucial. It is frequently difficult to communicate across different services, particularly when low latency and great performance are desired. Introducing gRPC, a potent, open-source RPC framework developed by Google. When paired with NestJS, an advanced Node.js framework, gRPC offers a reliable inter-service communication solution. You will learn the basics of gRPC, how to integrate it with NestJS, and develop a basic chat service as an example by following this guide.

Understanding the Fundamentals

What is gRPC?
Google created the open-source gRPC (Google Remote Procedure Call) RPC (Remote Procedure Call) framework. It uses Protocol Buffers (protobuf) for serialization and HTTP/2 for transport to facilitate effective, language-neutral communication between distributed systems.

Key Features of gRPC:

Language Independence: Supports multiple programming languages.
HTTP/2 Support: Provides features like multiplexing and header compression.
Bidirectional Streaming: Supports streaming of data between client and server.
Automatic Code Generation: Reduces boilerplate code through protobuf definitions.

What is NestJS?

NestJS is a Node.js framework for creating scalable, dependable, and effective server-side applications. It makes use of both TypeScript and contemporary JavaScript features to offer a powerful development environment.

Key Features of NestJS:

Modular Architecture: Encourages a modular approach to application design.
Dependency Injection: Simplifies management of dependencies.
Extensive CLI: Provides tools to generate boilerplate code and manage the project.
Support for Multiple Transport Layers: Includes HTTP, WebSocket, and gRPC.

Setting Up the Project

Step 1: Creating a New NestJS Project
First, let's use the Nest CLI to establish a new NestJS project:

nest new grpc-chat-service

Navigate into the project directory:

cd grpc-chat-service

Step 2: Installing Necessary Dependencies
To integrate gRPC with NestJS, install the necessary dependencies:

npm install @nestjs/microservices grpc @grpc/proto-loader

Defining the Protocol Buffers File

Protocol Buffers (protobuf) is an extendable, platform- and language-neutral method for serializing structured data. To specify our service contract, create a file called chat.proto in the src directory:

syntax = "proto3";

service ChatService {
  rpc SendMessage (Message) returns (Empty);
}

message Message {
  string content = 1;
}

message Empty {}

In this definition:

Service: ChatService contains an RPC method SendMessage.
Messages: Defines the structure of Message and Empty.

Implementing the Server

Let's now put the server-side logic for our chat service into practice.
Step 1: Create a Controller

Create a new file named chat.controller.ts in the src directory:
import { Controller } from '@nestjs/common';
import { GrpcMethod } from '@nestjs/microservices';
import { Empty, Message } from './chat.grpc.pb';

@Controller()
export class ChatController {
  private messages: string[] = [];

  @GrpcMethod('ChatService', 'SendMessage')
  async sendMessage(data: Message): Promise<Empty> {
    console.log('Received message:', data.content);
    this.messages.push(data.content);
    console.log('Current messages:', this.messages);
    return {};
  }
}

@GrpcMethod: Decorator to map the gRPC method to the NestJS method.
sendMessage Method: Logs the received message, stores it in an in-memory array, and prints the current list of messages. Step 2: Update the Module Update app.module.ts to include the ChatController:

import { Module } from '@nestjs/common';
import { ChatController } from './chat.controller';

@Module({
  controllers: [ChatController],
})
export class AppModule {}

Implementing the Client

We'll now build a client in order to communicate with our gRPC server.
Step 1: Create a Client Class
Create a new file named chat.client.ts in the src directory:

import { Injectable } from '@nestjs/common';
import { ClientGrpc, ClientProxyFactory, Transport } from '@nestjs/microservices';
import { Message } from './chat.grpc.pb';
import { join } from 'path';

@Injectable()
export class ChatClient {
  private readonly client: ClientGrpc;

  constructor() {
    this.client = ClientProxyFactory.create({
      transport: Transport.GRPC,
      options: {
        url: 'localhost:5000',
        package: 'chat',
        protoPath: join(__dirname, 'chat.proto'),
      },
    });
  }

  async sendMessage(content: string): Promise<void> {
    const message: Message = { content };
    await this.client.getService('ChatService').sendMessage(message).toPromise();
  }
}

In this client:

ClientProxyFactory.create: Creates a gRPC client.
sendMessage Method: Sends a message to the server.

Step 2: Integrate Client in Module
Update app.module.ts to include the ChatClient:

import { Module } from '@nestjs/common';
import { ChatClient } from './chat.client';
import { ChatController } from './chat.controller';

@Module({
  controllers: [ChatController],
  providers: [ChatClient],
})
export class AppModule {}

Bootstrapping the Application

Bootstrapping is the process of starting the application, initializing necessary services, and getting the server up and running.
Update the main.ts file:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { Transport } from '@nestjs/microservices';
import { join } from 'path';

async function bootstrap() {
  const app = await NestFactory.createMicroservice(AppModule, {
    transport: Transport.GRPC,
    options: {
      url: 'localhost:5000',
      package: 'chat',
      protoPath: join(__dirname, 'chat.proto'),
    },
  });
  await app.listenAsync();
}
bootstrap();

In this code:

NestFactory.createMicroservice: Creates a microservice instance.
Transport Options: Specifies gRPC as the transport and provides necessary configuration like URL, package, and path to the protobuf file
app.listenAsync: Starts the microservice and listens for incoming gRPC requests.

Running and Testing the Application

Step 1: Start the Server
Run the server:

npm run start:dev

Step 2: Use the Client to Send a Message
We can now use the ChatClient to send a message to our server. You can create a simple script to test this:
Create test-client.ts:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ChatClient } from './chat.client';

async function testClient() {
  const app = await NestFactory.createApplicationContext(AppModule);
  const client = app.get(ChatClient);
  await client.sendMessage('Hello, gRPC!');
  await app.close();
}

testClient();

Run the script:

`ts-node src/test-client.ts`

You should see the server logging the received message and maintaining a list of messages.

Conclusion

We have examined how to integrate gRPC with NestJS to create effective microservices in this extensive article. We've gone over the basics of gRPC, used Protocol Buffers to build a service, used an in-memory message storage to provide server-side functionality, built a message-sending client, and bootstrapped our NestJS application. You now have the basis to use gRPC's power in your NestJS apps, allowing for high-performance and scalable inter-service communication. Just follow these instructions. Using gRPC and NestJS together provides a reliable and effective solution whether you're developing microservices, real-time apps, or intricate distributed systems.

Getting Started with NestJs: CRUD Operations

adewale-codes — Thu, 09 May 2024 09:04:51 +0000

NestJS is a powerful framework for building efficient, scalable Node.js server-side applications. In this beginner-friendly guide, we'll walk through the creation of a simple NestJS project to help you understand its fundamental concepts

Prerequisites

Before diving into NestJS, ensure you have Node.js and npm (Node Package Manager) installed on your system. You can download and install them from the official Node.js website.

Setting Up Your NestJS Project
First, let's create a new NestJS project. Open your terminal and run the following commands:

npm install -g @nestjs/cli
nest new my-nest-project
cd my-nest-project

This will set up a new NestJS project with the necessary dependencies and files.

Exploring the Project Structure

Once your project is created, you'll find several files and folders. Let's go through them one by one:

main.ts: This file serves as the entry point to your NestJS application. It initializes the NestJS application and starts the serve.
- Explanation: This file initializes the NestJS application by creating an instance of the AppModule.
- Why it's important: Understanding the entry point of the application helps you grasp how NestJS bootstraps and starts your server.
- dotenv.config(): This line loads environment variables from a .env file, allowing you to store sensitive information securely.
app.module.ts: The root module of your application. It imports other modules, controllers, and services and defines the main configuration of your app.
app.controller.ts: Controllers are responsible for handling incoming requests and returning responses. They are bound to specific routes and define endpoint logic.
- Explanation: This controller defines a single route (GET /) that returns a "Hello World!" message.
- Why it's important: Controllers handle incoming HTTP requests and define the endpoints of your application. They provide a clean separation of concerns by delegating actual logic to services.
- Dependency Injection: Notice how the AppService is injected into the controller's constructor. This allows us to use the methods defined in AppService within the controller.
app.service.ts: Services contain the business logic of your application. They are injected into controllers to handle data processing and manipulation.
- Explanation: The AppService class contains a single method getHello which returns a "Hello World!" message.
- Why it's important: Services encapsulate business logic and data manipulation tasks. They are reusable across multiple controllers and promote code maintainability.

Running Your NestJS Application

npm run start

This will start the server, and you should see the message "Hello World!" when you navigate to http://localhost:3000 in your browser.

Exploring the Project Structure

Once your project is created, you'll find several files and folders. Let's go through them one by one:

main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as dotenv from 'dotenv';

async function bootstrap() {
  dotenv.config();
  const app = await NestFactory.create(AppModule);
  await app.listen(3000);
}
bootstrap();

Explanation: This file is the entry point of the NestJS application. It initializes the NestJS application, loads environment variables, and starts the server.
Why it's important: Understanding the entry point helps you understand how NestJS bootstraps and starts the server.
dotenv.config(): This line loads environment variables from a .env file, allowing you to store sensitive information securely.

app.module.ts

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ProductsModule } from './products/products.module';
import { ConfigModule, ConfigService } from '@nestjs/config';

@Module({
  imports: [
    ProductsModule,
    ConfigModule.forRoot(),
    TypeOrmModule.forRootAsync({
      imports: [ConfigModule], 
      useFactory: async (configService: ConfigService) => ({
        type: 'postgres',
        host: configService.get('DB_HOST'),
        port: configService.get('DB_PORT'),
        username: configService.get('DB_USERNAME'),
        password: configService.get('DB_PASSWORD'),
        database: configService.get('DB_DATABASE'),
        entities: [__dirname + '/**/*.entity{.ts,.js}'],
        synchronize: true,
      }),
      inject: [ConfigService],
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Explanation: This file defines the root module of the NestJS application. It imports other modules, controllers, and services and configures the application.
Why it's important: The root module is the core of your application. It orchestrates the various components and sets up configurations.

app.controller.ts

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

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

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
}

Explanation: This controller defines a single route (GET /) that returns a "Hello World!" message.
Why it's important: Controllers handle incoming HTTP requests and define the endpoints of your application.
Dependency Injection: Notice how the AppService is injected into the controller's constructor. This allows us to use the methods defined in AppService within the controller.

app.service.ts

import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World!';
  }
}

Explanation: The AppService class contains a single method getHello which returns a "Hello World!" message.
Why it's important: Services encapsulate business logic and data manipulation tasks. They are reusable across multiple controllers and promote code maintainability.

CRUD Operations

Products: This folder contains modules, controllers, services, and entities related to managing products. It demonstrates how to organize code into separate modules for better maintainability. Let's go through them one by one:

products/product.entity.ts

import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';

@Entity()
export class ProductEntity {
  @PrimaryGeneratedColumn('uuid')
  id: string;

  @Column()
  title: string;

  @Column()
  description: string;

  @Column('decimal', { precision: 10, scale: 2 })
  price: number;
}

Explanation: This file defines the ProductEntity class, which represents a product entity in the database. It uses the TypeORM library for Object-Relational Mapping (ORM).
Why it's important: Entities map to database tables and represent the structure of the data stored in the database. They help in defining the schema and performing CRUD operations.

products/product.model.ts

export class Product {
    constructor (
        public id: string, 
        public title: string, 
        public description: string, 
        public price: number
        ) {
    };
}

Explanation: This file defines the Product class, which represents a product object in the application. It's a simple TypeScript class with properties corresponding to a product's attributes.
Why it's important: Models represent the data transferred between different parts of the application, such as between the controller and the service. They help maintain a consistent data structure throughout the application.

products/product.controller.ts

import { Body, Controller, Delete, Get, NotFoundException, Param, Patch, Post } from "@nestjs/common";
import { ProductsService } from "./products.service";

@Controller('products')
export class ProductsController {
    constructor(private readonly productsService: ProductsService) {}

    @Post()
    async addProduct(
        @Body('title') prodTitle: string,
        @Body('description') prodDesc: string,
        @Body('price') prodPrice: number
    ) {
        const productId = await this.productsService.insertProduct(prodTitle, prodDesc, prodPrice);
        return { id: productId };
    }

    @Get()
    async getAllProducts() {
        return await this.productsService.getProducts();
    }

    @Get(':id')
    async getProduct(@Param('id') prodId: string) {
        const product = await this.productsService.getSingleProduct(prodId);
        if (!product) {
            throw new NotFoundException('Product not found');
        }
        return product;
    }

    @Patch(':id')
    async updateProduct(
        @Param('id') prodId: string, 
        @Body('title') prodTitle: string, 
        @Body('description') prodDesc: string, 
        @Body('price') prodPrice: number
    ) {
        await this.productsService.updateProduct(prodId, prodTitle, prodDesc, prodPrice);
        return null;
    }

    @Delete(':id')
    async removeProduct(@Param('id') prodId: string) {
        await this.productsService.deleteProduct(prodId);
        return null;
    }
}

Explanation: This controller handles HTTP requests related to products. It defines routes for adding, retrieving, updating, and deleting products, and delegates the actual logic to the ProductsService.
Why it's important: Controllers define the API endpoints and handle incoming HTTP requests. They keep the endpoint logic separate from the business logic, promoting code organization and maintainability.

products/product.module.ts

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { ProductsController } from './products.controller';
import { ProductsService } from './products.service';
import { ProductEntity } from './product.entity';

@Module({
  imports: [TypeOrmModule.forFeature([ProductEntity])],
  controllers: [ProductsController],
  providers: [ProductsService],
})
export class ProductsModule {}

Explanation: This module encapsulates the products-related components: the controller, service, and entity. It imports the TypeOrmModule to provide database-related functionalities.
Why it's important: Modules help organize code into cohesive units and define the boundaries of the application. They encapsulate related functionality and promote code reusability and maintainability.

products/product.service.ts

import { Injectable, NotFoundException } from "@nestjs/common";
import { InjectRepository } from "@nestjs/typeorm";
import { Repository } from "typeorm";
import { ProductEntity } from "./product.entity";

@Injectable()
export class ProductsService {
  constructor(
    @InjectRepository(ProductEntity)
    private readonly productRepository: Repository<ProductEntity>,
  ) {}

  async insertProduct(title: string, desc: string, price: number) {
    const newProduct = await this.productRepository.create({
      title,
      description: desc,
      price,
    });
    await this.productRepository.save(newProduct);
    return newProduct.id;
  }

  async getProducts() {
    return await this.productRepository.find();
  }

  async getSingleProduct(productId: string) {
    return await this.productRepository.findOne({ where: { id: productId } });
  }


  async updateProduct(productId: string, title: string, desc: string, price: number) {
    const product = await this.productRepository.findOne({ where: { id: productId } });
    if (!product) {
      throw new NotFoundException('Could not find product');
    }
    product.title = title || product.title;
    product.description = desc || product.description;
    product.price = price || product.price;
    await this.productRepository.save(product);
  }


  async deleteProduct(prodId: string) {
    const result = await this.productRepository.delete(prodId);
    if (result.affected === 0) {
      throw new NotFoundException('Could not find product');
    }
  }
}

Explanation: This service contains methods to perform CRUD operations on products. It interacts with the database using the ProductEntity and TypeORM.
Why it's important: Services encapsulate business logic and data manipulation tasks. They provide a clean separation between data access and controller logic, promoting code maintainability and testability.

Understanding the files and their functionalities in the products folder is crucial for building a complete NestJS application with CRUD operations for managing products. These files work together to handle HTTP requests, interact with the database, and provide a seamless user experience.

Conclusion

Congratulations! You've successfully created and explored a basic NestJS project. This is just the beginning of your journey with NestJS. As you continue to explore the framework, you'll discover its rich features and capabilities for building robust server-side applications.

In the next steps, you can experiment with adding new routes, services, and modules to extend the functionality of your NestJS application. Don't hesitate to refer to the official NestJS documentation for more in-depth explanations and examples.

Happy coding!

github:https://github.com/adewale-codes/nest_crud

Creating a responsive sidebar

adewale-codes — Thu, 22 Feb 2024 11:01:58 +0000

Developing a responsive sidebar in ReactJS usually requires a blend of CSS for styling and React components for handling state and rendering. Additionally, external libraries such as Tailwind CSS can be employed to facilitate CSS, as demonstrated in this project.

Getting started:

Initially, establish a new directory for the sidebar application. Subsequently, in the terminal, input the command npm create vite@latest. Finally, execute npm run dev to launch the web application.

Here is a sample

npx create-vite@latest sidebar - template react
cd sidebar
npm install
npm run dev

Let's proceed with the installation of Tailwind CSS. Initially, we need to install Tailwind and its dependencies by executing the following command:

npm install -D tailwindcss postcss autoprefixer

Afterward, generate the Tailwind CSS configuration files by using the following command. This will create the default configuration files, namely tailwind.config.js and postcss.config.js, in the root directory of your project

npx tailwindcss init -p

Configure the postcss.config.js file by opening the generated file and ensuring that it resembles the following:

module.exports = {
 plugins: {
 tailwindcss: {},
 autoprefixer: {},
 },
};

Set up index.css to incorporate Tailwind CSS: Access the src/index.css file (or establish it if not present) and import Tailwind CSS.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* Your additional styles here */

Start or restart your Vite development server:

npm run dev

Let's begin developing our component in App.jsx.
The import statement includes a particular function, useState, from the "react" library. useState is a React hook utilized for state management in functional components.

import { useState } from "react";

Sidebar Component: This defines a functional component named "Sidebar." In React, components are reusable code blocks that encapsulate specific portions of the user interface.

const Sidebar = () => {

State Management: This code line initializes a state variable named "open" along with a function "setOpen" to handle the state. By using useState(true), the initial value of "open" is set to true. This state is employed to govern whether the sidebar is in an open or closed state.

const [open, setOpen] = useState(true);

Menu Items: A array named "Menus" is introduced, comprising objects that represent distinct menu items. Each object possesses properties such as "title" (denoting the menu item name) and "src" (indicating the icon source).

const Menus = [
 { title: "Overview", src: "Overview" },
 { title: "Transactions", src: "Transactions" },
 { title: "Loyalty Cards", src: "Card", gap: true },
 { title: "Subscriptions ", src: "Calendar" },
 { title: "Debts", src: "Debt" },
 { title: "Legal information", src: "Legal" },
 { title: "Notifications ", src: "Notifications", gap: true },
 { title: "Setting", src: "Settings" },
 ];

Return Statement (JSX): Within the return statement, you'll find the JSX (JavaScript XML) code outlining the structure of the sidebar component. JSX is a JavaScript syntax extension frequently employed with React to define the desired appearance of the user interface.

return (
 <div className="flex">
 {/* … (code for sidebar structure) */}
 </div>
);

Sidebar Structure: The primary structure of the sidebar is established by this div element. The className attribute incorporates a collection of CSS classes influencing the sidebar's appearance and functionality. The "open" variable dynamically adjusts the sidebar's width, contingent on whether it is open or closed.

<div className={` ${open ? "w-72" : "w-20 "} bg-black h-screen p-5 pt-8 relative duration-300`}>

Event Handling: A control button utilizes an image. When this button is clicked, it activates the setOpen function, toggling the value of "open" between true and false. This action produces the effect of opening and closing the sidebar.

<img
 src="/assets/control.png"
 onClick={() => setOpen(!open)}
/>

Rendering Menu Items: This section of the code iterates through the "Menus" array, rendering each menu item as a list item (

). The presentation of each item is influenced by the state variable "open"

{Menus.map((Menu, index) => (
 // … (code for rendering each menu item)
))}

In essence, this code constructs a responsive sidebar featuring a set of menu items. The sidebar's open and closed states are controlled by clicking a control button, enhancing the user's navigation experience in a web application.

Here is the complete code:

import { useState } from "react";
const Sidebar = () => {
 const [open, setOpen] = useState(true);
 const Menus = [
 { title: "Overview", src: "Overview" },
 { title: "Transactions", src: "Transactions" },
 { title: "Loyalty Cards", src: "Card", gap: true },
 { title: "Subscriptions ", src: "Calendar" },
 { title: "Debts", src: "Debt" },
 { title: "Legal information", src: "Legal" },
 { title: "Notifications ", src: "Notifications", gap: true },
 { title: "Setting", src: "Settings" },
 ];
 return (
 <div className="flex">
 <div
 className={` ${
 open ? "w-72" : "w-20 "
 } bg-black h-screen p-5 pt-8 relative duration-300`}
 >
 <img
 src="/assets/control.png"
 className={`absolute cursor-pointer -right-3 top-9 w-7 border-dark-purple
 border-2 rounded-full ${!open && "rotate-180"}`}
 onClick={() => setOpen(!open)}
 />
 <div className="flex gap-x-4 items-center">
 <img
 src="/assets/smiley.svg"
 className={`cursor-pointer duration-500 ${
 open && "rotate-[360deg]"
 }`}
 />
 <h1
 className={`text-white origin-left font-medium text-xl duration-200 ${
 !open && "scale-0"
 }`}
 >
 AdeCodes
 </h1>
 </div>
 <ul className="pt-6">
 {Menus.map((Menu, index) => (
 <li
 key={index}
 className={`flex rounded-md p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4 
 ${Menu.gap ? "mt-9" : "mt-2"} ${
 index === 0 && "bg-light-white"
 } `}
 >
 <img src={`/assets/${Menu.src}.svg`} />
 <span className={`${!open && "hidden"} origin-left duration-200`}>
 {Menu.title}
 </span>
 </li>
 ))}
 </ul>
 </div>
 </div>
 )
}
export default Sidebar

GitHub Link: https://github.com/adewale-codes/responsive-sidebar