tkssharma | RSS Feed

Is NestJS Already Implementing SOLID Principles?

hello@tkssharma.com — Sun, 19 May 2024 00:00:00 GMT

Is NestJS Already Implementing SOLID Principles?

NestJS, a progressive Node.js framework for building efficient, reliable, and scalable server-side applications, has gained significant popularity among developers due to its robust architecture and developer-friendly features. As software engineering principles continue to evolve, developers often assess how well frameworks adhere to these principles, including the SOLID principles of object-oriented design. In this article, we’ll explore whether NestJS aligns with SOLID principles and how it supports developers in writing clean, maintainable code.

SOLID is an acronym introduced by Robert C. Martin, also known as Uncle Bob, to represent five key principles of object-oriented programming and design. These principles aim to guide developers in writing code that is easy to understand, maintain, and extend:

Single Responsibility Principle (SRP): A class should have only one reason to change.
Open/Closed Principle (OCP): Software entities (classes, modules, functions, etc.) should be open for extension but closed for modification.
Liskov Substitution Principle (LSP): Objects of a superclass should be replaceable with objects of its subclass without affecting the correctness of the program.
Interface Segregation Principle (ISP): Clients should not be forced to depend on interfaces they do not use.
Dependency Inversion Principle (DIP): High-level modules should not depend on low-level modules; both should depend on abstractions. Abstractions should not depend on details; details should depend on abstractions.

but before that, I will provide an overview of the folder structure so you can understand what I said in the explanation below

project-root/  
│  
├── src/  
│   ├── app.module.ts  
│   ├── main.ts  
│   │  
│   ├── modules/  
│   │   ├── module-one/  
│   │   │   ├── module-one.module.ts  
│   │   │   ├── controllers/  
│   │   │   │   └── *.controller.ts  
│   │   │   ├── services/  
│   │   │   │   └── *.service.ts  
│   │   │   └── ...  
│   │   │  
│   │   ├── module-two/  
│   │   │   ├── module-two.module.ts  
│   │   │   ├── controllers/  
│   │   │   │   └── *.controller.ts  
│   │   │   ├── services/  
│   │   │   │   └── *.service.ts  
│   │   │   └── ...  
│   │   └── ...  
│   │  
│   └── common/  
│       ├── decorators/  
│       │   └── *.ts  
│       │  
│       ├── utils/  
│       │   └── *.ts  
│       └── ...  
│  
├── test/  
│   └── *.spec.ts  
│  
├── public/  
│   └── assets/  
│       └── ...  
│  
├── dist/            (Generated during build)  
│   └── ...  
│  
├── node_modules/    (Dependencies)  
│   └── ...  
│  
├── package.json  
├── tsconfig.json  
└── README.md

Single Responsibility Principle (SRP):

NestJS encourages developers to create modular applications where each module or class has a single responsibility. You can see this in the folder structure where NestJS provides or implements a “modules” folder for developers to create module(s) that suit their use. Modules encapsulate related functionality, such as controllers, services, and repositories (not in all case). This modular approach ensures that each component focuses on a specific task, adhering to the SRP.

Example of Module in NextJS (Auth Module)

Open/Closed Principle (OCP):

NestJS supports the OCP by advocating for the use of dependency injection and decorators. With dependency injection, developers can inject dependencies into classes without modifying their code directly, thus extending behavior without altering existing code. Similarly, decorators enable the extension of classes and methods without modifying their source code, maintaining the principle of being closed for modification but open for extension.

Example of dependency injection

import { Injectable } from '@nestjs/common';  
  
@Injectable()  
export class UserProvider {  
  getUsers(): User[] {  
    // Retrieve users from database  
    // Example implementation  
    return [  
      {  
        id: '1',  
        name: 'John Doe',  
        email: 'john@example.com',  
      },  
      {  
        id: '2',  
        name: 'Jane Smith',  
        email: 'jane@example.com',  
      },  
    ];  
  }  
  
  // Other methods for retrieving users...  
}

// UserController.ts


import { Injectable } from '@nestjs/common';  
import { UserProvider } from './UserProvider';  
  
@Injectable()  
export class UserController {  
  constructor(private readonly userProvider: UserProvider) {}  
  
  getUsers(): User[] {  
    return this.userProvider.getUsers();  
  }  
  
  // Other user-related methods...  
}

Maybe with this example, you still don’t really see what OCP is like. I will give an example of using a “decorator” where we can add programs or logic to a controller without having to touch the code of the controller. So there will be no defects in the existing controller code.

This is the Decorator Code that we will implement:

// This is RoleGuard Decorator for   
// checking the role before it execute the controller  
@Injectable()  
export class RoleGuard implements CanActivate {  
  constructor(    private userService: AuthService,  
    private readonly reflector: Reflector,  ) {}  
  
  async canActivate(context: ExecutionContext): Promise<boolean> {  
    const roles = this.reflector.get<string[]>('roles', context.getHandler());  
    if (!roles) {  
      return true; // No roles specified, allow access  
    }  
  
    const request = context.switchToHttp().getRequest();  
    const userId = request.user.sub;  
  
    // Fetch user roles from the database  
    const userRoles = await this.userService.user(userId);  
  
    // Check if user has any of the allowed roles  
    const hasPermission = roles.some((role) => userRoles?.role === role);  
    return hasPermission;  
  }  
}

This is the controller that does not yet implement decorators:

@Controller('document')  
export class DocumentController {  
  constructor(private readonly documentService: DocumentService) {}  
  
  @Post('main')  
  @HttpCode(HttpStatus.CREATED)  
  createDocument(  
    @Body() dto: CreateDocumentDto,  
    @GetCurrentUserId() userId: string,  
  ): Promise<Document> {  
    return this.documentService.createDocument(dto, userId);  
  }  
}

This is a controller that already implements the decorator:

@Controller('document')  
export class DocumentController {  
  constructor(private readonly documentService: DocumentService) {}  
  
  @Post('main')  
  @HttpCode(HttpStatus.CREATED)  
  @UseGuards(RoleGuard) // This is Decorator  
  @Roles('ADMIN') // This is Decorator  
  createDocument(  
    @Body() dto: CreateDocumentDto,  
    @GetCurrentUserId() userId: string,  
  ): Promise<Document> {  
    return this.documentService.createDocument(dto, userId);  
  }  
}

Previously, the endpoint implemented by the createDocument function in the controller file was public access, meaning anyone could access it without restrictions. By adding decorators, we provide RBAC (Role-Based Access Control) features to those endpoints without having to change existing code. This means we can change the status of an endpoint from public to private, limit access to only authorized users, and even limit access to only users with certain predefined roles. Using parameters in the decorator, we can define the roles that are allowed to access that endpoint, allowing us to control who can access it.

With this approach, we implement the “open/closed” principle in our system design. That is, we make it possible to close access to a particular endpoint (make it private) without having to change or modify existing code, just by adding the appropriate decorator. This makes testing easier to do because there is no need to change a lot of existing code, just managing decorators to control access to those endpoints.

Liskov Substitution Principle (LSP):

While NestJS does not enforce the LSP explicitly, it provides the tools and patterns for developers to adhere to it. By defining clear interfaces and contracts between modules and components, NestJS facilitates the interchangeability of implementations. This allows developers to substitute one module or component with another as long as they conform to the same interface, ensuring that the behavior of the program remains consistent. However, you can implement this in the following way.

// document.interface.ts  
  
export interface Document {  
  transliterate(): string;  
}

// pegon.model.ts  
  
import { Document } from './document.interface';  
  
export class Pegon implements Document {  
  transliterate(): string {  
    // do the transliterate program for pegon docs  
  }  
}

// latin.model.ts  
  
import { Document } from './document.interface';  
  
export class Latin implements Document {  
  transliterate(): string {  
    // do the transliterate program for latin docs  
  }  
}

// transliterate.service.ts  
  
import { Injectable } from '@nestjs/common';  
import { Document } from './animal.interface';  
  
@Injectable()  
export class TransliterateService {  
  constructor(private readonly document: Document) {}  
  
  transliterate(): string {  
    return this.document.makeSound();  
  }  
}

// app.module.ts  
  
import { Module } from '@nestjs/common';  
import { TransliterateService } from './transliterate.service';  
import { Latin } from './latin.model';   
import { Pegon } from './pegon.model';   
import { Document } from './document.interface';  
  
@Module({  
  providers: [  
    // Provide Pegon class when TransliterateService is requested  
    { provide: Document, useClass: Pegon },  
    // Alternatively, provide Latin class  
    // { provide: Document, useClass: Latin},  
    TransliterateService,  
  ],  
  exports: [TransliterateService],  
})  
export class AppModule {}

Interface Segregation Principle (ISP):

NestJS encourages the use of interfaces to define contracts between different parts of the application. By defining granular interfaces tailored to specific use cases, NestJS ensures that clients only depend on the interfaces they need, avoiding unnecessary dependencies. This adherence to the ISP results in more modular and maintainable codebases.

Apart from that, we can also apply it to our program. Here the example of ISP with NestJS:

// user.interface.ts  
  
export interface User {  
  id: string;  
  username: string;  
  email: string;  
}

// userRegistration.interface.ts  
  
export interface UserRegistration {  
  username: string;  
  email: string;  
  password: string;  
}

// userAuthentication.interface.ts  
  
export interface UserAuthentication {  
  email: string;  
  password: string;  
}

// user.service.ts  
  
import { Injectable } from '@nestjs/common';  
import { User } from './user.interface';  
import { UserRegistration } from './userRegistration.interface';  
import { UserAuthentication } from './userAuthentication.interface';  
  
@Injectable()  
export class UserService {  
  getAllUsers(): User[] {  
    // Implementation to fetch all users  
  }  
  
  getUserById(userId: string): User {  
    // Implementation to fetch user by ID  
  }  
  
  registerUser(userData: UserRegistration): User {  
    // Implementation to register a new user  
  }  
  
  authenticateUser(authData: UserAuthentication): boolean {  
    // Implementation to authenticate user  
  }  
}

In this example:

The User interface defines the structure of a user object.
The UserRegistration interface specifies the data required for user registration.
The UserAuthentication interface defines the data needed for user authentication.

By defining these granular interfaces, NestJS ensures that clients of the UserService only depend on the interfaces they need. For instance, a component responsible for user registration will only depend on the UserRegistration interface, while a component handling user authentication will only depend on the UserAuthentication interface. This adherence to the Interface Segregation Principle results in a more modular and maintainable codebase, where components are decoupled and dependencies are minimized.

Dependency Inversion Principle (DIP):

NestJS promotes the DIP through its reliance on dependency injection and inversion of control (IoC) containers. By decoupling high-level modules from their concrete implementations and depending on abstractions, NestJS allows for flexible and testable code. Developers can easily swap implementations and manage dependencies, facilitating the development of loosely coupled and highly cohesive systems.

Let’s illustrate the Dependency Inversion Principle (DIP) in a NestJS context with an example where we have a service that depends on a repository interface, and we inject different implementations of this repository interface using dependency injection.

Define the repository interface:


// user.repository.interface.ts  
  
import { User } from './user.model';  
  
export interface UserRepository {  
  getUserById(userId: string): Promise<User>;  
}

2. Implement concrete repository classes:

// database.user.repository.ts  
  
import { Injectable } from '@nestjs/common';  
import { UserRepository } from './user.repository.interface';  
import { User } from './user.model';  
  
@Injectable()  
export class DatabaseUserRepository implements UserRepository {  
  async getUserById(userId: string): Promise<User> {  
    // Logic to retrieve user from a database  
  }  
}

// file.user.repository.ts  
  
import { Injectable } from '@nestjs/common';  
import { UserRepository } from './user.repository.interface';  
import { User } from './user.model';  
  
@Injectable()  
export class FileUserRepository implements UserRepository {  
  async getUserById(userId: string): Promise<User> {  
    // Logic to retrieve user from a file  
  }  
}

3. Create a service that depends on the repository interface:

// user.service.ts  
  
import { Injectable } from '@nestjs/common';  
import { UserRepository } from './user.repository.interface';  
import { User } from './user.model';  
  
@Injectable()  
export class UserService {  
  constructor(private readonly userRepository: UserRepository) {}  
  
  async getUserById(userId: string): Promise<User> {  
    return this.userRepository.getUserById(userId);  
  }  
}

4. Utilize the service and inject different repository implementations in a module:

// app.module.ts  
  
import { Module } from '@nestjs/common';  
import { UserService } from './user.service';  
import { DatabaseUserRepository } from './database.user.repository'; // Import the database repository  
// import { FileUserRepository } from './file.user.repository'; // Alternatively, import the file repository  
  
@Module({  
  providers: [  
    // Inject the DatabaseUserRepository  
    { provide: 'UserRepository', useClass: DatabaseUserRepository },  
    // Alternatively, inject the FileUserRepository  
    // { provide: 'UserRepository', useClass: FileUserRepository },  
    UserService,  
  ],  
})  
export class AppModule {}

In this example, the UserService depends on the UserRepository interface, which defines the contract for retrieving user data. Different implementations of this interface (DatabaseUserRepository and FileUserRepository) can be injected into the UserService via dependency injection, depending on the specific requirements or configurations of the application. This adherence to the Dependency Inversion Principle allows for flexible and testable code, as high-level modules (such as the UserService) depend on abstractions (interfaces) rather than concrete implementations.

Build Clean API Architecture using Express and Typescript

hello@tkssharma.com — Sat, 18 May 2024 00:00:00 GMT

Build Clean API Architecture using Express and Typescript

The Clean Architecture consists of three main layers:

Domain: It contains business logic independent of external technologies.
Infrastructure: Handles technical details such as databases and external services.
Presentation: Interacts with the user and delegates requests to the domain layer.

We are going to create these three layers for each of our project functionalities, in this development we will create a complete CRUD for a TODO list. Here’s an initial outline of our directory structure.


node-template-server/  
│  
├── dist/  
├── node_modules/  
├── src/  
│   ├── core/  
│   │   ├── config/  
│   │   ├── constants/  
│   │   └── errors/  
│   ├── features/  
│   │   ├── shared/  
│   │   │   └── presentation/  
│   │   │       └── middlewares/  
│   │   │  
│   │   ├── todos/  
│   │   │   ├── domain/  
│   │   │   │   ├── datasources/  
│   │   │   │   ├── dtos/  
│   │   │   │   ├── entities/  
│   │   │   │   ├── repositories/  
│   │   │   │   └── usecases/  
│   │   │   │  
│   │   │   ├── infrastructure/  
│   │   │   │   ├── datasource.impl.ts  
│   │   │   │   └── repository.impl.ts  
│   │   │   │  
│   │   │   └── presentation/  
│   │   │       ├── controller.ts  
│   │   │       └── routes.ts  
│   │   └── ...  
│   ├── app.test.ts  
│   ├── app.ts  
│   ├── routes.ts  
│   └── server.ts  
├── .env  
├── .env.template  
├── ...  
├── package.json  
└── ...

Domain — Entities

Entities are objects that represent fundamental concepts of the application domain. These objects encapsulate the essential state and behavior of key elements within the system. In this case, we will define this entity:

// srcfeaturestodosdomainentitiestodo.entity.ts

import { ValidationError } from '../../../../core/errors/validation.error';  
  
export class TodoEntity {  
 constructor(  public id: number,  
  public text: string,  
  public isCompleted: boolean ) {}  
  
 public static fromJson(obj: Record<string, unknown>): TodoEntity {  
  const { id, text, isCompleted = false } = obj;  
  if (!id) throw new ValidationError([{ constraint: 'id is required', fields: ['id'] }]);  
  if (!text) throw new ValidationError([{ constraint: 'text is required', fields: ['text'] }]);  
  return new TodoEntity(id as number, text as string, isCompleted as boolean);  
 }  
}

🚧 The implementation of the ValidationErrorclass will be done later.

During this article I will show you the implementation of the getAll() method for our TODO list, however, in the final code you can find the implementation of all the methods (create, update, delete and getById).

Domain — Repositories

Repositories are a data access abstraction that act as an interface between the domain layer and the infrastructure layer. Their primary purpose is to encapsulate the logic related to data storage and retrieval, providing an abstraction layer that allows the domain layer to work with entities without worrying about the specific details of how data is stored or retrieved.

// srcfeaturestodosdomainrepositoriesrespository.ts


import { type TodoEntity } from '../entities/todo.entity';  
  
export abstract class TodoRepository {  
 abstract getAll(): Promise<TodoEntity[]>;  
 // rest of operations  
 // ...  
}

Domain — Use cases

Use cases represent the specific actions or functionalities that can be performed by a user or a system within the application. These use cases encapsulate the business logic in a way that is independent of infrastructure and implementation details, making them portable and reusable in different contexts.

// srcfeaturestodosdomainusecasesgetAll.usecase.ts  
  
import { type TodoEntity } from '../entities/todo.entity';  
import { type TodoRepository } from '../repositories/respository';  
  
export interface GetTodosUseCase {  
 execute: () => Promise<TodoEntity[]>;  
}  
  
export class GetTodos implements GetTodosUseCase {  
 constructor(private readonly repository: TodoRepository) {}  
  
 async execute(): Promise<TodoEntity[]> {  
  return await this.repository.getAll();  
 }  
}

Domain — Data sources

Data sources are interfaces or abstractions that represent the data source from which the data needed for the application is obtained. These data sources can be databases, web services, file systems, or any other form of data storage. The use of data sources helps decouple business logic from the specific details of the data source. This means that the domain layer can work with data sources through generic interfaces without knowing the specific implementation details, making it easy to exchange or update the data source without affecting the application logic.

// srcfeaturestodosdomaindatasourcesdatasource.ts  
  
import { type TodoEntity } from '../entities/todo.entity';  
  
export abstract class TodoDatasource {  
 abstract getAll(): Promise<TodoEntity[]>;  
 // rest of operations  
 // ...  
}

Domain — DTOs

DTOs (Data Transfer Objects) are objects that are used to transfer data between different layers of the application, especially between the presentation layer and the domain or infrastructure layer. DTOs encapsulate related data and transport it from one context to another without exposing the underlying business logic. The main function of DTOs is to represent information in a structured and coherent way, facilitating its transport through the application.

For the purposes of this article we will not create DTOs, however, in the final code you will be able to find DTOs to handle pagination, to create, update and even get a TODO.

Infrastructure — Repository Implementation

The repository implementation at the infrastructure layer is responsible for providing a concrete implementation of the methods defined in the repository interface at the domain layer. This implementation is responsible for interacting with the actual data source, such as a database, an external service or any other data persistence mechanism.

// srcfeaturestodosinfraestructurerepository.impl.ts  
  
import { type TodoDatasource } from '../domain/datasources/datasource';  
import { type TodoEntity } from '../domain/entities/todo.entity';  
import { type TodoRepository } from '../domain/repositories/respository';  
  
export class TodoRepositoryImpl implements TodoRepository {  
 constructor(private readonly datasource: TodoDatasource) {}  
  
 async getAll(): Promise<TodoEntity[]> {  
  return await this.datasource.getAll();  
 }  
  
 // rest of operations  
 // ...  
}

Infrastructure — Data source Implementation

The data source implementation in the infrastructure layer is responsible for providing a concrete implementation of the methods defined in the data source interface in the domain layer. This component is responsible for interacting directly with the actual data source, such as a database, a web service or any other data storage medium.

// srcfeaturestodosinfraestructurelocal.datasource.impl.ts  
  
import { type TodoDatasource } from '../domain/datasources/datasource';  
import { TodoEntity } from '../domain/entities/todo.entity';  
  
const TODOS_MOCK = [  
 {  
  id: 1,  
  text: 'First TODO...',  
  isCompleted: false  
 },  
 {  
  id: 2,  
  text: 'Second TODO...',  
  isCompleted: false  
 }  
];  
  
export class TodoDatasourceImpl implements TodoDatasource {  
 public async getAll(): Promise<TodoEntity[]> {  
  const todos = TODOS_MOCK.map((todo): TodoEntity => TodoEntity.fromJson(todo));  
  return todos;  
 }  
  
 // rest of operations  
 // ...  
}

In this case I am getting the list from memory, however, this is the right place to interact with an external database, for example, this would be the implementation of a data source that interacts with a database using Prisma:

// srcfeaturestodosinfraestructurepostgres.datasource.impl.ts  
  
import { type TodoDatasource } from '../domain/datasources/datasource';  
import { TodoEntity } from '../domain/entities/todo.entity';  
  
export class TodoDatasourceImpl implements TodoDatasource {  
 public async getAll(): Promise<TodoEntity[]> {  
  const todosFromDB = await prisma.todo.findMany();  
  const todos = todosFromDB.map((todo): TodoEntity => TodoEntity.fromJson(todo));  
  return todos;  
 }  
  
 // rest of operations  
 // ...  
}

Presentation— Controller

Controllers are presentation layer components that act as entry points for client requests in an application. These controllers are responsible for receiving HTTP requests, processing them and directing them to the corresponding business logic in the domain layer.

// srcfeaturestodospresentationcontroller.ts  
  
import { type NextFunction, type Request, type Response } from 'express';  
import { type TodoRepository } from '../domain/repositories/respository';  
import { type TodoEntity } from '../domain/entities/todo.entity';  
import { GetTodos } from '../domain/usecases/getAll.usecase';  
  
export class TodoController {  
 //* Dependency injection  
 constructor(private readonly repository: TodoRepository) {}  
  
 public getAll = (  
  _req: Request<unknown, unknown, unknown, unknown>,  
  res: Response<TodoEntity[]>,  
  next: NextFunction  
 ): void => {  
  new GetTodos(this.repository)  
   .execute()  
   .then((result) => res.json(result))  
   .catch((error) => {  
    next(error);  
   });  
 };  
  
 // rest of operations  
 // ...  
}

Presentation — Routes

Routes are presentation layer components that are responsible for defining routes and handling incoming HTTP requests to an application. These routes are used to map HTTP requests to the corresponding controllers and establish the API structure or routing of the application. It is also where our data source and our repository are initialized, the same that is necessary for our controller.

// srcfeaturestodospresentationroutes.ts  
  
import { Router } from 'express';  
import { TodoDatasourceImpl } from '../infraestructure/local.datasource.impl';  
import { TodoRepositoryImpl } from '../infraestructure/repository.impl';  
import { TodoController } from './controller';  
  
export class TodoRoutes {  
 static get routes(): Router {  
  const router = Router();  
  
  //* This datasource can be change  
  const datasource = new TodoDatasourceImpl();  
  const repository = new TodoRepositoryImpl(datasource);  
  const controller = new TodoController(repository);  
  
  router.get('/', controller.getAll);  
  
  // rest of operations  
  // ...  
  
  return router;  
 }  
}

Routes

We are going to create a global routing file for our application, here we will route all the routes of all the functionalities of our application.

// srcroutes.ts  
  
import { Router } from 'express';  
import { TodoRoutes } from './features/todos/presentation/routes';  
  
export class AppRoutes {  
 static get routes(): Router {  
  const router = Router();  
  
  router.use('/todos', TodoRoutes.routes);  
  
  // rest of routes  
  // ...  
  
  return router;  
 }  
}

Error handling

Finally, I want to show you how to handle errors on our server, let’s start by creating classes for our custom errors:

// srccoreerrorscustom.error.ts  
  
import { HttpCode } from '../constants';  
  
interface AppErrorArgs {  
 name?: string;  
 statusCode: HttpCode;  
 message: string;  
 isOperational?: boolean;  
}  
  
export class AppError extends Error {  
 public readonly name: string;  
 public readonly statusCode: HttpCode;  
 public readonly isOperational: boolean = true;  
  
 private constructor(args: AppErrorArgs) {  
  const { message, name, statusCode, isOperational } = args;  
  super(message);  
  Object.setPrototypeOf(this, new.target.prototype);  
  this.name = name ?? 'Error';  
  this.statusCode = statusCode;  
  if (isOperational !== undefined) this.isOperational = isOperational;  
  Error.captureStackTrace(this);  
 }  
  
 static badRequest(message: string): AppError {  
  return new AppError({ message, statusCode: HttpCode.BAD_REQUEST });  
 }  
  
 static unauthorized(message: string): AppError {  
  return new AppError({ message, statusCode: HttpCode.UNAUTHORIZED });  
 }  
  
 static forbidden(message: string): AppError {  
  return new AppError({ message, statusCode: HttpCode.FORBIDDEN });  
 }  
  
 static notFound(message: string): AppError {  
  return new AppError({ message, statusCode: HttpCode.NOT_FOUND });  
 }  
  
 static internalServer(message: string): AppError {  
  return new AppError({ message, statusCode: HttpCode.INTERNAL_SERVER_ERROR });  
 }  
}

// srccoreerrorsvalidation.error.ts  
  
import { type HttpCode } from '../constants';  
  
export interface ValidationType {  
 fields: string[];  
 constraint: string;  
}  
  
export class ValidationError extends Error {  
 public readonly statusCode: HttpCode;  
 public readonly validationErrors: ValidationType[];  
  
 constructor(validationErrors: ValidationType[]) {  
  super('Validation Error');  
  Object.setPrototypeOf(this, new.target.prototype);  
  this.statusCode = 400;  
  this.validationErrors = validationErrors;  
  Error.captureStackTrace(this);  
 }  
}

Now we are going to create a Middleware to control our errors. In Express and Node.js, middlewares are functions that access the request and response objects of a web application and are used to perform intermediate tasks during the processing of HTTP requests, such as data validation, error handling, user authentication and information registration. They provide flexibility to control how requests are processed and responses generated in an Express application.

// srcfeaturessharedpresentationmiddlewareserror.middleware.ts  
  
import { type Response, type NextFunction, type Request } from 'express';  
  
import { ValidationError } from '../../../../core/errors/validation.error';  
import { HttpCode } from '../../../../core/constants';  
import { AppError } from '../../../../core/errors/custom.error';  
  
export class ErrorMiddleware {  
 //* Dependency injection  
 // constructor() {}  
  
 public static handleError = (error: unknown, _: Request, res: Response, next: NextFunction): void => {  
  if (error instanceof ValidationError) {  
   const { message, name, validationErrors, stack } = error;  
   const statusCode = error.statusCode || HttpCode.INTERNAL_SERVER_ERROR;  
   res.statusCode = statusCode;  
   res.json({ name, message, validationErrors, stack });  
  } else if (error instanceof AppError) {  
   const { message, name, stack } = error;  
   const statusCode = error.statusCode || HttpCode.INTERNAL_SERVER_ERROR;  
   res.statusCode = statusCode;  
   res.json({ name, message, stack });  
  } else {  
   const name = 'InternalServerError';  
   const message = 'An internal server error occurred';  
   const statusCode = HttpCode.INTERNAL_SERVER_ERROR;  
   res.statusCode = statusCode;  
   res.json({ name, message });  
  }  
 };  
}

Now let’s make a couple of final modifications to ourserver.ts to add our global router and our middleware to handle errors.

// srcserver.ts  
  
import express, { type Router, type Request, type Response, type NextFunction } from 'express';  
import compression from 'compression';  
import rateLimit from 'express-rate-limit';  
  
import { HttpCode, ONE_HUNDRED, ONE_THOUSAND, SIXTY } from './core/constants';  
import { ErrorMiddleware } from './features/shared/presentation/middlewares/error.middleware';  
import { AppError } from './core/errors/custom.error';  
  
interface ServerOptions {  
 port: number;  
 routes: Router;  
 apiPrefix: string;  
}  
  
export class Server {  
 private readonly app = express();  
 private readonly port: number;  
 private readonly routes: Router;  
 private readonly apiPrefix: string;  
  
 constructor(options: ServerOptions) {  
  const { port, routes, apiPrefix } = options;  
  this.port = port;  
  this.routes = routes;  
  this.apiPrefix = apiPrefix;  
 }  
  
 async start(): Promise<void> {  
  //* Middlewares  
  this.app.use(express.json()); // parse json in request body (allow raw)  
  this.app.use(express.urlencoded({ extended: true })); // allow x-www-form-urlencoded  
  this.app.use(compression());  
  //  limit repeated requests to public APIs  
  this.app.use(  
   rateLimit({  
    max: ONE_HUNDRED,  
    windowMs: SIXTY * SIXTY * ONE_THOUSAND,  
    message: 'Too many requests from this IP, please try again in one hour'  
   })  
  );  
  
  // CORS  
  this.app.use((req, res, next) => {  
   // Add your origins  
   const allowedOrigins = ['http://localhost:3000'];  
   const origin = req.headers.origin;  
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion  
   if (allowedOrigins.includes(origin!)) {  
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion  
    res.setHeader('Access-Control-Allow-Origin', origin!);  
   }  
   res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');  
   res.setHeader('Access-Control-Allow-Headers', 'Content-Type');  
   next();  
  });  
  
  //* Routes  
  this.app.use(this.apiPrefix, this.routes);  
  
  // Test rest api  
  this.app.get('/', (_req: Request, res: Response) => {  
   return res.status(HttpCode.OK).send({  
    message: `Welcome to Initial API! n Endpoints available at http://localhost:${this.port}/`  
   });  
  });  
  
  //* Handle not found routes in /api/v1/* (only if 'Public content folder' is not available)  
  this.routes.all('*', (req: Request, _: Response, next: NextFunction): void => {  
   next(AppError.notFound(`Cant find ${req.originalUrl} on this server!`));  
  });  
  
  // Handle errors middleware  
  this.routes.use(ErrorMiddleware.handleError);  
  
  this.app.listen(this.port, () => {  
   console.log(`Server running on port ${this.port}...`);  
  });  
 }  
}

And in the app.ts file:

// srcapp.ts  
  
import { envs } from './core/config/env';  
import { AppRoutes } from './routes';  
import { Server } from './server';  
  
(() => {  
 main();  
})();  
  
function main(): void {  
 const server = new Server({  
  routes: AppRoutes.routes,  
  apiPrefix: envs.API_PREFIX,  
  port: envs.PORT  
 });  
 void server.start();  
}

Now, we can run our application

yarn dev

We can test our local server in [http://localhost:3000/todos](http://localhost:3000/todos)

Implementing a REST API using Node.js, Express and following good development practices and Clean Architecture provides a solid foundation for developing modern and scalable web applications. By taking a modular approach and focusing on separation of concerns, developers can achieve a clean, maintainable architecture that encourages flexibility and continuous system evolution.

The application of Clean Architecture allows you to maintain a clear separation between the different layers of the application, such as the domain layer, the infrastructure layer, and the presentation layer, making it easier to understand and maintain the code over time. Additionally, adopting good development practices such as using middlewares for intermediate tasks, validating input data, and proper error handling contributes to creating a robust and secure API.

how to secure your Node JS APIs

hello@tkssharma.com — Sun, 05 May 2024 00:00:00 GMT

how to secure your Node JS APIs

As web development keeps evolving, ensuring the security of your Node.js application becomes critical. This detailed guide steps beyond elementary suggestions, offering a closer look at advanced security techniques for Node.js setups.

Operating Without Root Privileges: A Must-Do

================================================

Running Node.js or any web server as a root user poses a significant security risk. A single exploit could grant attackers complete control over the server. Instead, configure your environment to run with minimal privileges.

Implementation Insight:

Creating a dedicated user for your Node.js application restricts potential damage in the event of a compromise.

Creating a non-root user for Node.js service

adduser --disabled-login nodejsUser

sample Dockerfile for node js application

FROM node:18-alpine  
RUN addgroup adx && adduser -S -G adx adx  
WORKDIR /usr/src/app/backend  
COPY package*.json ./  
RUN npm install  
COPY . .  
RUN npm run build  
USER adx  
EXPOSE 5000  
CMD ["npm", "start"]

Switch to this user before starting your application to ensure it runs with limited permissions.

Keeping NPM Libraries Up-to-Date: The First Line of Defense

===============================================================

Dependencies in the Node.js ecosystem can be a double-edged sword. While they significantly accelerate development, they can also introduce vulnerabilities.

Implementation Insight:

Use npm audit for a quick vulnerability scan and fix issues automatically with npm audit fix. Integrate Snyk for continuous monitoring and protection.

Updating packages and fixing vulnerabilities

npm update && npm audit fix

Snyk Integration:

Snyk offers a proactive approach to dependency security, scanning for vulnerabilities and providing fixes or workarounds.

Installing Snyk CLI and scanning your project

npm install -g snyk  
snyk auth  
snyk test

Automate this process in your CI/CD pipeline to ensure continuous security.

Customizing Cookie Names: Obscuring Tech Stack Details

==========================================================

Default cookie names can inadvertently disclose your application’s underlying technologies, making it easier for attackers to tailor their exploits.

Implementation Insight:

Change default session cookie names to something unique and unrelated to the technology or framework used.

const express = require('express');  
const session = require('express-session')  
app.use(session({  
  // set a custom name for the session cookie  
  name: 'siteSessionId',  
  // a secure secret key for session encryption  
  secret: 'complex_secret_key',  
  // Additional session configurations...  
}));

Implementing Secure HTTP Headers with Helmet: Bolstering Defense

====================================================================

Secure HTTP headers are crucial for protecting your app from various types of attacks like XSS, clickjacking, and other cross-site injections.

Implementation Insight:

Helmet.js is a middleware that sets secure HTTP headers out of the box. Customize it to suit your application’s needs.

The helmet() middleware automatically removes unsafe headers and adds new ones, including X-XSS-Protection, X-Content-Type-Options, Strict-Transport-Security, and X-Frame-Options. These enforce best practices and help protect your application from common attacks.

const helmet = require('helmet');  
  
app.use(helmet({  
  // Custom helmet configuration here  
}));

Regularly review your headers’ security using tools like the Mozilla Observatory.

Rate Limiting: Preventing Abuse

===================================

Rate limiting is essential for protecting your application against brute-force attacks and DDoS by limiting the number of requests a user can make in a given timeframe.

Implementation Insight:


Utilize libraries like `express-rate-limit` for easy rate-limiting setup.

const rateLimit = require('express-rate-limit');  
  
const limiter = rateLimit({  windowMs: 15 * 60 * 1000, // 15 minutes  max: 100, // Limit each IP to 100 requests per windowMs  
});  
  
app.use(limiter);

Configure thresholds based on normal user behavior and adjust as necessary.

Enforcing Strong Authentication Policies: Beyond Passwords

==============================================================

Authentication mechanisms are often targeted by attackers. Implementing robust authentication methods is critical for securing user accounts.

Implementation Insight:

Implement bcrypt for secure password hashing.
Enforce password complexity requirements.
Utilize multi-factor authentication (MFA) to add another layer of security.

const bcrypt = require('bcrypt');  
const saltRounds = 10;  
  
// Hashing a password  
bcrypt.hash('userPassword', saltRounds, function(err, hash) {  
  // Store hash in your password database.  
});

Educate users on the importance of strong passwords and provide support for MFA.

Minimizing Error Details: Avoiding Information Leakage

==========================================================

Verbose error messages can provide attackers with insights into your application’s architecture, facilitating targeted attacks.

Implementation Insight:

Ensure that production environments do not expose stack traces or detailed error messages to users.


app.use((err, req, res, next) => {  
  res.status(500).json({ error: "Internal Server Error" });  
});

Log detailed errors server-side for debugging, keeping user-facing messages generic.

Vigilant Monitoring: Keeping an Eye on Your Application

===========================================================

Monitoring is crucial for detecting and responding to security incidents in real time.

Implementation Insight:

Integrate Application Performance Monitoring (APM) tools to track application behavior and identify anomalies indicative of security breaches.

const apmTool = require('apm-tool-of-choice');  
  
apmTool.start({  
  // Configuration options  
});

Choose a tool that suits your stack and provides comprehensive insights into both performance and security aspects.

Embracing HTTPS-Only Policy: Encrypting Data in Transit

===========================================================

HTTPS ensures that data between your server and the user is encrypted, protecting it from eavesdropping and man-in-the-middle attacks.

Implementation Insight:

Redirect all HTTP traffic to HTTPS and ensure that cookies are set with the Secure attribute.

app.use((req, res, next) => {  
  if (!req.secure) {  
    return res.redirect(`https://${req.headers.host}${req.url}`);  
  }  
  next();  
});

Use tools like Let’s Encrypt to obtain free SSL/TLS certificates.

Validating User Input: Shielding Against Injection

=======================================================

Validating and sanitizing user input is fundamental to preventing injection attacks, such as SQL injection, XSS, and more.

Implementation Insight:

Employ libraries express-validator to define validation rules for user inputs.

const { body, validationResult } = require('express-validator');  
  
app.post('/register', [  
  body('email').isEmail(),  
  body('password').isLength({ min: 5 })  
], (req, res) => {  
  const errors = validationResult(req);  
  if (!errors.isEmpty()) {  
    return res.status(400).json({ errors: errors.array() });  
  }  
  
  // Proceed with registration logic  
});

Define strict validation rules based on the expected format of the data.

Leveraging Security Linters

================================

Use tools to automatically spot potential security risks in your code.

Short Implementation Guide:

Choose a Linter: ESLint, combined with the eslint-plugin-security, offers a focused approach to identifying security risks in Node.js code.
Setup: Install ESLint and the security plugin.
Configure ESLint: Modify your .eslintrc to use the security plugin.
Scan Your Code: Execute ESLint to uncover and address security concerns.
Integrate with Development Workflow: Embed linting into your regular development practices to catch and rectify issues promptly.

npm install eslint eslint-plugin-security --save-dev


{  
  "extends": ["eslint:recommended", "plugin:security/recommended"],  
  "plugins": ["security"]  
}

npx eslint .

By integrating security linters into your workflow, following user input validation, you create an additional layer of defense, ensuring your code is not only safe from common injection attacks but also from other potential vulnerabilities identified through static code analysis.

Conclusion

Securing a Node.js application is an ongoing process that involves multiple layers of defense. By implementing the practices outlined in this guide, you can significantly enhance the security posture of your Node.js applications. Stay informed about the latest security threats and continuously update your security practices to protect against evolving risks.

Understand Node JS Buffer for API development

hello@tkssharma.com — Sat, 04 May 2024 00:00:00 GMT

5 common use cases of buffers in Node.js.

Use Case 1 — Binary Data Handling

Buffers are essential for handling binary data in Node.js, which is crucial when working with files, network communication, or raw bytes in streams. Binary data is represented as a sequence of bytes, and buffers provide a way to manipulate and work with this data efficiently.

Problem

Reading and writing files, especially binary files, requires a way to handle raw bytes.
Network communication involves sending and receiving binary data over the wire.
Working with streams requires manipulating raw bytes.

Solution

Buffers provide a way to represent binary data in Node.js.
Buffers can be created from strings, arrays, or other buffers.
Buffers can be written to files, sent over the network, or manipulated in streams.
Buffers provide methods for reading and writing binary data, such as readUInt8(), writeUInt8(), and slice().

Example

Suppose you need to read an image file and extract its EXIF metadata. You can use a buffer to read the file, manipulate the binary data, and extract the metadata.

Here is a code sample:

const fs = require('fs');  
const buffer = fs.readFileSync('image.jpg');  
const exifData = buffer.slice(0, 100); // Extract the first 100 bytes, which contain the EXIF metadata

In this example, we read the entire image file into a buffer using fs.readFileSync(). We then extract the first 100 bytes of the buffer, which contain the EXIF metadata, using slice().

Benefits

Buffers provide an efficient way to work with binary data.
Buffers allow for flexible manipulation of binary data.
Buffers are essential for working with files, network communication, and streams.

Use case 2 — Data Transformation

Buffers play a crucial role in transforming data from one format to another, enabling efficient data conversion and manipulation. This is particularly useful when working with different character encodings, compression formats, or data serialization.

Problem

Converting data between different character encodings (e.g., UTF-8 to UTF-16).
Compressing or decompressing data using algorithms like Gzip or zlib.
Transforming data between different formats (e.g., JSON to CSV).

Solution

Buffers provide a flexible and efficient way to transform data.
Buffers can be used to convert between character encodings using methods like toString() and writeString().
Buffers can be used to compress and decompress data using modules like zlib.
Buffers can be used to transform data between different formats using libraries like JSONStream.

Example

Let’s say we need to convert a UTF-8 encoded string to UTF-16. We can use a buffer to perform the conversion.

Check out this code sample:

const buffer = Buffer.from('Hello, Node.js!', 'utf8');  
const utf16Buffer = buffer.toString('utf16le');  
console.log(utf16Buffer); // Prints: <Buffer 48 00 65 00 6c 00 6c 00 6f 00 2c 00 20 00 4e 00 6f 00 64 00 65 00 2e 00 6a 00 73 00 21 00>

In this example, we create a buffer from a UTF-8 encoded string using Buffer.from(). We then convert the buffer to a UTF-16 encoded string using toString('utf16le').

Benefits

Buffers enable efficient data transformation.
Buffers support various character encodings and compression formats.
Buffers provide a flexible way to transform data between different formats.

Use case 3 — Cryptography

Buffers play a critical role in cryptographic operations, enabling secure data encryption, decryption, hashing, and digital signatures. Cryptographic algorithms require binary data, and buffers provide a way to represent and manipulate this data.

Problem

Encrypting and decrypting data using algorithms like AES and RSA.
Generating and verifying digital signatures using algorithms like ECDSA and RSA.
Hashing data using algorithms like SHA-256 and MD5.
Handling binary data in cryptographic operations.

Solution

Buffers provide a way to represent binary data in cryptographic operations.
Buffers can be used to encrypt and decrypt data using modules like crypto.
Buffers can be used to generate and verify digital signatures using modules like crypto.
Buffers can be used to hash data using modules like crypto.

Example

Suppose you need to encrypt a message using AES-256-CBC. You can use a buffer to represent the binary data. Take a look at the code sample below:

const crypto = require('crypto');  
  
const message = 'Hello, Node.js!';  
const key = 'your_secret_key';  
const iv = 'your_initialization_vector';  
  
const buffer = Buffer.from(message, 'utf8');  
const encrypted = crypto.createCipheriv('aes-256-cbc', key, iv).update(buffer);  
console.log(encrypted.toString('base64')); // Prints: Encrypted data as base64 string

In this example, we create a buffer from a string using Buffer.from(). We then use crypto.createCipheriv() to encrypt the buffer using AES-256-CBC. The encrypted result is a buffer, which we convert to a base64-encoded string using toString('base64').

Benefits

Buffers enable secure cryptographic operations.
Buffers provide a flexible way to represent binary data.
Buffers support various cryptographic algorithms and modules.

Use case 4 — Performance Optimization

Buffers are quite useful in optimizing performance, especially when working with large datasets, file I/O, or network communication. By efficiently managing memory and reducing overhead, buffers enable faster data processing and improved application performance.

Problem

Handling large datasets in memory can lead to performance issues.
Frequent garbage collection can cause performance degradation.
Inefficient data copying and concatenation can lead to performance overhead.

Solution

Buffers provide a way to manage memory efficiently.
Buffers reduce overhead by minimizing data copying and concatenation.
Buffers enable fast data processing and manipulation.

Example

Imagine you need to read a large file and process its contents. Using buffers can optimize performance by reducing memory overhead and improving data processing speed.

const fs = require('fs');  
  
fs.readFile('large_file.txt', (err, buffer) => {  
  // Process the buffer efficiently without overhead  
  const lines = buffer.toString().split('n');  
  console.log(lines.length); // Prints: Number of lines in the file  
});

In this example, we read the entire file into a buffer using fs.readFile(). We then process the buffer efficiently by converting it to a string and splitting it into lines. This approach reduces memory overhead and improves performance compared to reading the file line-by-line.

Benefits

Buffers optimize memory management and reduce overhead.
Buffers enable fast data processing and manipulation.
Buffers improve performance in scenarios like file I/O and network communication.

Use case 5 — Interoperability

Buffers enable seamless interoperability between Node.js and native addons or external systems written in languages like C or C++. By providing a common binary data format, buffers facilitate efficient data exchange and manipulation, allowing Node.js to leverage the performance and functionality of native libraries.

Problem

Integrating Node.js with native addons or external systems requires efficient data exchange.
Different languages and systems have varying data formats and representations.
Inefficient data conversion and copying can lead to performance overhead.

Solution

Buffers provide a common binary data format for efficient data exchange.
Buffers enable direct memory access and manipulation, reducing overhead.
Buffers facilitate seamless integration with native addons and external systems.

Example:

Let’s say we need to use a C++ library for image processing in our Node.js application. Using buffers, we can efficiently exchange data between Node.js and the C++ library, leveraging the performance of native code.

Code Sample

const addon = require('./image_processing_addon');  
  
const buffer = Buffer.from('image_data', 'utf8');  
const processedBuffer = addon.processImage(buffer);  
console.log(processedBuffer.toString('utf8')); // Prints: Processed image data

In this example, we create a buffer from image data and pass it to the C++ addon using require('./image_processing_addon'). The addon processes the buffer and returns a new buffer, which we can then manipulate and use in our Node.js application.

Benefits

Buffers enable efficient data exchange between Node.js and native addons or external systems.
Buffers provide a common binary data format for seamless interoperability.
Buffers facilitate performance optimization by reducing overhead and enabling direct memory access.

Thanks for reading this article!

Understand Node JS Stream for API development

hello@tkssharma.com — Fri, 03 May 2024 00:00:00 GMT

Streams in Node.js

Streams enable efficient file I/O operations, especially when dealing with large files. Loading entire file contents into memory can be impractical or impossible. Instead, streams allow processing files chunk by chunk, reducing memory overhead.

For example, use the fs module's createReadStream() method to read a large file as a stream:


const fs = require('fs');  
  
const readStream = fs.createReadStream('large_file.txt');  
  
readStream.on('data', (chunk) => {  
  console.log(`Received chunk: ${chunk}`);  
  // Process the chunk  
});  
  
readStream.on('end', () => {  
  console.log('File read complete');  
});

Similarly, use `createWriteStream()` to write to a file as a stream:

const fs = require('fs');  
  
const readStream = fs.createReadStream('large_file.txt');  
  
readStream.on('data', (chunk) => {  
  console.log(`Received chunk: ${chunk}`);  
  // Process the chunk  
});  
  
readStream.on('end', () => {  
  console.log('File read complete');  
});

By using streams for file I/O, we can efficiently process large files without loading entire contents into memory.

Use case 2 — HTTP Responses

Streams enable efficient handling of large amounts of data in HTTP responses by allowing direct streaming without buffering everything in memory. This approach prevents memory overload and enables real-time data processing.

For example, check out the following HTTP server that streams data directly to the response:


const http = require('http');  
  
http.createServer((req, res) => {  
  const stream = fs.createReadStream('large_file.txt');  
  stream.pipe(res);  
}).listen(3000);

In this example, we have created an HTTP server that streams the contents of a large file directly to the response using the pipe() method. This approach enables efficient handling of large files without loading them entirely into memory.

By using streams for HTTP responses, we can efficiently handle large amounts of data and prevent memory overload, enabling real-time data processing and improved performance.

Use case 3 — Data Processing

Streams enable building data processing pipelines where data flows through multiple stages, each processing a part of the data as it becomes available. This approach allows for efficient, real-time data processing and transformation.

Take a look at the following examples that uses the stream module to create a pipeline that processes data in multiple stages:

const stream = require('stream');  
  
const stage1 = new stream.Transform({  
  transform(chunk, encoding, callback) {  
    // Process chunk  
    callback(null, chunk);  
  }  
});  
  
const stage2 = new stream.Transform({  
  transform(chunk, encoding, callback) {  
    // Process chunk  
    callback(null, chunk);  
  }  
});  
  
const stage3 = new stream.Transform({  
  transform(chunk, encoding, callback) {  
    // Process chunk  
    callback(null, chunk);  
  }  
});  
  
readStream.pipe(stage1).pipe(stage2).pipe(stage3).pipe(writeStream);

In this example, a pipeline was created with three stages, each processing a part of the data as it becomes available. The pipe() method connects each stage, enabling data to flow through the pipeline.

By using streams for data processing pipelines, we can build efficient, real-time data processing workflows that scale and handle large amounts of data with ease.

Use case 4 — Real-time Data

Streams enable handling real-time data sources like sensor data, logs, or network packets by processing them as they arrive, without waiting for the entire dataset. This approach allows for immediate insights, timely reactions, and efficient processing.

For example, use the stream module to process real-time sensor data:

const sensorStream = new stream.PassThrough();


sensorStream.on('data', (chunk) => {  
  // Process chunk immediately  
  console.log(`Received sensor data: ${chunk}`);  
});  
  
// Simulate sensor data arrival  
setInterval(() => {  
  sensorStream.write('Sensor data packet');  
}, 1000);

In this example, we have created a stream to process sensor data as it arrives. The code listens for the data event and process each chunk immediately. The setInterval() function simulates sensor data arrival every second.

Use case 5 — Compression/Decompression

Streams enable on-the-fly compression and decompression of data, reducing memory footprint and improving performance when dealing with large datasets. This approach allows for efficient data processing and transfer.

The following example uses the zlib module to compress and decompress data using streams:

const zlib = require('zlib');  
const compressStream = zlib.createGzip();  
const decompressStream = zlib.createGunzip();  
  
readStream.pipe(compressStream).pipe(writeStream);  
readStream.pipe(decompressStream).pipe(writeStream);

In this example, compression and decompression streams were created using zlib. The code pipes the read stream to the compression stream, which compresses the data on-the-fly, and pipes the compressed data to the write stream. Similarly, we pipe the read stream to the decompression stream, which decompresses the data on-the-fly, and pipe the decompressed data to the write stream.

By using streams for compression and decompression, we can efficiently process and transfer large datasets, reducing memory usage and improving performance.

Use case 6 — Database Operations

Streams enable efficient data transfer between databases and Node.js applications, especially when dealing with large result sets or bulk data inserts/updates. This approach reduces memory overhead and improves performance.

For example, the following snippet uses the mysql module to stream data from a database query:

const mysql = require('mysql');  
  
const db = mysql.createConnection({  
  host: '(link unavailable)',  
  user: 'username',  
  password: 'password',  
  database: 'database'  
});  
  
db.query('SELECT * FROM large_table')  
  .stream()  
  .pipe(writeStream);

In the above example, we have created a MySQL connection and query a large table. This follows by a call to stream() on the query result, which returns a readable stream. The result is piped to a write stream, which writes the data to a file or another destination.

By using streams for database operations, we can efficiently transfer large datasets, reducing memory usage and improving performance. This approach is particularly useful for bulk data inserts, updates, and data migrations.

Use case 7 — Concurrency Control

Streams enable concurrency control by managing the flow of data, ensuring optimal resource utilization and preventing memory exhaustion. This approach allows for efficient handling of multiple concurrent operations, such as handling multiple requests or processing large datasets in parallel.

Check the following example that uses the stream module to control the concurrency of data processing:

const stream = require('stream');  
const concurrentLimit = 5;  
  
const concurrencyControlStream = new stream.PassThrough({  
  concurrent: concurrentLimit,  
});  
  
readStream.pipe(concurrencyControlStream).pipe(writeStream);

In this example, a pass-through stream was created with a concurrency limit of 5. This means that only 5 chunks of data will be processed concurrently. If more data is available, it will be buffered until one of the concurrent processing slots becomes available.

Use case 8 — Stream-Based APIs

Streams enable the implementation of APIs that consume or produce streams, allowing for seamless integration with other libraries or systems that also support streaming data. This approach enables efficient and real-time data processing, transformation, and transfer between systems.

An echo example is as follows:

const http = require('http');  
  
http.createServer((req, res) => {  
  req.pipe(res);  
}).listen(3000);

In this example, we have created an HTTP server that consumes the request stream and pipes it directly to the response stream. This enables real-time data transfer and processing.

By using streams in APIs, we can:

Enable real-time data processing and transfer
Integrate with other streaming libraries and systems
Improve performance and efficiency
Handle large datasets and high-volume data streams

Use case 9 — Logging

Streams enable logging data to be streamed to various destinations, such as files, databases, or third-party services, in real-time. This allows for immediate monitoring and analysis of application behavior, enabling swift detection and response to errors, performance issues, and security threats.

The following snippet uses the morgan middleware to stream logs to a file:

const express = require('express');  
const morgan = require('morgan');  
const app = express();  
  
app.use(morgan('combined', {  
  stream: fs.createWriteStream('access.log', { flags: 'a' })  
}));

In this example, we have used the morgan middleware to stream logs to a file named access.log in the combined format.

By using streams for logging, we can:

Enable real-time monitoring and analysis
Stream logs to multiple destinations
Improve application performance and security
Enhance debugging and troubleshooting capabilities

Use case 10 — Network Communication

Streams enable efficient data transfer over network sockets, facilitating communication between distributed systems or microservices. This approach allows for real-time data exchange, making it ideal for scenarios like file transfer, real-time messaging, and live updates.

For example, use the net module to create a TCP server that streams data to connected clients:

const net = require('net');  
  
const server = net.createServer((socket) => {  
  // Stream data to the client  
  readStream.pipe(socket);  
});  
  
server.listen(3000);

The above example creates a TCP server that pipes data from a read stream to connected clients, enabling real-time data transfer.

By using streams for network communication, we can:

Enable real-time data exchange
Facilitate efficient communication between distributed systems or microservices
Improve performance and scalability

Thanks for reading this article!

Build and Test Simple CRUD Operations using Nestjs

hello@tkssharma.com — Thu, 02 May 2024 00:00:00 GMT

Build and Test Simple CRUD Operations using Nestjs

We are going to develop a REST API project with CRUD operations in Typescript using PostgreSQL, TypeORM and Docker.

What is NestJS?

Before we begin, we need to know what [NestJS](https://nestjs.com) is. Nest (NestJS) is a framework for building efficient, scalable Node.js server-side apps in JavaScript and Typescript. Either way, under the hood Nest uses [Express](https://expressjs.com) by default, or we can configure [Fastify](https://fastify.dev/).

Nest has a special modular architecture than other JavaScript frameworks. It was inspired by Angular. For example, everything related to working with users will be grouped into one module for users. This way, as our project grows, it will be easier to maintain, scale, support and test. This is a very big plus for NestJS.

The NestJS architecture contains three main concepts:

Controllers — responsible for handling incoming requests and returning responses to the client
Providers — a fundamental concept in Nest where controllers delegate more complex tasks to them. Many of Nest’s base classes can be thought of as providers — services, repositories, factories, helpers, etc.
Modules — provide metadata that Nest uses to organize the structure of the app

Setting Up the Project

First, we’ll create a new Nest project where we’ll create, get, update, and delete students using the REST API. We can create a new project with two options:

Let’s create our project using the NestJS CLI. If you are not familiar, it is a command-line interface tool that helps you initialize, develop, and maintain your Nest apps. If you don’t have NestJS CLI, you can install it using the following command:

npm i -g @nestjs/cli

Now it is ready and installed globally so we can use it anywhere. Let’s create a new Nest project through the following line of code:

nest new nest-academy-rest-api

Great, we’ve successfully created our Nest app.

If we go to the src/ folder, there will be several main files:

app.controller.ts — a basic controller with a single route
app.controller.spec.ts — the unit tests for the controller
app.module.ts — the root module of the app
app.service.ts — a basic service with a single method
main.ts — the entry file of the app

The main.ts file includes an async function that will bootstrap our app:

import { NestFactory } from '@nestjs/core';  
  
import { AppModule } from './app.module';  
  
async function bootstrap() {  
  const app = await NestFactory.create(AppModule); // create Nest app  
  await app.listen(3000); // listen on port 3000  
}  
  
bootstrap(); // run the app

Above, we created an instance of the Nest app and run it on port 3000 using the static creation method of NestFactory.

One last thing before we start coding, let’s check if everything works by running the app using the following command:

npm start

It should show Hello World text if we open localhost:3000 in a browser.

Nest project

Generating a New Module

As we already mentioned, NestJS architecture is based on modules. Hence, we need to create a new module class, controller, service and entity for a student using the Nest CLI. We can create each of them separately. Luckily, the Nest CLI provides the ability to generate everything associated with a single module with a single command. Let’s generate with the following command:

nest g resource students

Awesome, everything was generated seamlessly:

Generate a student module

Student Entity

Before we begin, we need to install the necessary packages:

npm i pg typeorm @nestjs/typeorm @nestjs/config

pg: Postgres driver for NodeJS
typeorm: ORM for NodeJS
@nestjs/typeorm: NestJS module for TypeORM
@nestjs/config: NestJS module for configuration

We created a Student entity class. Entity is a class annotated with [@Entity](http://twitter.com/Entity)() that maps to a database table (or collection when using MongoDB). Let’s update student.entity.ts by adding the following code:


import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';  
  
// it tells TypeORM that this is an entity  
@Entity()  
export class Student {  
  // a primary column which value will be automatically generated   
  // with an auto-increment value  
  @PrimaryGeneratedColumn()  
  id: number;  
  
  @Column()  
  firstName: string; // firstName column with type varchar  
  
  @Column()  
  lastName: string;  
  
  @Column()  
  email: string;  
  
  @Column()  
  address: string;  
}

Above we have created a student table with five columns using the [@Column](http://twitter.com/Column)() decorator. Our id column is defined using the @PrimaryGeneratedColumn decorator to indicate that it is a primary column with an auto-increment value.

Student Data Transfer Object

We generated the CreateStudentDto and UpdateStudentDto DTO classes. DTO (Data Transfer Object) is a design pattern commonly used in software development to transfer data between different parts of an app. We’re going to use some validation on our data. To do this we need to install the necessary packages:

npm i --save class-validator class-transformer

Once it’s done, let’s update create-student.dto.ts file by adding the following code:

import { IsString, IsNotEmpty } from 'class-validator';  
  
export class CreateStudentDto {  
  @IsString() // it should be a string  
  @IsNotEmpty() // it shouldn't be empty  
  firstName: string;  
  
  @IsString() // it should be a string  
  @IsNotEmpty() // it shouldn't be empty  
  lastName: string;  
  
  @IsString() // it should be a string  
  @IsNotEmpty() // it shouldn't be empty  
  email: string;  
  
  @IsString() // it should be a string  
  address: string;  
}

To apply the validation, we should set it in the main.ts file globally for the entire application:

async function bootstrap() {  
  const app = await NestFactory.create(AppModule);  
  app.useGlobalPipes(new ValidationPipe()); // use the validation  
  await app.listen(3000);  
}

Student Service

TypeORM supports the repository design pattern, so each entity has its own repository and allows creation, updating, deleting, loading, etc. with any entity. Let’s edit our students.service.ts file to include the following lines of code:

import { Injectable } from '@nestjs/common';  
import { InjectRepository } from '@nestjs/typeorm';  
import { Repository } from 'typeorm';  
  
import { CreateStudentDto } from './dto/create-student.dto';  
import { UpdateStudentDto } from './dto/update-student.dto';  
import { Student } from './entities/student.entity';  
  
// It tells NestJS that it is a service and an injectable  
@Injectable()  
export class StudentsService {  
  // Inject student repository  
  constructor(    @InjectRepository(Student) private studentRepository: Repository<Student>,  ) {}  
  
  // create a new student  
  create(createStudentDto: CreateStudentDto) {  
    const student = new Student();  
    student.firstName = createStudentDto.firstName;  
    student.lastName = createStudentDto.lastName;  
    student.email = createStudentDto.email;  
    student.address = createStudentDto.address;  
    return this.studentRepository.save(student);  
  }  
  
  // fetch all students  
  findAll() {  
    return this.studentRepository.find();  
  }  
  
  // get student by id  
  findOne(id: number) {  
    return this.studentRepository.findOneBy({ id });  
  }  
  
  // update student data by id  
  async update(id: number, updateStudentDto: UpdateStudentDto) {  
    const studentById = await this.studentRepository.findOneBy({ id });  
    studentById.firstName = updateStudentDto.firstName;  
    studentById.lastName = updateStudentDto.lastName;  
    studentById.email = updateStudentDto.email;  
    studentById.address = updateStudentDto.address;  
    return this.studentRepository.save(studentById);  
  }  
  
  // detete student by id  
  remove(id: number) {  
    return this.studentRepository.delete(id);  
  }  
}

Above, we created a StudentService provider and injected a Student entity repository using constructor and InjectRepository decorator.

Student Controller

Now, our students.controller.ts:

import {  
  Controller,  
  Get,  
  Post,  
  Body,  
  Patch,  
  Param,  
  Delete,  
  NotFoundException,  
  ParseIntPipe,  
} from '@nestjs/common';  
  
import { StudentsService } from './students.service';  
import { CreateStudentDto } from './dto/create-student.dto';  
import { UpdateStudentDto } from './dto/update-student.dto';  
  
@Controller('students')  
export class StudentsController {  
  // inject studentsService provider  
  constructor(private readonly studentsService: StudentsService) {}  
  
  // create a new student  
  @Post()  
  create(@Body() createStudentDto: CreateStudentDto) {  
    return this.studentsService.create(createStudentDto);  
  }  
  
  // get all students  
  @Get()  
  findAll() {  
    return this.studentsService.findAll();  
  }  
  
  // get student by id param  
  // we used ParseIntPipe to convert id to numeric type  
  @Get(':id')  
  findOne(@Param('id', ParseIntPipe) id: number) {  
    const student = this.studentsService.findOne(id);  
  
    if (!student) {  
      throw new NotFoundException('Student does not exist!');  
    }  
  
    return student;  
  }  
    
  // update student by id  
  // we used ParseIntPipe to convert id to numeric type  
  @Patch(':id')  
  update(    @Param('id', ParseIntPipe) id: number,  
    @Body() updateStudentDto: UpdateStudentDto,  ) {  
    return this.studentsService.update(id, updateStudentDto);  
  }  
    
  // delete student by id  
  // we used ParseIntPipe to convert id to numeric type  
  @Delete(':id')  
  remove(@Param('id', ParseIntPipe) id: number) {  
    return this.studentsService.remove(id);  
  }  
}

We used the [@Controller](http://twitter.com/Controller)(‘students’) decorator to tell NestJS that this is a controller and that the route is students. We also injected the StudentService provider through the constructor.

Student Module

Now, we need to update students.module.ts:


import { Module } from '@nestjs/common';  
import { TypeOrmModule } from '@nestjs/typeorm';  
  
import { StudentsService } from './students.service';  
import { StudentsController } from './students.controller';  
import { Student } from './entities/student.entity';  
  
// it tells NestJS that this is a module  
@Module({  
  imports: [TypeOrmModule.forFeature([Student])],  
  controllers: [StudentsController],  
  providers: [StudentsService],  
})  
export class StudentsModule {}

Here we import StudentController, StudentService and use the TypeOrmModule.forFeature() method to determine which repositories are registered in the current scope.

Update the Main Module

Last but not least, we will import the TypeOrmModule into the root AppModule with environment variables to connect to the database. Let’s update the app.module.ts module file.


import { Module } from '@nestjs/common';  
import { TypeOrmModule } from '@nestjs/typeorm';  
import { ConfigModule } from '@nestjs/config';  
  
import { AppController } from './app.controller';  
import { AppService } from './app.service';  
import { StudentsModule } from './students/students.module';  
  
@Module({  
  imports: [  
    ConfigModule.forRoot(),  
    StudentsModule,  
    TypeOrmModule.forRoot({  
      type: process.env.DB_TYPE as any,  
      host: process.env.PG_HOST,  
      port: parseInt(process.env.PG_PORT),  
      username: process.env.PG_USER,  
      password: process.env.PG_PASSWORD,  
      database: process.env.PG_DB,  
      entities: [__dirname + '/**/*.entity{.ts,.js}'],  
      synchronize: true,  
    }),  
  ],  
  controllers: [AppController],  
  providers: [AppService],  
})  
export class AppModule {}

Dockerize the Project

If you’re not familiar with Docker, it’s a containerization platform that makes it easy to deploy and manage apps.

To containerize our NestJS app, we first create three docker files:

touch Dockerfile .dockerignore docker-compose.yml

We will use the .dockerignore file to tell Docker which files and directories to ignore when building the image.

node_modules  
dist  
.git  
.eslintrc.js  
docker-compose.yml  
LICENSE  
*.md

Next we will update Dockerfile:

FROM node:18  
WORKDIR /app  
COPY package*.json ./  
RUN npm install  
COPY . .  
RUN npm run build  
EXPOSE 3000  
CMD ["npm", "run", "start:prod"]

It installs the necessary dependencies, copies the application code into the container, builds and runs.

Finally, we will edit the docker-compose.yml file to run the NestJS app with PostgreSQL using the following lines of code:

version: '3.9'  
services:  
  nest_academy_app:  
    container_name: nest-academy-app  
    image: gkassym/nest-academy-app:1.0.0  
    build: .  
    ports:  
      - '3000:3000'  
    environment:  
      - DB_TYPE=postgres  
      - PG_USER=postgres  
      - PG_PASSWORD=postgres  
      - PG_DB=postgres  
      - PG_PORT=5432  
      - PG_HOST=database  
    depends_on:  
      - database  
  database:  
    container_name: database  
    image: postgres  
    environment:  
      POSTGRES_USER: postgres  
      POSTGRES_PASSWORD: postgres  
      POSTGRES_DB: postgres  
    ports:  
      - '5432:5432'  
    volumes:  
      - pgdata:/var/lib/postgresql/data  
volumes:  
  pgdata: {}

Run the Project

We will use the docker compose command to build an image of the Nest app.

docker compose build

Now we can run:

docker compose up

Congratulations, everything works.

Run the app

Configure and Implement AWS Cognito using Nestjs

hello@tkssharma.com — Wed, 01 May 2024 00:00:00 GMT

Configure and Implement AWS Cognito using Nestjs

When I had to set up AWS Cognito for the first time, I found it pretty tricky. I looked everywhere for an easy-to-follow guide, but I couldn’t find one. I learned it by connecting pieces from different resources. Now, I want to share what I discovered to help others facing the same struggle.

In this article, I’ll guide you through the process of integrating AWS Cognito with NestJS in simple, easy-to-understand steps. Whether you’re new to AWS Cognito or just need a straightforward explanation, this guide is for you. Let’s make AWS Cognito less confusing and more accessible for everyone. Let’s get started!

What is AWS Cognito?

AWS Cognito, an AWS service, facilitates authentication and user management in applications, simplifying sign-up, sign-in, and access control, including multi-factor authentication. It empowers developers to securely manage user identities and access privileges, eliminating the need for complex authentication systems.

Prerequisites: Before we begin, make sure you have the following prerequisites:

Node.js is installed on your machine.
NestJS CLI installed globally (npm install -g @nestjs/cli).
An AWS account with access to AWS Cognito.
Basic knowledge of NestJS and AWS Cognito concepts.

Step 1: Nestjs Project Setup

Set Up a New NestJS Project Let’s start by creating a new NestJS project using the NestJS CLI. Open your terminal and run the following command:

nest new nest-cognito-example
cd nest-cognito-example

Step 2: Install Dependencies

Install Required Dependencies Next, install the necessary dependencies for integrating AWS Cognito. Run the following commands in your terminal:

npm install @aws-sdk/client-cognito-identity-provider

Step 3: Configure AWS Cognito

Configure AWS Cognito In the AWS Management Console, navigate to the Cognito service, and create a new user pool. Take note of the User Pool ID and Client ID.

We will go with the normal flow, just to let you understand the basics. You can play around with the configurations later on.

Configure Sign-in Experience

Here, we would go with the email attribute and then click on the “Next” button.

Configure Security Requirements

Here we would go mostly with the default settings but just change the multiple-factor authentication to No MFA option and then click on the “Next” button given below.

Configure Sign-up experience

No need to update anything, you can go with the default behavior and click on the “Next” button shown below.

Configure Message Delivery

In this step, select the option: Send email to Cognito. You can go with the other services like SES, but to start it is good to go with the Cognito and click on the “Next” button given below.

Integrate your App

In this step, first, you need to enter the user pool name.

Now, enter the client App name and click on the “Next” button given below.

Open the Advance app client setting and select the

Auth Flow: ALLOW_USER_PASSWORD_AUTH

Review and create

In this step, just review the configurations you have done in the previous steps and click on the “Create user pool” button to create it!

Perfect! Now you have successfully created an AWS Cognito user pool.

Now you have to get the User pool ID and client ID to connect it with the app.

User pool ID:

You can find it after clicking on the name of your user pool, in our case, it is named “dev-testing-app”. Copy it.

Client ID:

On the same page, navigate to the App Integration Tab.

Go down below and you will find a list of client apps against that user pool. Copy the Client ID and you are good to go.

Step 4: Implement Cognito service

First, we will configure the Cognito client in the file named cognito/index.ts


import { CognitoIdentityProviderClient } from '@aws-sdk/client-cognito-identity-provider';  
  
interface ICognitoClient {  
    region: string;  
}  
  
export const CognitoClient = ({  
  region,  
}: ICognitoClient) =>  
  new CognitoIdentityProviderClient({  
    region  
  });

Implement Authentication Logic Create a new file named `cognito.service.ts` in your NestJS project and paste the following code into it:

import { Injectable } from '@nestjs/common';  
import {  
  CognitoIdentityProviderClient,  
  ConfirmSignUpCommand,  
  ResendConfirmationCodeCommand,  
  ForgotPasswordCommand,  
  ConfirmForgotPasswordCommand,  
  ChangePasswordCommand,  
  SignUpCommand,  
  SignUpCommandInput,  
  ConfirmSignUpCommandInput,  
  ResendConfirmationCodeCommandInput,  
  ForgotPasswordCommandInput,  
  ConfirmForgotPasswordCommandInput,  
  ChangePasswordCommandInput,  
  InitiateAuthCommandInput,  
  InitiateAuthCommand,  
  RespondToAuthChallengeCommand,  
  RespondToAuthChallengeCommandInput,  
  GetUserCommand  
} from '@aws-sdk/client-cognito-identity-provider';  
import { ConfigService } from '@nestjs/config';  
import { CognitoClient } from 'src/utils/aws/cognito';  
  
@Injectable()  
export class CognitoService {  
    private readonly cognitoClient: CognitoIdentityProviderClient;  
  
    constructor(private readonly configService: ConfigService) {  
      // Initialize AWS Cognito SDK client  
      this.cognitoClient = CognitoClient({  
        region: this.configService.get('aws.cognito.region'),  
      })  
    }  
  
// Signup command  
  async signUpCommand(data) {  
    const { email, password } = data;  
  
    const params: SignUpCommandInput = {  
      ClientId: this.configService.get('aws.cognito.clientId'),  
      Username: email,  
      Password: password,  
      UserAttributes: [  
        {  
          Name: 'email',  
          Value: email,  
        },  
      ],  
    };  
  
    return await this.cognitoClient.send(new SignUpCommand(params));  
  }  
  
// signin Command  
  async signInCommand(data) {  
    const { email, password } = data;  
  
    const params: InitiateAuthCommandInput = {  
      AuthFlow: "USER_PASSWORD_AUTH",  
      ClientId: this.configService.get('aws.cognito.clientId'),  
      AuthParameters: {  
        USERNAME: email,  
        PASSWORD: password,  
      },  
    };  
  
    return await this.cognitoClient.send(  
      new InitiateAuthCommand({ ...params }),  
    );  
  }  
  
// Confirm signup command  
  async confirmSignUpCommand(data) {  
    const { email, confirmationCode } = data;  
    const params: ConfirmSignUpCommandInput = {  
      ClientId: this.configService.get('aws.cognito.clientId'),  
      Username: email,  
      ConfirmationCode: confirmationCode,  
    };  
  
    return await this.cognitoClient.send(new ConfirmSignUpCommand(params));  
  }  
  
// resend confirmation code  
  async resendConfirmationCodeCommand(data) {  
    const { email } = data;  
    const params: ResendConfirmationCodeCommandInput = {  
      ClientId: this.configService.get('aws.cognito.clientId'),  
      Username: email,  
    };  
  
    return await this.cognitoClient.send(  
      new ResendConfirmationCodeCommand(params),  
    );  
  }  
  
// forgot Passowrd   
  async forgotPasswordCommand(data) {  
    const { email } = data;  
    const params: ForgotPasswordCommandInput = {  
      ClientId: this.configService.get('aws.cognito.clientId'),  
      Username: email,  
    };  
  
    return await this.cognitoClient.send(new ForgotPasswordCommand(params));  
  }  
  
// confirm forgot password   
  async confirmForgotPasswordCommand(data) {  
    const { email, confirmationCode, newPassword } = data;  
    const params: ConfirmForgotPasswordCommandInput = {  
      ClientId: this.configService.get('aws.cognito.clientId'),  
      Username: email,  
      ConfirmationCode: confirmationCode,  
      Password: newPassword,  
    };  
  
    return await this.cognitoClient.send(  
      new ConfirmForgotPasswordCommand(params),  
    );  
  }  
  
// change password using accessToken  
  async changePasswordCommand(data) {  
    const { accessToken, oldPassword, newPassword } = data;  
    const params: ChangePasswordCommandInput = {  
      AccessToken: accessToken,  
      PreviousPassword: oldPassword,  
      ProposedPassword: newPassword,  
    };  
  
    return await this.cognitoClient.send(new ChangePasswordCommand(params));  
  }  
  
}

Config Service: We have globally configured it in the app, to use environment variables using the config service provided by nestjs.

Step 5: Create the controller

Next, you need to develop the controller to establish the routes and utilize the service according to your requirements.

Step 6: Test your integration

Test Your Integration Test your AWS Cognito integration by registering users, logging in, changing passwords, etc.

Conclusion

Integrating AWS Cognito with NestJS provides a scalable and secure authentication solution for your applications. By following the steps outlined in this guide and leveraging the capabilities of the AWS SDK for JavaScript, v3, you can create a robust authentication system that meets the needs of your users. Remember to handle errors and edge cases appropriately and to follow best practices for security and performance.

web application security with Authnetication and Authorization

hello@tkssharma.com — Fri, 05 Apr 2024 00:00:00 GMT

web application security with Authnetication and Authorization

Authentication and authorization are two fundamental concepts in web application security. They ensure that users have the right level of access to resources while protecting sensitive data. In this guide, we’ll explore how to implement authentication and authorization in Node.js applications, covering best practices, popular libraries, and strategies for securing your Node.js projects.

Prerequisites

Before diving into authentication and authorization, make sure you have Node.js installed on your system. You can download it from the official website: Node.js Downloads.

Understanding Authentication

What Is Authentication?

Authentication is the process of verifying the identity of a user, ensuring they are who they claim to be. This is typically achieved through the use of credentials, such as usernames and passwords.

Authentication Best Practices

Use HTTPS: Always use HTTPS to secure data transmission between the client and server, especially when handling login credentials.
Password Hashing: Store passwords securely by hashing and salting them. Libraries like bcrypt can help with this.
Multi-Factor Authentication (MFA): Implement MFA to add an extra layer of security. This could involve something the user knows (password) and something they have (e.g., a mobile app token).
Session Management: Use secure and random session tokens to manage user sessions.

Popular Authentication Libraries

Passport.js

===============

Passport.js is a widely-used authentication library for Node.js. It supports various authentication strategies, including local (username and password), OAuth, and OpenID. Here’s how to set up Passport.js for local authentication:

const passport = require('passport');  
const LocalStrategy = require('passport-local').Strategy;  
  
passport.use(  
  new LocalStrategy((username, password, done) => {  
    // Verify user credentials here  
    if (username === 'user' && password === 'password') {  
      return done(null, { id: 1, username: 'user' });  
    } else {  
      return done(null, false, { message: 'Invalid credentials' });  
    }  
  })  
);

JSON Web Tokens (JWT)

=========================

JSON Web Tokens are a popular way to implement authentication and authorization in Node.js. Users receive a token upon login, which they include in subsequent requests. Here’s a simple example using the jsonwebtoken library:

const jwt = require('jsonwebtoken');  
  
// Create a token  
const token = jwt.sign({ userId: 1 }, 'secret_key', { expiresIn: '1h' });  
  
// Verify a token  
jwt.verify(token, 'secret_key', (err, decodedToken) => {  
  if (err) {  
    console.error('Token verification failed');  
  } else {  
    console.log('Decoded token:', decodedToken);  
  }  
});

Understanding Authorization

What Is Authorization?

Authorization defines what actions a user is allowed to perform after they’ve been authenticated. It involves granting or denying access to specific resources or functionality.

Authorization Best Practices

Role-Based Access Control (RBAC): Implement RBAC to assign roles (e.g., admin, user) to users and restrict access based on their roles.
Middleware: Use middleware functions to check a user’s permissions before granting access to a route or resource.
Access Tokens: Issue access tokens with user permissions encoded. Verify these tokens on the server-side for every request.

Implementing Authorization

Here’s a basic example of role-based authorization using middleware in Express.js:

function checkAdmin(req, res, next) {  
  if (req.user && req.user.role === 'admin') {  
    next();  
  } else {  
    res.status(403).json({ message: 'Access denied' });  
  }  
}  
  
// Protect a route  
app.get('/admin', checkAdmin, (req, res) => {  
  res.send('Admin panel');  
});

Conclusion

Authentication and authorization are vital for securing your Node.js applications. By following best practices and using reliable libraries like Passport.js and JSON Web Tokens, you can create robust authentication and authorization systems. Remember to stay updated with the latest security developments and continuously monitor and improve your application’s security measures.

How does Single Sign-On (SSO) work?

hello@tkssharma.com — Thu, 04 Apr 2024 00:00:00 GMT

Single Sign-On (SSO) is an authentication process that allows users to access multiple applications with a single login. This is accomplished using a central authentication server that stores the user’s credentials and verifies them for each application.

The idea of SSO is not new in the Cloud era. The on-premises identity solutions that enabled businesses to safely link their PCs, networks, and servers in the middle to late 1990s are the source of SSO technology. Around this time, companies started using specialized systems to handle user IDs, such as Lightweight Directory Access Protocol (LDAP) and Microsoft Active Directory (AD). After that, they used on-premises SSO or Web Access Management (WAM) products to protect access.

The actors on the SSO stage

There are three key players in the SSO game:

Identity Provider (IdP): This is the central authentication server. It’s where you enter your credentials and get verified. Think of it as a high-security building entrance.
Service Provider (SP): These individual applications rely on SSO for user login. Your work email, project management tool, and CRM platform can all be SPs. Imagine these as individual offices within the secure building.
SSO Server: This is the bridge between the IdP and SPs. It handles the communication and securely transmits authentication tokens between them. Think of it as a secure hallway connecting the entrance to the various offices.

The SSO workflow

Google and other services are excellent examples of how SSO works. Let’s take the example of trying to access Trello using your Google account. You don’t need to create a new user account on Trello and remember a new set of usernames/passwords.

For example, when you try to log in to Trello with your Google account, it redirects you to the central service hosted on accounts.google.com. Here, you will see a sign-in form to input your credentials. If the authentication process is successful, Google redirects you to Trello, where you can gain access where you are automatically signed in.

Accessing Trello via a Google account

Here are the steps that happen if you want to access Trello by using your Google account:

User requests access: Use the Trello login web page and select Google account as a login method.
Redirection to IdP: Trello redirects the user to the Google login page.
Login page served: The user is served with the Google login page.
Credentials entered: The user enters their Google credentials.
SSO Server verification: Google sends authentication info to the SSO Authorization server
Authentication at IdP: The Authorization server returns the auth token (SAML) if the credentials are valid.
Access granted: Google sends the auth token to the Trello
Validate token: In the last step, Trello sends the token to the Google Authorization server to validate it
Token valid: If the token is valid, Trello will allow access to the user and store the session for future interactions

The SSO Workflow

Benefits of SSO

There are multiple benefits of SSO, namely:

Improved user experience: Users do not need to remember multiple usernames and passwords.
Increased security: Users are less likely to reuse passwords across applications.
Simplified user access auditing: Ensuring the appropriate individuals have access to resources and sensitive data can be challenging. SSO solutions can configure user access permissions according to their role, department, and seniority level.

Disadvantages of SSO

The SSO comes with some essential disadvantages, too:

Single point of failure: One of the most notable disadvantages is that SSO creates a single point of failure. The attacker could access all connected applications and services if the SSO system is compromised.
Security risks: If credentials are compromised, the security of all connected applications could be at risk.
App compatibility: Occasionally, an application isn’t configured correctly to work with an SSO system. Application providers using Kerberos, OAuth, or SAML should be able to perform true SSO. If not, your SSO solution doesn’t offer complete coverage and is another password that users must remember.

Types of SSO

To work with SSO, you should know different standards and protocols. Some common types of protocols are:

SAML: This is the most common type of SSO. It uses the SAML protocol to exchange authentication information between the SSO server and applications.
Open Authorization (OAuth) 2.0): It provides delegated access to server resources on behalf of a resource owner. It specifies how tokens are transferred, allowing a user’s identity to be authenticated by an IDP and the credentials to be used to access APIs.
Open ID Connect (OIDC) is a newer type of SSO based on OAuth 2.0. It is a more straightforward protocol than SAML and more accessible to integrate with web applications.

To learn more about OAuth 2.0, check the following link. Note that you also can use OAuth 2.0 from Postman.

SSO protocols

Some other SSO types, such as Kerberos and Smart card authentication, are not widely used.

Kerberos allows users to obtain service tickets from the KDC using their credentials. These tickets are then presented to applications for access, eliminating the need for repeated logins. However, Kerberos relies on shared secrets between the KDC and all participants, making it less suitable for internet-facing SSO due to security concerns like compromised servers exposing credentials.
A smart card that holds an identity works with the SSO system (like a lock) to grant access to applications (doors) without needing separate logins for each. It adds a physical element to the authentication process, making it more resistant to unauthorized access. Yet, the user must physically carry it.

Selecting the proper SSO protocol

When selecting the proper protocol, one should take into account the following:

Enterprise vs. consumer applications: SAML is often preferred for enterprise applications due to its extensive support and integration capabilities with enterprise identity providers and complex authentication scenarios. OAuth 2.0 and OIDC are more suited for consumer-facing applications, offering flexibility and compatibility with mobile and web applications.
Authorization vs. authentication: If your primary need is authentication (verifying user identity), SAML or OIDC are your go-to options. OIDC, built on top of OAuth 2.0, provides an additional identity layer over OAuth’s authorization capabilities. Use OAuth 2.0 when your application needs to request access to user resources without exposing user passwords.
Evaluate application and platform compatibility: Check the SSO protocols’ compatibility with your existing infrastructure and the applications you plan to integrate. Some legacy or enterprise systems might support SAML more broadly, while modern applications often favor OAuth 2.0 and OIDC because they are API-friendly.
Consider the user experience: OIDC and OAuth 2.0’s modern, token-based approach can offer a smoother and more integrated user experience, especially for web and mobile applications.
Future-proofing: Consider the future direction of your application ecosystem. Are you moving towards cloud-based services, APIs, and mobile apps? OAuth 2.0 and OIDC may offer more flexibility and are generally considered more forward-looking in cloud and mobile services.
Compliance and regulatory requirements: Ensure the chosen protocol meets any specific regulatory requirements relevant to your industry, such as GDPR, HIPAA, or others that may dictate specific security or privacy standards.

SSO implementations

Many products on the market can be used for the SSO:

Microsoft Entra ID (formerly known as a Microsoft Active Directory). Ideal for organizations already invested in the Microsoft ecosystem, it offers seamless integration with Office 365, Dynamics CRM, and other Microsoft services. It’s known for its robust security features and comprehensive management capabilities.
Okta is a popular cloud-based SSO solution known for its ease of use, scalability, and wide range of application integrations. It’s a strong option for organizations seeking a comprehensive identity and access management (IAM) platform.
Ping Identity. Known for its flexibility, Ping Identity caters to enterprises with complex security requirements. It offers strong mobile and API security options, making it suitable for organizations needing high levels of customization and security.
OneLogin. With a focus on simplicity and integration, OneLogin offers a straightforward SSO solution that works well for small to medium-sized businesses. It provides real-time threat detection and AI-powered authentication for enhanced security.
Auth0 is favored for its developer-friendly approach. It provides powerful customization options, making it a go-to for organizations that must tailor their authentication flows. It supports a wide range of programming languages and frameworks.

SSO Vendors

Thanks for reading, and stay awesome!

building and deploying microservices using nestjs

hello@tkssharma.com — Wed, 03 Apr 2024 00:00:00 GMT

This Video is a Part of the playlist “Building Microservices and Deploying for SAAS Product” and it covers all about building microservices for Enterprise World

Link — https://www.youtube.com/playlist?list=PLIGDNOJWiL19tboY7wTzz6_RY6h2gpNrH Github https://github.com/tkssharma/microservices Old GitHub Links https://github.com/tkssharma/microservices Github: https://github.com/tkssharma/12-factor-app-microservices https://github.com/tkssharma/nestjs-graphql-microservices https://github.com/tkssharma/nodejs-microservices-patterns

In this playlist, we will talk about microservices development with node js of all different types like

Express/Nest JS with Typescript with ORM (TypeORM, knex, Prisma)
Deploying Services with AWS CDK Constructs with RDS/Dynamodb
Building Different Microservice Architecture
Using Event-Driven Arch, CQRS, Event Sourcing based Arch
Deploying services using AWS ECS or Lambda using AWS CDK

Here are some common microservices architecture patterns and best practices when using Node.js:

Single Service Microservice Architecture:
Layered Microservice Architecture:
Event-Driven Microservice Architecture:
API Gateway Microservice Architecture:
Service Mesh Microservice Architecture:
Serverless Microservices
Containerized Microservices:
Event Sourcing and CQRS:
BFF (Backend For Frontend) Microservice Architecture:
Database Microservice Architecture:

I’m Tarun, I am Publisher, Trainer Developer, working on Enterprise and open source Technologies JavaScript frameworks (React Angular, sveltekit, nextjs), I work with client-side and server-side javascript programming which includes node js or any other frameworks Currently working with JavaScript framework React & Node js 🚀 with Graphql 🎉 developer publications.

I am a passionate Javascript developer writing end-to-end applications using javascript using React, Angular 🅰️, and Vue JS with Node JS, I publish video tutorials and write about everything I know. I aim to create a beautiful corner of the web free of ads, sponsored posts,

Efective ways to design your APIs Node JS

hello@tkssharma.com — Wed, 03 Apr 2024 00:00:00 GMT

“Application Programming Interface,” or API, refers to a communication channel between various software services. Applications that transmit requests and responses are called clients and servers, respectively.

There are different types of API protocols:

REST — relies on a client/server approach that separates the front and back ends of the API and provides considerable flexibility in development and implementation.
RPC — The remote procedural call (RPC) protocol sends multiple parameters and receives results.
SOAP — Supports a wide range of communication protocols found across the internet, such as HTTP, SMTP, and TCP.
WebSocket — Provides a way to exchange data between browser and server via a persistent connection.

What is an API? (Credits: RapidAPI)

Most of our daily work as software engineers utilizes or creates REST APIs. The standard method of communication between the systems is through APIs. Therefore, it’s crucial to build REST APIs properly to avoid issues in the future. A well-defined API should be easy to work with, concise, and hard to misuse.

Here are some general recommendations:

1. Use nouns instead of verbs

Verbs should not be used in endpoint paths. Instead, the pathname should contain the nouns that identify the object to which the endpoint we are accessing or altering belongs.

For example, instead of using /getAllClients to fetch all clients, use /clients.

2. Use plural resource nouns

Use the plural form for resource nouns because this fits all types of endpoints.

For example, instead of using /employee/:id/, use /employees/:id/.

3. Be consistent

When we say to be consistent, this means to be predictable. When we have one endpoint defined, others should behave similarly. So, use the same case for resources, the same auth methods for all endpoints, the same headers, the same status codes, etc.

4. Keep it simple

We should make naming all endpoints resource-oriented, as they are. If we want to define an API for users, we would describe it as:

/users

/users/124

So, the first API gets all users, and the second one gets a specific user.

5. User proper status codes

This one is super important. There are many HTTP status codes, but we usually use just some. Don’t use too many, but use the same status codes for the same outcomes across the API, e.g.,

200 for general success.
201 for successful creation.
202 for a successful request.
204 for no content.
307 for redirected content.
400 for bad requests.
401 for unauthorized requests.
403 for missing permissions.
404 for lacking resources.
5xx for internal errors.

HTTP Status Codes

6. Don’t return plain text

REST APIs should accept JSON for request payload and respond with JSON because it is a standard for transferring data. Yet, it is not enough to return a body with JSON-formatted string; we need to specify a Content-Type header to be application/JSON. The only exception is if we’re trying to send and receive files between the client and server.

7. Do proper error handling

Here, we want to eliminate any confusion when an error occurs. We must handle errors properly and return a response code indicating what happened (from 400 to 5xx errors). We need to return some details in the response body along with a status code.

8. Have good security practices

We want all communication between a client and a server to be protected, meaning we need to always use SSL/TLS, with no exceptions. Also, allow authentication via API keys, which should be passed using a custom HTTP header with an expiration date.

9. Use pagination

Use pagination if our API needs to return a lot of data, as this will make our API future-proof. Use page and page_size is recommended here.

For example, /products?page=10&page_size=20

10. Versioning

It is essential to version APIs from the first version, as our APIs could have different users. This will allow our users to avoid being affected by changes that we can make in the future. API versions can be passed through HTTP headers or query/path params.

For example, /products/v1/4

Also, don’t forget to document your APIs because API will be only as good as its documentation. The docs should show examples of complete request/response cycles. Here, we can use the OpenAPI definition as a source of truth.

To develop APIs, check Swagger and OpenAPI specifications, Postman, or Stoplight.

Thanks for reading, and stay awesome!

Top 5 Node.js Backend frameworks for 2024

hello@tkssharma.com — Tue, 02 Apr 2024 00:00:00 GMT

Top highlight

Introduction

Node.js has been the talk of town since 2009 and most of the backend developers tend to go for Node.js. Its popularity has been increased over the past few years.

It is known as the most popular web development tool in USA including clients like Netflix and PayPal.

The reason for the increase in popularity is the reduction in loading time and performance improvements. Therefore, it is crucial to analyze the top 5 Node.js Backend frameworks for 2024.

Hence, this article will cover the top 5 Node.js backend frameworks for 2024, their features, and common use cases.

Pst, if you want to check out a simple demo to build an Express API, checkout my Bit Scope.

Express.js: The Tested Champion

Express.js is one of the most famous backend frameworks of Node.js. It is an open-source web application framework, freely available and built upon the Node.js platform. Since it’s a minimal framework, both novice and seasoned web developers tend to go for Express.js. It is mainly used for creating web applications and RESTful APIs.

Key Features: What Makes It Stand Out?

1. Efficient Routing

Express.js offers a clean and simple method for managing various HTTP requests and assigning them to particular tasks. Let’s look at an example.

// app.js  
const express = require('express');  
const app = express();  
const port = 3000;  
  
// Route for Homepage  
app.get('/', (req, res) => {  
  res.send('Welcome to the homepage!');  
});  
  
// Route 2  
app.get('/user/:id', (req, res) => {  
  const userId = req.params.id;  
  res.send(User Profile Page - ID: ${userId} );  
});

2. Middleware Support

Express.js allows middleware support for handling HTTP requests. Let’s look at a simple example of creating a middleware for logging HTTP request details.

const express = require('express');  
const app = express();  
const port = 3000;  
  
app.use((req, res, next) => {  
  console.log(\[${new Date().toLocaleString()}\] ${req.method} ${req.url} );  
  next();  
});

3. Easy Database Integration

Express.js is database-agnostic. It doesn’t enforce a specific database choice. Developers can choose their preferred database. The ease of integrating databases with Express.js is because of its modular and flexible nature and the rich ecosystem of npm packages that provide database connectivity.

4. Easy to learn

Express.js is known for its simplicity and minimalistic design, making it so easy for developers to learn, especially if they are already familiar with JavaScript and Node.js.

Plus, you can easily get started with Express.js with tools like Bit. If you’ve not used Bit before, it’s a next-generation build system for composable software.

And, if you think about it, Express.js on its own is composable in nature. You can plug and play components at any point in your app.

For example, you can create middleware components that you can plug in and out at any given time.

Figure: A Bit Scope of an Express API designed using Bit and Independent Components

You can see two components: an Authorizer as well as an API app. These two components have been implemented as independent Bit components and are maintained and versioned in its isolated space.

By doing so, you’re able to design your app in a composable manner, quickly!

To view this full implementation, check out my Bit Scope.

NestJS: A Modern and Structured Approach

NestJS is a framework that is known for building scalable and efficient Node.js server-side applications. It uses progressive JavaScript and has the capability of writing code in TypeScript. Even though it fully supports Typescript, it can write code in pure JavaScript and includes Object Oriented Programming, Functional Programming, and Functional Reactive Programming.

Key Features: What makes it stand out

1. Modularity

Nest.js allows code to be broken down into separate manageable modules which make it more maintainable. For an example, let’s look at the below module.

import { Module } from '@nestjs/common';  
  
@Module({  
 imports: \[  
  CacheModule  
 \],  
 controllers: \[PaymentController\],  
 providers: \[PaymentService\],  
})  
export class PaymentModule {}

This payment module can be exported to other modules. In this example, we have exported common cache module inside this module. Since nest.js has a module structure, it makes it easy to maintain.

2. Scalable

Nest.js enables seamless scaling by breaking applications into manageable modules, supporting flexible component replacement, and accommodating high traffic through microservices and asynchronous operations. It ensures efficient handling of increased workload while maintaining reliability.

3. Dependency Injection

Dependency injection is simply the method of adding an external dependency to a class rather than creating it within the class itself. Let’s look at an example.

import {  
 HttpException, Injectable, NotFoundException  
} from '@nestjs/common';  
  
@Injectable()  
export class PaymentService {  
  
 constructor() {}  
  
 getReceipt() {  
   return 'Payment Receipt';  
 }  
  
}

We have created payment service and added @Injectable() annotation to make it injectable. We can use the created service as stated below.

import { Controller, Get, Post, Body } from '@nestjs/common';  
import { PaymentService } from './payment.service';  
@Controller('payment')  
export class PaymentController {  
 constructor(private readonly paymentService: PaymentService) {}  
@Get()  
 getPaymentReceipt() {  
 return this.paymentService.getReceipt();  
 }  
}

4. Type Safety

Nest.js uses TypeScript to provide type safety, which can be used to catch potential errors during development and improve code maintainability. Let’s look at an example.

export class PaymentDto {  
  
  @IsNotEmpty()  
  @IsEnum(SERVICE\_PROVIDER\_SLUG, {  
    message: \`Invalid serviceProvider. Valid options are: ${Object.values(SERVICE\_PROVIDER\_SLUG).join(', ')}\`,  
  })  
  serviceProvider: string;  
  
  @IsNotEmpty()  
  @IsNumber()  
  value: number;  
  
  @IsNotEmpty()  
  @IsString()  
  validityPeriod: string;  
  
  @IsNotEmpty()  
  @IsArray()  
  @ArrayNotEmpty()  
  @ValidateNested()  
  @Type(() => PaymentAttributesDto)  
  paymentAttributes: PaymentAttributesDto\[\]   
}

In this example, we have created a dto that includes multiple parameters and we have added annotations to validate the parameter type. For example, if we send a string value to the “value” parameter, it will throw an error.

Koa.js: Elegant and Lightweight

Koa.js is a smaller, more expressive web framework that is also designed by the Express.js team. It allows you to ditch callbacks and handle errors by leveraging async functions.

Key Features: What makes it stand out

1. Context Object (ctx)

Koa.js includes a functionality called ctx to capture request and response details. This context is passed to each middleware. In this example, we have logged method and request from the ctx object.

const Koa = require('koa');  
const app = new Koa();  
  
app.use(async (ctx) => {  
  const { method, url, request, response } = ctx;  
  console.log('Method :' + method + ' Request : ' + request);  
});  
  
app.listen(3000);

2. Middleware Composition

Much similar to Express Js, Koa supports middleware functions for handling HTTP requests and responses. In this example, we have created a simple middleware.

const Koa = require('koa');  
const app = new Koa();  
  
app.use(async (ctx, next) => {  
  await next();   
});  
  
app.listen(3000);

3. Async/Await Support

Koa uses the async/await syntax for writing asynchronous code in a more synchronous-looking way. The below example consists of using async/await keywords.

const Koa = require('koa');  
const app = new Koa();  
  
app.use(async (ctx) => {  
  const data = await fetchData();  
  ctx.body = Data: ${data} ;  
});  
  
app.listen(3000);

4. Error Handling

Koa.Js supports various types of error handling. We can use app.emit() or ctx.throw() to handle errors. The below example consists of mentioned error-handling methods.

const koa = require('koa');  
const app = new koa();  
  
//Error Handling Method 1  
app.use(async (ctx, next) => {  
  try {  
    await Promise.reject('Something went wrong');  
  } catch (err) {  
    ctx.status = err.status || 500;  
    ctx.body = err.message;  
    ctx.app.emit('error', err, ctx);  
  }  
});  
  
//Error Handling Method 2  
app.use(async (ctx, next) => {  
  ctx.throw(500, 'error');  
});  
  
app.on('error', (err, ctx) => {  
  console.log(err);  
});  
  
app.listen(3000);

Hapi.js

Hapi.js which is short for Http-API, is an open-source framework for developing scalable web applications. One of the most basic use cases of hapi is to build REST APIs.

Walmart Labs created hapi js to handle their traffic for events like Black Friday, one of the busiest days for online shopping in the U.S. calendar.

Key Features: What makes it stand out

1. Configuration-Driven Design

Using a configuration object, we are able to configure routes, settings and plugins in Hapi.js.

const Hapi = require('@hapi/hapi');  
  
const server = Hapi.server({  
  port: 3000,  
  routes: {  
    cors: true,  
  },  
});  
  
server.route({  
  method: 'GET',  
  path: '/',  
  handler: (request, h) => {  
    return 'Hello, Hapi!';  
  },  
});  
  
async function start() {  
  await server.start();  
  console.log(Server running at ${server.info.uri} );  
}  
  
start();

2. Powerful Plugin System

Hapi.js allows plugins to be easily integrated without much hassle. Let’s look at an example.

const start = async function () {  
  
    const server = Hapi.server();  
  
    await server.register(\[{  
        plugin: require('plugin1'),  
        options: {}  
    }, {  
        plugin: require('plugin2'),  
        options: {}  
    }\]);  
};

In this example, we have integrated two plugins. Options can be passed to the plugin using options key.

3. Authentication and Authorization

Hapi.js provides built-in support for various authentication strategies and allows developers to define access control policies easily.

server.route({  
  method: 'GET',  
  path: '/private-data',  
  handler: (request, h) => {  
    // Access private data only if authenticated  
    const user = request.auth.credentials;  
    return Welcome, ${user.username}! ;  
  },  
  options: {  
    auth: 'jwt', // Use JWT authentication strategy  
  },  
});

Based on the example, we can directly define the authentication strategy as ‘jwt’.

4. Input Validation

Input validation is another crucial aspect of hapi.js. In the options object of a route, we can define which inputs need to be validated. Default validate object consists of below values.

{
headers: true,
params: true,
query: true,
payload: true,
state: true,
failAction: 'error'
}

Adonis.js

Adonis.js is a full-featured MVC framework for Node.js. It has the capability of building scalable and maintainable applications. Adonis.js follows a similar structure to Laravel and includes features like ORM, authentication, and routing out of the box.

Key Features: What makes it stand out

1. Full-stack MVC framework

Adonis.js follows the MVC architectural pattern. Having a MVC framework helps organize code and makes it easier to maintain and scale.

2. Integrated ORM (Lucid) for database interactions

Adonis.js has its own ORM called Lucid. Lucid provides an expressive query builder and supports various database systems. In lucid, we can create models to read and write to the database. Let’s look at the below example.

const Model = use('Model')

class User extends Model {
}

module.exports = User

We are using this user model instead of database queries. Now we are creating a route, where inside we are fetching the users. We can simply user User.all() to fetch the users.

const Route = use('Route')
const User = use('App/Models/User')

Route.get('users', async () => {
return await User.all()
})

3. Authentication system

Adonis.js has built-in support for user authentication and authorization. It provides a set of methods and middleware for handling user sessions, password hashing, and access control.

Conclusion

In 2024, the above-mentioned backend frameworks stand tall in the market.

Whether you chose Express.js for its simplicity, Nest.js for its structure, Adonis.js for productivity, or Koa.js for the elegance, choosing the right framework is crucial.

web development bootcamp 2024

hello@tkssharma.com — Tue, 02 Apr 2024 00:00:00 GMT

This Video is a Part of the “Frontend Developer Bootcamp from Zero to Hero | Full course | 80 Hours 🚀🚀

👨‍💻 The Frontend Developer Career Path 2024 👨‍💻 This path includes

👨‍💻 75 hours of content

100s of coding challenges

HTML, CSS, JS & React
Career module

🚀 This career path will turn you into a hireable frontend developer, and teach you how to nail the job interview. It contains over 70 hours of top-notch tutorials, hundreds of coding challenges, and dozens of real-world projects.

🚀 Welcome to the career path

🚀 Web dev basics

🚀 Making websites interactive

🚀 Essential CSS concepts

🚀 Essential JavaScript concepts

🚀 Responsive design

🚀 Working with APIs

🚀 Learn UI design

🚀 React basics

🚀 Advanced React

🚀 Getting hired

🚀 The program contains 12 modules. All modules are filled with interactive coding challenges to ensure that you don’t fall off the wagon. You’ll learn HTML, CSS, JavaScript, React, UI design, career strategy, and more.

🚀🚀Why this course rocks 🚀🚀

This career path will turn you into a hireable front-end developer as fast as possible. By the end of it, you will have learned enough HTML, CSS, JavaScript, and React to get your first job as a front-end web developer.

It will also prepare you with strategies to get through the interview process so that you increase the chance of landing your dream job.

EWeb developer Bootcamp

How to Learn from My YouTube Channel (code with tkssharma)

hello@tkssharma.com — Mon, 01 Apr 2024 00:00:00 GMT

💻How to Learn From My Channel

How to Get Started with My YouTube Channel (code with tkssharma)

A little bit about me

Who Should Join My Channel?

This channel is purely on JavaScript without any random garbage videos on random stuff, It's purely on JavaScript stuff.

I will divide the content of my channel into different categories

anyone as i am publishing very beginner series (Bootcamp 80 hours Course)
Experienced Developer (Worked in Industry for 2-3 Years)
Beginner Developers (already know HTML/CSS and basic javascript)
Advanced Sr developers looking to learn something out of the box

Here you go (Beginner level content)

Details

Playlist

Welcome to HTML (web development)

https://www.youtube.com/watch?v=uWPkwkvz770&list=PLIGDNOJWiL1-eexM6Af88VCAQStHZ-rhp

Learn Core in depth javascript aspects

https://www.youtube.com/watch?v=_H057Dc2Pdg&list=PLIGDNOJWiL1-42-wM9jfgN364lzxwFFI2&index=2

javascript Pattern (only if good at core javascript)

https://www.youtube.com/watch?v=jW7SEl17odc&list=PLIGDNOJWiL19ybjwD69t3G2yrQ9a0Pbij

javascript Core (must have)

https://www.youtube.com/watch?v=jW7SEl17odc&list=PLIGDNOJWiL19ybjwD69t3G2yrQ9a0Pbij

CSS and Design

Not Much on Design Part

Javascript SOLID principles

https://www.youtube.com/watch?v=OacD3Zurvcs&list=PLIGDNOJWiL1_rJsSXnWH1YMxaPuWaDL44

Modern Javascript in Depth

https://www.youtube.com/watch?v=EhOGAPjbKEg&list=PLIGDNOJWiL19go98IKaQ4sqThyi2V67JG

Modern Javascript in Depth

https://www.youtube.com/watch?v=EhOGAPjbKEg&list=PLIGDNOJWiL19go98IKaQ4sqThyi2V67JG

Crack Core JS Interviews

https://www.youtube.com/watch?v=uSKWsY4j-mA&list=PLIGDNOJWiL19UnFU-1JZr2bh9EeZ2_zc2

HTML for beginners

Web development boot camp [80 Hours of Training]

https://www.youtube.com/watch?v=uWPkwkvz770&list=PLIGDNOJWiL1-eexM6Af88VCAQStHZ-rhp&index=1&t=1s

Learn Core in-depth javascript aspects

https://www.youtube.com/watch?v=_H057Dc2Pdg&list=PLIGDNOJWiL1-42-wM9jfgN364lzxwFFI2&index=2

javascript Pattern (only if good at core javascript)

https://www.youtube.com/watch?v=jW7SEl17odc&list=PLIGDNOJWiL19ybjwD69t3G2yrQ9a0Pbij

javascript Core (must have)

https://www.youtube.com/watch?v=lNhHzg0P4G8&list=PLIGDNOJWiL1-bN8FPZ6xnD6ljL_ZtyXTT

Lets talk about CSS and Designing Part

Sorry, i am not teaching much on Styling and Design Part

https://www.youtube.com/channel/UCS1NeZF0Or2E1RAV9hQJz3g?view_as=subscriber https://tkssharma.com/

SOLID principles in Javascript

https://www.youtube.com/watch?v=OacD3Zurvcs&list=PLIGDNOJWiL1_rJsSXnWH1YMxaPuWaDL44

Modern Javascript in Depth

https://www.youtube.com/playlist?list=PLIGDNOJWiL19go98IKaQ4sqThyi2V67JG

Crack Javascript Jobs

https://www.youtube.com/watch?v=uSKWsY4j-mA&list=PLIGDNOJWiL19UnFU-1JZr2bh9EeZ2_zc2

If you have done all then you are in Top 1 % of javascript developers

Details

Playlist

Node JS Master Playlist (All about Node JS)

https://www.youtube.com/watch?v=Mu3zUZY3drA&list=PLIGDNOJWiL18Rh8ymQgXnIwtg_Qx0fkXf

React JS 150 + videos

https://www.youtube.com/watch?v=ZWqfADc-0K8&list=PLIGDNOJWiL19gSS77cxozYBGpxeSYKmxz

React with Typescript

https://www.youtube.com/watch?v=z2eB8809ovc&list=PLIGDNOJWiL1-hSzJ8-0NKQmJteTvtkac-

React Redux/ react Redux toolkit

https://www.youtube.com/watch?v=5xkGQkPrs00&list=PLIGDNOJWiL18DIOG6ZhRf_7YyaAyoDNlb

Learn Typescript in Depth

https://www.youtube.com/watch?v=4H7rKh8v0Ig&list=PLIGDNOJWiL19yoowEtDCOrENRBHH3qLty&index=6

Typescript Core

https://www.youtube.com/watch?v=u1fU91kGvAY&list=PLIGDNOJWiL19-aWzk7C2cNl0c32_Gqd5L

Become a Master in Node JS

https://www.youtube.com/watch?v=Mu3zUZY3drA&list=PLIGDNOJWiL18Rh8ymQgXnIwtg_Qx0fkXf

Become a Master in React JS

https://www.youtube.com/watch?v=ZWqfADc-0K8&list=PLIGDNOJWiL19gSS77cxozYBGpxeSYKmxz

Now its right time to Learn Typescript Concepts and Become Pro developer

Learn Typescript in Depth

https://www.youtube.com/watch?v=4H7rKh8v0Ig&list=PLIGDNOJWiL19yoowEtDCOrENRBHH3qLty&index=6

Typescript

https://www.youtube.com/watch?v=u1fU91kGvAY&list=PLIGDNOJWiL19-aWzk7C2cNl0c32_Gqd5L

Now It's all about Advanced Level Playlist with end-to-end development

Docker

https://www.youtube.com/watch?v=lDB9q7LGMaE&list=PLIGDNOJWiL1_3cIiT9Z5qxlA7PXEtlUa-

Docker & Containerization

https://www.youtube.com/watch?v=ay7Rdj7MQQA&list=PLIGDNOJWiL1-svqMFkNEiNdDyhs41Vnib

Now you can explore any content on My channel on all different technologies
Nest JS (I have lots of content on Nest JS)
Next JS (SSR apps)
Graphql (express and nestjs with graphql)
Sveltejs
Sveltekit
Express JS
Node JS
Koa JS, Hapi JS
Microservices with express and nestjs
Full Stack Clone Applications (Airbnb, Uber Eats, Swiggy, Stack Overflow)
I have 150 + Playlist and each playlist is teaching something important

My Most Popular Course on YouTube

https://www.youtube.com/watch?v=UxoklNY7L30&list=PLIGDNOJWiL182j1bD_nQm-SxARR5s977O

Nest JS Master Course

https://www.youtube.com/watch?v=5tau19ae6aY&list=PLIGDNOJWiL186E2BIAofH6vbS9GxAWRle

Nest JS Advanced

https://www.youtube.com/watch?v=GSoGVlG1MTQ&list=PLIGDNOJWiL1-8hpXEDlD1UrphjmZ9aMT1

https://www.youtube.com/watch?v=i1wN86rnMEI&list=PLIGDNOJWiL1_YrquGbDDN4BNNRy678S

All About Microservices

Watch ALL My Playlist https://www.youtube.com/user/vibbbbbba/playlists?view_as=subscriber

⭐️ Support my channel⭐️ https://ko-fi.com/tkssharma ⭐️ GitHub link for Reference ⭐️ https://github.com/tkssharma 🔥 Video contents..https://tkssharma.com/publications/ 👇 ⭐️ Crash Courses ⭐️

🔗 Nodejs Microservices - https://www.youtube.com/watch?list=PLIGDNOJWiL19WHIxJ0Q4aP4X3oljPha5n&v=_fK8g2dhzvU&source_ve_path=MjM4NTE&feature=emb_title 🔗 Full Stack Clone Apps using Next JS - https://www.youtube.com/watch?v=t1JsK9rMYI8&list=PLIGDNOJWiL1-Smf4ABmuvcOrV7E4mCqN3 🔗 Next JS 13 Crash Course - https://www.youtube.com/watch?v=tSfKoY2Zzf8&list=PLIGDNOJWiL1-qK8XrRkMlLwYCSuVWCPZp 🔗 Nodejs Master Course - https://www.youtube.com/watch?v=Mu3zUZY3drA&list=PLIGDNOJWiL18Rh8ymQgXnIwtg_Qx0fkXf 🔗 ... 100+ more playlist 🔗 .... its very big list

🐦 Twitter: https://twitter.com/tkssharma 🐦 Github: https://github.com/tkssharma 🐦 Website: https://tkssharma.com 🐦 Blogs: https://blog.tkssharma.com

PreviousConnect with me NextWeb Developer Bootcamp (80 Hours Course) 2024

Last updated 4 months ago

On this page

How to Get Started with My YouTube Channel (code with tkssharma)
Here you go (Beginner level content)
Web development boot camp [80 Hours of Training]
Lets talk about CSS and Designing Part
SOLID principles in Javascript
Modern Javascript in Depth
Crack Javascript Jobs
Typescript
Now It's all about Advanced Level Playlist with end-to-end development
Docker
Docker & Containerization
My Most Popular Course on YouTube
Nest JS Master Course
Nest JS Advanced
All About Microservices

Stop using `npm install` in your CI/CD pipeline

hello@tkssharma.com — Mon, 01 Apr 2024 00:00:00 GMT

Stop using `npm install` in your CI/CD pipeline

Why is this still a topic that has to be addressed?

In the last couple of months I have noticed that developers are struggling to find the right command to install the dependencies.

Recently, the following questions have been asked by developers a lot.

Why does the CI/CD pipeline not work anymore? We just wanted to do a bug fix. Two weeks ago everything was fine, now the pipeline fails.

We have run “npm install” and now we get type-errors. What did we do wrong?

“npm install” failed because of some peer dependency conflicts. We have added “ — legacy-peer-deps” and now some dependencies are missing at build time. Why?

We have changed the artifactory URL in the .npmrc. However, everytime we perform “npm install”, the old artifactory URL is added to the package-lock.json. Why?

Stop Sign [https://pixabay.com/de/photos/stoppen-unterzeichnen-verkehrsschild-634941/]

“npm install” vs “npm ci”

Most of the time dependency versions are listed with a carret (^) or a tilde (~). In such a case, npm will not install the exact version given, but the newest one in the given range.

~version: “Approximately equivalent to version” (~1.2.3 := >=1.2.3 <1.(2+1).0 := >=1.2.3 <1.3.0–0)
^version: “Compatible with version” (1.2.3 := >=1.2.3 <2.0.0–0)

“npm install”

So, what does exactly happen? In short, with “npm install” the newest dependencies — listed in the package.json — and their peer-dependencies will not only be downloaded and added to the local node_modules folder, but also placed into the OS specific cache-folder and the given dependency tree stored in the package-lock.json. Thus, removing the whole node_modules folder does not mean that all is downloaded again, but rather that the associated packages are searched for in the cache-folder.

“npm ci”

In contrast to “npm install” the “npm ci” command uses the package-lock.json and installs all dependencies according to this tree. Therefore, as long as the package-lock.json does not change, exactly the same dependencies will be installed every time “npm ci” is performed.

“ — legacy-peer-deps” vs “ — force”

During the installation peer-dependency-conflicts may happen.

What are peer dependency conflicts? If two or more dependencies need a package in a different version. For example, if package A requires version 2_.0.0_ and package B version 1.0.0.

With “ — legacy-peer-deps” the peer-dependencies are ignored and skipped from the installation process. Therefore, no more peer-dependency-conflicts will happen. This is the recommended option to use. However, this could also lead to missing packages.

How can one apply this option? This option can be either added to the npm config or just passed as additional parameter.

npm config set legacy-peer-deps=true \--location=project  
npm ci \--legacy-peer-deps

On the other hand, _“ — force”_ does not skip the peer-dependencies, but rather installs all associated _peer-dependency_ versions instead. This may not be the desired behavior as this will blow up the _node\_modules_ folder.

npm install \--force

In short, “ — legacy-peer-deps” should do the trick. However, if you ran into missing dependencies, then “ — force” should be used.

Installing dependencies from scratch

Sometimes developers want to remove all their existing local dependencies and install everything again. For example, if the artifactory URL has changed, and they are asked to locally test the change. This can be done as follows.

// remove the local node\_modules folder  
rm -rf node\_modules  
// remove all cached dependencies  
npm cache clean \--force  
npm install \--force

Setting up the right artifactory

The artifactory has to be set in the .npmrc file stored in the user-folder. Unfortunately, only one artifactory can be configured. However, if you want to use multiple ones, scoped repositories can be used.

registry=https://FIRST-REPO-URL  
// define a scoped repository  
@test:registry=http://SECOND-REPO-URL

Questions

These are the most recent questions that I have been asked by developers in the last couple of months. I will set them into context and provide the solution.

Why does the CI/CD pipeline not work anymore? We just wanted to do a bug fix. Two weeks ago everything was fine, now the pipeline fails.

In this case, the CI/CD pipeline did not use “npm ci”, but “npm install”. As the repository is not updated on a regular basis, but just once in a while, newer packages where installed and the package-lock.json overwritten. This did lead to some type errors. Therefore, please always use “npm ci”.

We have run “npm install” and now we get type-errors. What did we do wrong?

The same problem as the one before. The following error appeared.

Type 'Server' is not generic

“@types/ws” had to be added with an exact version.

"@types/ws": "8.5.4"

“npm install” failed because of some peer dependency conflicts. We have added “ — legacy-peer-deps” and now some dependencies are missing at build time. Why?

The peer-dependencies were skipped. This did lead to missing dependencies. Therefore, “npm ci — force” had to be used.

We have changed the artifactory URL in the .npmrc. However, everytime we perform “npm install”, the old artifactory URL is added to the package-lock.json. Why?

The local node_modules folder was deleted. However, the OS specific cache-folder still contained the requested dependencies. The following command had to be performed.

npm cache clean --force

Summing Up

I have not only shown the difference between “npm install” and “npm ci”, but also given an introduction to the options “ — legacy-peer-deps” and “ — force”. Moreover, I have listed the most recent asked questions that I have encountered during the last months and answered all of them.

To sum up, please use “npm ci” in your CI/CD pipeline. Otherwise, the build may break, due to newer dependency versions.

How to Deploy React App to S3 Bucket

hello@tkssharma.com — Wed, 13 Dec 2023 00:00:00 GMT

One simple approach I often rely on to deploy my static frontend application is a storage service and with AWS, AWS S3.

In this article, I provide a step by step guide on how to automate the deployment of your static files to AWS S3 leveraging Gitlab's CI/CD pipelines, and with git tags as deploy triggers.

We start by creating an S3 bucket, after which we prepare Gitlab with AWS credentials, write the pipeline and finally, test the setup end to end by pushing a git tag which will trigger the pipeline and deploy our static files to our AWS S3 bucket.

The approach chosen in this article is a generic approach to share a concept which can be applied irrespective of your project or language domain.

Requirements

Gitlab account
AWS account

Setup AWS S3 bucket and access

Step 1:
Go to AWS S3 to create a bucket for storing the static files by clicking on the create bucket button.

Step 2:
In the form provided, enter your bucket name.
For this guide, we will use the bucket name gitlab-ci-tutorial.

Now, select a region of your choice (us-east-1), leave everything else as is and click on create bucket.

Notice that the created bucket is empty.

Step 3:
Go to AWS IAM to create a user with programatic access to S3.

Click on Add users.

Step 4:
Following the steps in the form provided, we create a user that will be used from Gitlab to access/deploy files to our S3 bucket.

Provide a name for the user, gitlab_s3_tutotrial and check the Access key - Programmatic access checkbox.

For permissions, we will attach an existing policy for full S3 access AmazonS3FullAccess in this guide. It is recommended to create a more fine grained access based on your project requirements.

Step 5:
Review and create user.

Prepare Gitlab

Step 1:
Create your project on Gitlab. I created a project gitlab-ci-tutorial1

Step 2:
Within the created project, navigate to settings > CI/CD and expand the variables section.

Add the following environment variables which will be used for deployment to AWS S3 as created in step 5 Setup AWS S3 bucket and access > step 5 above

AWS_ACCESS_KEY_ID: <Your Access key ID>
AWS_SECRET_ACCESS_KEY: <Your secret access key>
AWS_DEFAULT_REGION: us-east-1 (as chosen in steps above)
S3_BUCKET: gitlab-ci-tutorial (Name of your bucket)

Write the pipeline

Now, we are ready to create the pipeline and this is done using a .gitlab-ci.yml file at the root of the project.

Whenever a push is made to Gitlab, this file will be detected and the pipeline will run. Though, in this case we want the pipeline to only deploy when we push a new tag.

Create a .gitlab-ci.yml file and add the contents below to the file.

stages:
  - build
  - deploy

build:
  stage: build
  script:
  # We simulate a build phase by manually creating files in a build folder
  # An example would be using `yarn build` to build a react project that would create static files in a build or public folder
    - mkdir -p build && touch build/build.html build/build.txt
  artifacts:
    when: on_success
    paths:
      - build/
    expire_in: 20 mins


deploy:
  stage: deploy
  needs:
    - build
  image: registry.gitlab.com/gitlab-org/cloud-deploy/aws-base:latest
  rules:
    - if: $CI_COMMIT_TAG                 # Run this job when a tag is created
  script:
    - echo "Running deploy"
    - aws s3 cp ./build s3://$S3_BUCKET/ --recursive
    - echo "Deployment successful"

Enter fullscreen mode Exit fullscreen mode

In the pipeline above, we made use of stages and passed artifacts (outputs) from one stage to another.
The build stage was written to mimic an actual build of a project which will then create output files in a build folder. Here, we created a build folder containing 2 files with shell commands.
The image used in the deploy phase aws-base contains the aws CLI command necessary to run the aws deploy script and by default, detects the AWS environment variables with the exact names we added to the variables section of Gitlab earlier.

For a full description of the configuration options of the .gitlab-ci.yml file, check here.

Now, commit the file to the repo and push to the project we created earlier.

Notice in the images below that on the Gitlab project, only the build job was run.
This is because of the line - if: $CI_COMMIT_TAG in the rules section of the deploy phase which will ensure that the deployment is only run when we push a new tag or create it on the Gitlab UI. Also, see here Trigger pipeline with git tags.

Test the overall setup

Step 1:
Tag your commit.

git tag 'V1'

Enter fullscreen mode Exit fullscreen mode

Step 2:
Push your tag.

git push origin 'V1'

Enter fullscreen mode Exit fullscreen mode

Notice, we now have a new pipeline at the top that ran 2 jobs, the build and deploy jobs.

Below is the completed deploy job.

Step 3:
Check the bucket on AWS S3

Refresh and notice that the S3 bucket is no longer empty and contains the files built and deployed from our pipeline as seen below.

Congratulations, we did it! 🎉

Conclusion

There are different ways to deploy code with the Gitlab CI/CD pipeline. This approach with git tags is one common approach used with npm packages and most organisations I have worked with and brings the advantage of easy rollback amongst many.

How To Work With Multiple Github Accounts on a single Machine

hello@tkssharma.com — Tue, 12 Dec 2023 00:00:00 GMT

How To Work With Multiple Github Accounts on a single Machine

Let suppose I have two github accounts, https://github.com/tarun-office and https://github.com/tarun-personal. Now i want to setup my mac to easily talk to both the github accounts.

NOTE: This logic can be extended to more than two accounts also. :)

The setup can be done in 5 easy steps:

Steps:

Step 1 : Create SSH keys for all accounts
Step 2 : Add SSH keys to SSH Agent
Step 3 : Add SSH public key to the Github
Step 4 : Create a Config File and Make Host Entries
Step 5 : Cloning GitHub repositories using different accounts

Step 1

Create SSH keys for all accounts

First make sure your current directory is your .ssh folder.

     $ cd ~/.ssh

Syntax for generating unique ssh key for ann account is:

     ssh-keygen -t rsa -C "your-email-address" -f "github-username"

here,

-C stands for comment to help identify your ssh key

-f stands for the file name where your ssh key get saved

Now generating SSH keys for my two accounts

     ssh-keygen -t rsa -C "my_office_email@gmail.com" -f "github-tarun-office"
     ssh-keygen -t rsa -C "my_personal_email@gmail.com" -f "github-tarun-personal"

Notice here tarun-office and tarun-work are the username of my github accounts corresponding to my_office_email@gmail.com and my_personal_email@gmail.com email ids respectively.

After entering the command the terminal will ask for passphrase, leave it empty and proceed.

Now after adding keys , in your .ssh folder, a public key and a private will get generated.

The public key will have an extention .pub and private key will be there without any extention both having same name which you have passed after -f option in the above command. (in my case github-tarun-office and github-rahu-personal)

Step 2

Add SSH keys to SSH Agent

Now we have the keys but it cannot be used until we add them to the SSH Agent.

     ssh-add -K ~/.ssh/github-tarun-office
     ssh-add -K ~/.ssh/github-tarun-personal

You can read more about adding keys to SSH Agent here.

Step 3

Add SSH public key to the Github

For the next step we need to add our public key (that we have generated in our previous step) and add it to corresponding github accounts.

For doing this we need to:

1. Copy the public key

 We can copy the public key either by opening the github-tarun-office.pub file in vim and then copying the content of it.

     vim ~/.ssh/github-tarun-office.pub
     vim ~/.ssh/github-tarun-personal.pub

We can directly copy the content of the public key file in the clipboard.

     pbcopy < ~/.ssh/github-tarun-office.pub
     pbcopy < ~/.ssh/github-tarun-personal.pub

2. Paste the public key on Github

Sign in to Github Account
Goto Settings > SSH and GPG keys > New SSH Key
Paste your copied public key and give it a Title of your choice.

Sign in to Github
Paste this link in your browser (https://github.com/settings/keys) or click here
Click on New SSH Key and paste your copied key.

Step 4

Create a Config File and Make Host Entries

The ~/.ssh/config file allows us specify many config options for SSH.

If config file not already exists then create one (make sure you are in ~/.ssh directory)

     touch config

The commands below opens config in your default editor....Likely TextEdit, VS Code.

     open config

Now we need to add these lines to the file, each block corresponding to each account we created earlier.

     #tarun-office account
     Host github.com-tarun-office
          HostName github.com
          User git
          IdentityFile ~/.ssh/github-tarun-office

     #tarun-personal account
     Host github.com-tarun-personal
          HostName github.com
          User git
          IdentityFile ~/.ssh/github-tarun-personal

Step 5

Cloning GitHub repositories using different accounts

So we are done with our setups and now its time to see it in action. We will clone a repository using one of the account we have added.

Make a new project folder where you want to clone your repository and go to that directory from your terminal.

For Example: I am making a repository on my personal github account and naming it TestRepo Now for cloning the repo use the below command:

    git clone git@github.com-{your-username}:{owner-user-name}/{the-repo-name}.git

    [e.g.] git clone git@github.com-tarun-personal:tarun-personal/TestRepo.git

Finally

From now on, to ensure that our commits and pushes from each repository on the system uses the correct GitHub user — we will have to configure user.email and user.name in every repository freshly cloned or existing before.

To do this use the following commands.

     git config user.email "my_office_email@gmail.com"
     git config user.name "tarun Pandey"
     
     git config user.email "my-personal-email@gmail.com"
     git config user.name "tarun Pandey"

Pick the correct pair for your repository accordingly.

To push or pull to the correct account we need to add the remote origin to the project

     git remote add origin git@github.com-tarun-personal:tarun-personal
     
     git remote add origin git@github.com-tarun-office:tarun-office

Now you can use:

     git push
     
     git pull

P.S:
If this gist has been helpful to you, kindly consider leaving a star.
If you'd like, let's connect on LinkedIn and build a supportive community together.

How to deploy Node JS application to ECS Fargate Cluster

hello@tkssharma.com — Tue, 11 Jul 2023 00:00:00 GMT

Create Fastify Application with Docker [Part-1]

Fastify is a popular, efficient and low overhead Node.js web framework for building scalable and fast HTTP servers. Docker is a powerful containerization tool that allows you to create and manage lightweight and portable containers that run your applications.

In this blog post, we will describe how to run a simple “hello world” HTTP server using the Fastify library inside a Docker container in Node.js.

Prerequisites

Node.js and npm installed on your system.
Docker installed on your system.

Create a new Node.js project

First, create a new directory for your project and initialise a new Node.js project using npm. Run the following commands in your terminal:

mkdir fastify-docker  
cd fastify-docker  
npm init -y

Install Fastify

Next, install Fastify and save it as a dependency in your project using npm. Run the following command in your terminal:

npm install fastify --save

Create the “hello world” server

Now, create a new file called index.js in the root of your project directory. This file will contain the code for the "hello world" HTTP server.

const fastify = require('fastify')();  
  
const { ADDRESS = 'localhost', PORT = '3000' } = process.env;  
  
fastify.get('/', async (request, reply) => {  
  return { message: 'Hello world!' }  
})  
  
fastify.listen({ host: ADDRESS, port: parseInt(PORT, 10) }, (err, address) => {  
  if (err) {  
    console.error(err)  
    process.exit(1)  
  }  
  console.log(`Server listening at ${address}`)  
})

By default, Fastify (and many other web servers) bind to the loopback IP address (127.0.0.1) when running on the host machine, which means that it can only receive connections from the same machine. However, when running inside a Docker container, the container’s loopback IP address is not accessible from the host machine or other machines on the network.

To allow incoming connections to reach Fastify inside the container, we need to bind to an IP address that is accessible from outside the container. Binding to 0.0.0.0 is a way to bind to all available network interfaces on the container, which means that Fastify will be able to receive connections from any IP address that can reach the container.

This code creates a new Fastify instance, defines a single GET route for the root path, and starts the server listening on port 3000. When a client makes a request to the root path, the server will respond with a JSON object containing the message "Hello world!".

Create a Dockerfile

Next, create a new file called Dockerfile in the root of your project directory. This file will contain the instructions for building your Docker image.

FROM node:14  
  
WORKDIR /app  
  
COPY package.json .  
  
RUN npm install  
  
COPY . .  
  
EXPOSE 3000  
  
ENV ADDRESS=0.0.0.0 PORT=3000  
  
CMD ["npm", "start"]

This Dockerfile starts with the official Node.js 14 image, sets the working directory to /app, copies the package.json file to the working directory, installs the dependencies using npm, copies the rest of the files to the working directory, exposes port 3000, and sets the default command to run the npm start script.

Build the Docker image

Now that you have created the Dockerfile, you can use it to build a Docker image. Run the following command in your terminal:

docker build -t fastify-docker .

This command tells Docker to build an image using the instructions in the Dockerfile and tag it with the name fastify-docker.

Run the Docker container

Finally, you can run the Docker container using the image you just built. Run the following command in your terminal:

docker run -p 3000:3000 fastify-docker

This command tells Docker to run a container using the fastify-docker image and map port 3000 inside the container to port 3000 on your local machine.

Test the server

You can now test your “hello world” server by opening a web browser and navigating to http://localhost:3000. You should see a JSON response containing the message “Hello world!”.

Fastify + Distroless + Multi-Stage Builds [PART-2]

Docker multi-stage builds allow you to use multiple FROM statements in a single Dockerfile to create multiple stages for building your container image. Each stage can have its own dependencies, environment variables, and build instructions. Using a multi-stage build can help you reduce the size of your container images by eliminating unused dependencies and files.

Prerequisites

Docker installed on your system.
Basic knowledge of Docker and building Docker images.

Create a new Dockerfile

First, create a new file called Dockerfile.multistage in the root of your project directory. This file will contain the instructions for building your Docker image using a multi-stage distroless base image.

# Stage 1: Build the application  
FROM node:16-alpine as **builder**  
  
WORKDIR /app  
  
COPY package*.json ./  
  
RUN npm install --production  
  
# Stage 2: Create the production image  
FROM gcr.io/distroless/nodejs:16  
  
ENV ADDRESS=0.0.0.0 PORT=3000  
  
WORKDIR /app  
  
COPY package*.json ./  
  
COPY **--from=builder** /app/node_modules .  
  
COPY . .  
  
CMD ["node", "index.js"]

This `Dockerfile` contains two stages:

Stage 1: Build the application
Stage 2: Create the production image

In stage 1, we use the official Node.js 16-alpine image as our base image, set the working directory to /app, copy the package*.json files to the working directory, install dependencies using npm, copy the rest of the files to the working directory, and run the npm run build command. This stage is responsible for building our application.

In stage 2, we use the distroless Node.js 16 image as our base image, set the working directory to /app, copy the node_modules from the previous stage to the working directory and set the default command to run the node index.js command. This stage is responsible for creating the production image.

Note that we’re using the --from=builder flag in the COPY command to copy the dist directory from the previous stage to the current stage.

Build the Docker image

Now that you have created the Dockerfile.multistage, you can use it to build a Docker image. Run the following command in your terminal:

docker build -f Dockerfile.multistage -t fastify-multistage .

This command tells Docker to build an image using the instructions in the Dockerfile.multistage and tag it with the name fastify-multistage.

Run the Docker container

Finally, you can run the Docker container using the multi-stage distroless-based image you just built. Run the following command in your terminal:

docker run -p 3000:3000 fastify-multistage

This command tells Docker to run a container using the fastify-multistage image and map port 3000 inside the container to port 3000 on your local machine.

Congratulations! Similarly to our other blog posts, you can now open http://localhost:3000 in your browser to see a response from the server.

Deploy Fastify Application to AWS ECS Fargate using AWS CDK[PART-3]

Prerequisites

Node.js and npm installed on your system.
Docker installed on your system.

What is AWS ECS Fargate?

Amazon Elastic Container Service (ECS) is a fully managed container orchestration service provided by AWS. ECS allows you to easily run and scale containerised applications on AWS, and it integrates seamlessly with other AWS services. Fargate is a deployment option for ECS that allows you to run containers without having to manage the underlying infrastructure.

Why use AWS CDK?

AWS Cloud Development Kit (CDK) is an open-source software development framework to define cloud infrastructure in code and provision it through AWS CloudFormation. With the CDK, you can define infrastructure as code using familiar programming languages like TypeScript, Python, or Java. The CDK offers several benefits, including:

Easy to use: Developers can use familiar programming languages and modern development tools to define and deploy infrastructure, making it easier to manage infrastructure as code.
Reusable: The CDK provides a library of pre-built AWS constructs, making it easy to reuse and share infrastructure code.
Scalable: The CDK can be used to manage large-scale infrastructure deployments using the same familiar programming constructs used for smaller deployments.
Secure: The CDK enforces best practices for security and compliance.

Getting Started

I won’t assume you’ve followed along with my previous blog posts, so let’s get our project up & running quickly:

Create a new Node.js project

First, create a new directory for your project and initialise a new Node.js project using npm. Run the following commands in your terminal:

npm install -g aws-cdk  
mkdir fastify-docker  
cd fastify-docker  
cdk init app --language=typescript

Install Fastify

Next, install Fastify and save it as a dependency in your project using npm. Run the following command in your terminal:

npm install fastify @types/node --save

Create the “hello world” server

Now, create a new file called src/index.ts in the root of your project directory. This file will contain the code for the "hello world" HTTP server.

import fastify from 'fastify'  
  
const server = fastify()  
  
const { ADDRESS = 'localhost', PORT = '3000' } = process.env;  
  
server.get('/', async (request, reply) => {  
  return { message: 'Hello world!' }  
})  
  
server.listen({ host: ADDRESS, port: parseInt(PORT, 10) }, (err, address) => {  
  if (err) {  
    console.error(err)  
    process.exit(1)  
  }  
  console.log(`Server listening at ${address}`)  
})

Add a build script

Let’s update package.json to add a simple build script for our API:

{  
  "scripts": {  
    "build": "tsc -p tsconfig.json --outDir ./dist"  
  }  
}

The --outDir flag controls the directory where compiled code will be placed.

Create a new Dockerfile

First, create a new file called Dockerfile in the root of your project directory. This file will contain the instructions for building your Docker image.

We’re going to re-use the multi-stage Dockerfile created in previous Part

# Stage 1: Install production dependencies  
FROM node:16-alpine as builder  
  
WORKDIR /app  
  
COPY package*.json ./  
  
RUN npm install --production  
  
# Stage 2: Compile our application  
FROM node:16-alpine as compiler  
  
WORKDIR /app  
  
COPY package*.json ./  
  
RUN npm install && npm run build  
  
# Stage 3: Create the production image  
FROM gcr.io/distroless/nodejs:16  
  
ENV ADDRESS=0.0.0.0 PORT=3000  
  
WORKDIR /app  
  
COPY package*.json ./  
  
COPY --from=builder /app/node_modules .  
COPY --from=compiler /app/dist .  
  
CMD ["node", "dist/index.js"]

This Dockerfile contains three stages:

Stage 1: Install only production dependencies
Stage 2: Compile our application from TypeScript
Stage 3: Create the production image

In stage 2, we are again using the official Node.js 16-alpine image as our base image, but this time we are installing all the necessary development & production dependencies in-order to run npm run build . This stage is responsible for compiling our TypeScript code.

In stage 3, we use the distroless Node.js 16 image as our base image, set the working directory to /app, copy the node_modules and dist folders from the previous stage to the working directory and set the default command to run the node dist/index.js command. This stage is responsible for creating the production image.

Deploying a simple HTTP API to AWS ECS Fargate

We’ll be using the ApplicationLoadBalancedFargateService construct that makes it easy to deploy our service. It takes care of creating and configuring several AWS resources, including:

Amazon ECS cluster: A logical grouping of resources that are used to run containerized applications on Fargate.
Amazon ECS task definition: A blueprint that describes how a container should be run, including information about the container image, CPU and memory requirements, and networking configuration.
Amazon ECS service: A long-running task that runs on Fargate and is managed by ECS.
Amazon Elastic Load Balancer (ELB): A load balancer that distributes traffic to the service.
Amazon CloudWatch Logs group: A log group where logs generated by the service are stored.

Deploy to ECS Fargate using AWS CDK

We have now built our initial solution in TypeScript and have implemented a multi-stage Dockerfile. Finally, need to update & deploy our stack to AWS using the CDK CLI. Before we do that, we need to make sure that we have configured our AWS credentials and set the default region in the AWS CLI.

The lib/cdk-stack.ts file is where we will define the infrastructure resource for deploying the Fargate ECS CDK construct.

Let’s define the ApplicationLoadBalancedFargateService construct. We will need to import the aws-ecs and aws-ecs-patterns module:

import * as cdk from 'aws-cdk-lib';  
import * as ecs from 'aws-cdk-lib/aws-ecs';  
import * as ecsPatterns from 'aws-cdk-lib/aws-ecs-patterns';  
import { Construct } from 'constructs';  
  
export class MyStack extends cdk.Stack {  
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {  
    super(scope, id, props);  
  
    const loadBalancedFargateService = new ecsPatterns.ApplicationLoadBalancedFargateService(this, 'Service', {  
      memoryLimitMiB: 512,  
      cpu: 256,  
      taskImageOptions: {  
        image: ecs.ContainerImage.fromAsset('.'),  
      },  
    });  
      
    loadBalancedFargateService.targetGroup.configureHealthCheck({  
      path: '/',  
    });  
  }  
}

In the updated MyStack class, we have configured the ApplicationLoadBalancedFargateService construct. We define where AWS CDK should look in-order to find the Dockerfile we defined earlier in this post. AWS CDK takes care of building Docker Container and pushing it to a secure AWS ECR for us, during a deployment.

Finally, we configure a health check for the AWS Application Load Balancer, so that it knows the service is healthy and ready to receive traffic.

Deploying AWS CDK

To deploy AWS CDK, we first need to bootstrap our AWS environment. Bootstraping involves creating various resources to facilitate deployments and a new AWS CloudFormation stack that AWS CDK will use to store and manage its deployment artifacts.

Bootstrap AWS CDK

Once we have installed the AWS CLI, we can bootstrap AWS CDK by running the following command:

cdk bootstrap

Note: Running bootstrap more than once on a specific AWS Account & region has no effect.

Deploy Infrastructure Resources

After defining our infrastructure resources, we can deploy them using the AWS CDK CLI. To deploy our resources, run the following command:

cdk deploy

This command will build, package, and deploy our infrastructure resources to AWS.

Once the deployment is complete, you should see an output message that contains the URL of your HTTP API. You can use this URL to test your API by making a GET request to it.

Housekeeping

Once you’ve deployed everything, use the following command to destroy any deployed resources to avoid any unwanted cost:

cdk destroy

Conclusion

In this technical blog post, we walked through the steps of deploying a simple HTTP API to AWS ECS Fargate using the AWS CDKApplicationLoadBalancedFargateService construct. We covered the basics of building a Fastify Docker container using TypeScript, AWS ECS Fargate and then deploying using CDK.

The ApplicationLoadBalancedFargateService construct makes it easy to deploy containerised applications to AWS ECS Fargate. With the CDK, we can define and deploy infrastructure as code using familiar programming languages, making it easier to manage infrastructure at scale.

Exciting React Features in 2024

hello@tkssharma.com — Mon, 10 Jul 2023 00:00:00 GMT

Exciting React Features in 2024

In the rapidly evolving world of web development, React has emerged as one of the most popular JavaScript libraries. Since its inception, React has revolutionized the way developers build user interfaces, enabling them to create powerful and interactive web applications.

As we step into 2023, React continues to evolve, introducing new features and improvements that enhance productivity and simplify development processes. Let me describe some exciting features that have made their way into React in 2023, along with code examples to demonstrate their usage.

Concurrent Mode

React’s Concurrent Mode, slated for release in 2023, promises significant performance improvements, especially for complex and computationally intensive applications. It enables React to work on multiple tasks simultaneously, breaking them into smaller units of work, or “fibers.” This set of features allows applications to remain responsive even when performing expensive calculations, network requests, or rendering large component trees.

Let’s see this new mode in action based on several examples:

An example of using the new useTransition hook to show a loading state during a slow rendering process.

import { useTransition } from 'react';  
  
const ReactComponent = () => {  
  const [isPending, startTransition] = useTransition();  
  
  const handleClick = () => {  
    startTransition(() => {  
      // Perform some slow operation (calculations or rendering or data fetching)  
    });  
  };  
  
  return (  
    <div>  
      {isPending ? 'Loading...' : null}  
      <button onClick={handleClick}>Start Process</button>  
    </div>  
  );  
}

In the next example, we will use the React.lazy function that allows us to load components lazily, which improves the initial load time of the application.

import React, { Suspense } from 'react';  
  
// Define a component that will be rendered lazily  
const LazyComponent = React.lazy(() => import('./LazyComponent'));  
  
// Define a fallback component to show while the lazy component is loading  
const LoadingFallback = () => <div>Loading...</div>;  
  
const App = () => {  
  return (  
    <div>  
      <h1>React Concurrent Mode Example</h1>  
      <Suspense fallback={<LoadingFallback />}>  
        <LazyComponent />  
      </Suspense>  
    </div>  
  );  
};  
  
export default App;

In this example, we’re also using the Suspense component from React Concurrent Mode to handle the loading of a lazy component. The LazyComponent is imported using the React.lazy() function, which allows us to load the component lazily when it's needed.

The Suspense component takes a fallback prop, which is the component that will be rendered while the lazy component is loading. In this case, we've defined a LoadingFallback component that simply displays a loading message.

When the LazyComponent is rendered inside the Suspense component, React will automatically suspend rendering and show the fallback component (LoadingFallback) until the lazy component finishes loading. Once the lazy component is loaded, React will replace the fallback component with the lazy component.

Enabling Concurrent Mode rendering.

import { unstable_createRoot } from 'react-dom';  
  
const App = () => {  
  // ...  
};  
  
const rootElement = document.getElementById('root');  
  
unstable_createRoot(rootElement).render(<App />);

Finally, let’s do something fun and more challenging! We will use React’s Concurrent Mode with ChatGPT’S basic API.

First, let’s ensure we use React application set up with Concurrent Mode enabled. You’ll need React version 18 or above for Concurrent Mode to work. Here’s a basic structure of the application:

// App.js  
import React from 'react';  
import ChatContainer from './ChatContainer';  
  
const App = () => {  
  return (  
    <div className="App">  
      <ChatContainer />  
    </div>  
  );  
}  
  
export default App;

// ChatContainer.js  
import React, { useState, useEffect, Suspense } from 'react';  
import { createChatGPTSession, generateChatGPTResponse } from './api'; // Assume you have an API module for interacting with ChatGPT  
  
const ChatConversation = React.lazy(() => import('./ChatConversation'));  
const ChatInput = React.lazy(() => import('./ChatInput'));  
  
const ChatContainer = () => {  
  const [conversation, setConversation] = useState([]);  
  
  useEffect(() => {  
    // Initialize the ChatGPT session  
    const session = createChatGPTSession();  
    // Store the session for future use or clean up  
  
    return () => {  
      // Clean up the session  
      // Close or release any resources related to the ChatGPT session  
    };  
  }, []);  
  
  const handleUserMessage = async (message) => {  
    // Add the user's message to the conversation  
    setConversation((prevConversation) => [...prevConversation, { author: 'user', message }]);  
  
    // Generate a response from ChatGPT  
    const response = await generateChatGPTResponse(session, message);  
    // Assume the generateChatGPTResponse function sends a request to your API to get the response from ChatGPT  
  
    // Add the ChatGPT's response to the conversation  
    setConversation((prevConversation) => [...prevConversation, { author: 'chatbot', message: response }]);  
  };  
  
  return (  
    <div className="ChatContainer">  
      <h1>Chat with ChatGPT</h1>  
      <Suspense fallback={<div>Loading...</div>}>  
        <ChatConversation conversation={conversation} />  
        <ChatInput onMessage={handleUserMessage} />  
      </Suspense>  
    </div>  
  );  
}  
  
export default ChatContainer;

// ChatConversation.js  
import React from 'react';  
  
const ChatConversation = ({ conversation }) => {  
  return (  
    <div className="ChatConversation">  
      {conversation.map((message, index) => (  
        <div key={index} className={`message ${message.author}`}>  
          {message.message}  
        </div>  
      ))}  
    </div>  
  );  
}  
  
export default ChatConversation;

// ChatInput.js  
import React, { useState } from 'react';  
  
const ChatInput = ({ onMessage }) => {  
  const [message, setMessage] = useState('');  
  
  const handleSubmit = (e) => {  
    e.preventDefault();  
    onMessage(message);  
    setMessage('');  
  };  
  
  return (  
    <form onSubmit={handleSubmit} className="ChatInput">  
      <input  
        type="text"  
        placeholder="Type your message..."  
        value={message}  
        onChange={(e) => setMessage(e.target.value)}  
      />  
      <button type="submit">Send</button>  
    </form>  
  );  
}

In this example, the ChatContainer component manages the conversation state using the useState hook. The useEffect hook is used to initialize the ChatGPT session when the component mounts. The handleUserMessage function is called when the user sends a message, and it updates the conversation state with the user's message and generates a response from ChatGPT using the generateChatGPTResponse function (which you would implement based on your backend setup).

The conversation is then rendered in the ChatConversation component, and user input is captured using the ChatInput component. The React.lazy function is used for lazy loading these components to take advantage of Concurrent Mode's improved performance.

Remember that this is a simplified example, and you may need to modify it based on your specific requirements and the integration details of your ChatGPT API.

React Server Components

React Server Components is an experimental feature that brings the power of React’s component model to server-side rendering. With server components, you can build interactive UIs that leverage server and client resources, resulting in faster and more efficient rendering. Server components provide new flexibility, enabling code sharing between server and client, reducing time-to-interaction, and improving SEO.

Basic example

import { serverComponent, useState } from 'react-server-component';  
  
const Counter = () => {  
  const [count, setCount] = useState(0);  
  
  return (  
    <button onClick={() => setCount(count + 1)}>  
      Clicked {count} times  
    </button>  
  );  
}  
  
export default serverComponent(Counter);

In the example above, we define a simple Counter component that increments a count state when clicked. By using serverComponent from react-server-component, we can seamlessly render this component on the server and the client, providing a faster and more interactive user experience.

A bit more complex example.

// serverComponent.js  
import { createSignal } from 'react';  
import { renderToStringAsync } from 'react-dom/server';  
  
const MyServerComponent = () => {  
  const [count, setCount] = createSignal(0);  
  
  return (  
    <div>  
      <h1>Server Component Example</h1>  
      <p>Count: {count()}</p>  
      <button onClick={() => setCount(count() + 1)}>Increment</button>  
    </div>  
  );  
}  
  
async function renderServerComponent() {  
  const html = await renderToStringAsync(<MyServerComponent />);  
  return html;  
}  
  
export default renderServerComponent;

In this example, we’re using the createSignal function from the react package to manage the state of a count variable. The server component renders a heading, a paragraph displaying the current count, and a button to increment the count. Whenever the button is clicked, the count value is updated using the setCount function.

The renderServerComponent function is an asynchronous function that uses renderToStringAsync from react-dom/server to render the server component to a string. It returns the generated HTML.

You can then use this server component in your server-side code to render the component and send it as a response to a client request.

Please note that the Server Components API is an experimental feature and may change. Use the appropriate versions of React and related packages to work with server components.

React Query Integration

React Query is a powerful data-fetching library that simplifies asynchronous data management in React applications. In 2023, React Query has become an essential companion for React developers, and its integration with React is seamless. Let’s see an example:

import { useQuery } from 'react-query';  
  
const UserProfile = () => {  
  const { data, isLoading, isError } = useQuery('user', () =>  
    fetch('/api/user').then((res) => res.json())  
  );  
  
  if (isLoading) {  
    return <div>Loading...</div>;  
  }  
  
  if (isError) {  
    return <div>Error fetching user data</div>;  
  }  
  
  return <div>{data.name}</div>;  
}  
  
export default UserProfile;

In the above code snippet, we use the useQuery hook from react-query to fetch user data from an API. The hook handles the loading state, error handling, and data caching automatically, making data fetching in React applications more straightforward and efficient.

React DevTools Profiler Enhancements

React DevTools, the browser extension for debugging React applications, is continuously evolving to provide better insights into the performance of your components. In 2023, React DevTools introduced enhanced profiling capabilities, allowing developers to analyze and optimize their application’s rendering and re-rendering performance. With the Profiler, we can identify and address performance bottlenecks, reduce unnecessary renders, and ensure a smooth user experience.

import React from 'react';  
import { unstable_trace as trace } from 'scheduler/tracing';  
  
const RactComponent = () => {  
  return (  
    <div>  
      {/* Your component JSX */}  
    </div>  
  );  
}  
  
function App() {  
  return (  
    <React.Profiler id="MyComponent" onRender={callback}>  
      <MyComponent />  
    </React.Profiler>  
  );  
}  
  
function callback(id, phase, actualDuration, baseDuration, startTime, commitTime) {  
  // Handle the callback here  
  console.log('Render', id, phase, actualDuration, baseDuration, startTime, commitTime);  
}  
  
export default App;

React Error Boundaries with Suspense

React Error Boundaries allow you to catch and handle errors during rendering. In combination with Suspense, you can create fallback UIs while waiting for data to load. Here’s an example:

import { ErrorBoundary } from 'react';  
  
const ReactComponent = () => {  
  return (  
    <ErrorBoundary fallback={<div>Error occurred!</div>}>  
      <Suspense fallback={<div>Loading...</div>}>  
        {/* Components with potential errors or async loading */}  
      </Suspense>  
    </ErrorBoundary>  
  );  
}

React Hooks Improvements

React Hooks continue to evolve with new features and improvements. In 2023, you can leverage some of the new built-in hooks. Here’s an example of the new useContextSelector hook that allows you to subscribe to specific parts of the context value:

import { useContextSelector } from 'react';  
  
const ReactContext = React.createContext();  
  
const ReactComponent = () => {  
  const value = useContextSelector(MyContext, (contextValue) => contextValue.someValue);  
  
  return <div>{value}</div>;  
}

JSX transform

React has introduced a new JSX Transform that eliminates the need for the React import in every file. This simplifies the codebase and improves performance. Here's an example:

// Before JSX Transform  
import React from 'react';  
  
const MyComponent = () => {  
  return <div>Hello, World!</div>;  
}  
  
export default MyComponent;

// After JSX Transform  
const MyComponent = () => {  
  return <div>Hello, World!</div>;  
}  
  
export default MyComponent;

With the new JSX Transform, you no longer need to import React explicitly in each JSX code file!

Conclusion

That’s it! React continues to evolve and introduce exciting features that enhance developer productivity and improve the overall performance of web applications.

In this article, we explored some of the notable features that have been introduced in React in 2023, including Concurrent Mode, React Server Components, React Query Integration, React DevTools Profiler Enhancements, React Error Boundaries with Suspense, React Hooks improvements and the JSX Transform.

As we move forward, it’s essential to stay updated with the latest advancements in React to leverage its full potential and build cutting-edge web applications.

Build udemy.com Full Stack Clone Application

hello@tkssharma.com — Sat, 08 Jul 2023 00:00:00 GMT

Build Udemy Full Stack Clone Application

Github https://github.com/tkssharma/udemy-fullstack-clone Playlist https://www.youtube.com/watch?v=eWobvqLYgTY&list=PLT5Jhb7lgSBO5xhwHD8QLC68tuPRliHPC

Title: Build a Udemy Clone App with Next.js and Nest.js - Full Stack Tutorial

Description:

📚 Welcome to an exciting full-stack tutorial where we'll guide you through building a Udemy clone app using the powerful Next.js and Nest.js frameworks! In this comprehensive guide, you'll learn how to create a feature-rich online learning platform from scratch. Whether you're a beginner or an experienced developer, this tutorial is packed with valuable insights and practical demonstrations.

🔧 What You'll Learn:

Frontend Development with Next.js: We'll start by setting up the frontend using Next.js for server-rendered React applications. Learn to design and build responsive web pages for students and instructors.
Backend Development with Nest.js: Dive into Nest.js for the backend, a powerful Node.js framework. Create RESTful APIs for course management, user enrollment, payment processing, and content delivery.
Authentication and Authorization: Implement secure user authentication and authorization mechanisms, allowing users to sign up, log in, and manage their profiles.
Content Management: Create a comprehensive content management system for instructors to upload and manage course materials, including lectures, quizzes, assignments, and resources.
Payment Integration: Enable seamless payment processing for course purchases using payment gateways like Stripe or PayPal.
User Dashboards: Build user dashboards for students and instructors, providing insights into course progress, earnings, and course management.
Search and Recommendations: Implement search functionality and personalized course recommendations to enhance the learning experience.
Testing and Debugging: Thoroughly test your application, handle errors gracefully, and debug any issues that may arise during development.
Deployment: Learn how to deploy both the frontend (Next.js app) and backend (Nest.js app) to cloud hosting platforms like Heroku, AWS, or Google Cloud.
Optimizations: Optimize your application for performance, scalability, and security. Implement features like caching, rate limiting, and security measures to protect user data.
Documentation and Maintenance: Create comprehensive documentation for your application, including API documentation for developers. Continuously maintain and update your application to stay current with technology trends and security best practices.

🚀 Who Should Watch?:

This tutorial is suitable for:

Developers: Whether you're a beginner or an experienced coder, you'll find valuable content to enhance your skills.
Entrepreneurs: If you have a startup idea related to online education, this tutorial can serve as the foundation for your project.
Tech Enthusiasts: Curious about how online learning platforms like Udemy are built? Join us on this journey of exploration.

🎓 Prerequisites:

Basic knowledge of JavaScript and React is recommended, as both Next.js and Nest.js use JavaScript (or TypeScript).
Familiarity with Node.js and backend development concepts is helpful but not required. We'll cover the essentials.
No prior experience with payment gateways or content management systems is necessary; we'll provide clear explanations.

📚 Resources:

Creating a full-stack clone app for a Udemy-like platform is a significant undertaking. Below, I'll provide a high-level outline of the key steps involved in building such an application.

Prerequisites:

Node.js and npm: Ensure you have Node.js and npm installed on your computer.
Web Development Knowledge: A solid understanding of JavaScript, React, and basic backend development concepts is essential.
React, Node.js, and a Database: Familiarize yourself with React for the frontend, Node.js for the backend, and choose a database system (e.g., MongoDB, PostgreSQL) for storing user data, courses, lectures, and other application data.

Steps to Build a Udemy-Like Full-Stack Clone App:

Project Setup:

Start by creating two separate projects: one for the frontend using a React framework and one for the backend using Node.js. You can use the following commands:
```
# Create React app
npx create-react-app udemy-frontend

# Create Node.js app
mkdir udemy-backend
cd udemy-backend
npm init
```
Database Setup:

Configure your database connection in the Node.js project. Create database schemas for users, courses, lectures, enrollments, and other relevant data.
Authentication:

Implement user authentication and authorization using libraries like Passport.js or Firebase Authentication. Allow users to sign up, log in, and manage their profiles.
Backend Development:

Create RESTful APIs for course management, user enrollment, payment processing, content delivery, and other essential functionalities. Use Express.js or a similar framework for the backend.
Frontend Development:

Design and build user interfaces for students and instructors using React or a React-based framework. Implement features such as course listings, video playback, user profiles, and course enrollment.
Content Management:

Create a content management system for instructors to upload and manage course materials, including lectures, quizzes, assignments, and resources. Ensure seamless content delivery to students.
Payment Integration:

Enable payment processing for course purchases using payment gateways like Stripe, PayPal, or a similar service. Implement secure and seamless transactions.
User Dashboards:

Build user dashboards for students and instructors, allowing them to track course progress, view earnings, manage their courses, and interact with the platform.
Search and Recommendations:

Implement search functionality and personalized course recommendations to enhance the learning experience and help users discover relevant courses.
Testing and Debugging:

Thoroughly test your application, handle errors gracefully, and debug any issues that may arise during development. Ensure the security of user data and payment information.
Deployment:

Deploy both the frontend (React app) and backend (Node.js app) to cloud hosting platforms like Heroku, AWS, or Google Cloud. Configure environment variables for security and sensitive information.
Optimizations:

Optimize your application for performance, scalability, and security. Implement features like caching, rate limiting, and security measures to protect user data and ensure a smooth user experience.
Documentation and Maintenance:

Create comprehensive documentation for your application, including API documentation for developers. Continuously maintain and update your application to stay current with technology trends and security best practices.

Building a Udemy-like full-stack clone app is a substantial and rewarding project. This high-level overview serves as a starting point, but you'll need to delve deeper into each step, explore documentation, and possibly use additional libraries and technologies to create a polished and secure application.

📢 Stay Tuned:

Don't forget to subscribe and enable notifications for more web development tutorials, coding challenges, and tech-related content. We're here to support your coding journey!

Ready to embark on the journey of building your own Udemy-like platform? Let's get started and make online learning accessible to everyone! 📖💻🚀

Github https://github.com/tkssharma/udemy-fullstack-clone Playlist https://www.youtube.com/watch?v=eWobvqLYgTY&list=PLT5Jhb7lgSBO5xhwHD8QLC68tuPRliHPC

Ecosystem of React JS IN 2024

hello@tkssharma.com — Sat, 08 Jul 2023 00:00:00 GMT

Ecosystem of React JS IN 2024

As React celebrates its 10th anniversary in 2023, the ecosystem continues to flourish with constant advancements and innovations. As one of the most widely-used JavaScript libraries, React remains a favorite among developers for building dynamic and high-performance applications.

However, with a vast array of tools and libraries available within the React ecosystem, choosing the right combination for your project can be challenging. In this article, we'll explore the most essential libraries that are widely used and trusted by developers, and help you make informed decisions on the right tools to use for your next React project.

Getting started with React

For those who are new to React, getting started can be a daunting task. There are a few different ways to get started which can be confusing.

CodeSandbox and Stackblitz

If you're new to React, or if you just want to play around with it without setting up a project, you can use online sandboxes like CodeSandbox or StackBlitz. These sandboxes provide a virtual environment where you can write and test your React code without having to install anything on your computer.

Vite

Online sandboxes aside, a popular choice is Vite, which is a build tool that provides a fast and easy development experience for modern web projects. Vite supports React out-of-the-box, which means that you can quickly set up a React project without having to configure the build process manually. Run the below command and follow the prompts!

npm create vite@latest

Next.js

Another popular choice for getting started with React is Next.js, which is a framework built on top of React. Next.js provides a robust set of features, including automatic code splitting, server-side rendering, static site generation, and more. Next.js is great for building complex applications that require server-side rendering and SEO optimization. The easiest way to get started with Next.js is by using create-next-app. It is a CLI tool that enables you to quickly start building a new Next.js application, with everything set up for you.

npx create-next-app@latest

Routing

Routing is an essential part of any modern web application, and there are many excellent routing libraries available to handle complex routing logic and create dynamic, single-page applications (SPAs).

React Router

One of the most popular routing libraries for React is React Router. React Router provides a straightforward and declarative way to handle routing in your React application, so you can define routes and render different components based on the current URL.

Here's a sample code snippet to set up the root route and an /about route, each rendering different content:

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);

TanStack Router

A new kid on the block is TanStack Router. It is feature rich and lightweight but has relatively smaller usage compared to React Router. If you come across a specific feature that is present only in TanStack Router, you might want to give this a try. Here’s a comparison table to help you make that decision.

Client state management

As your application grows, it helps to be more intentional about how your state is organized and how the data flows between your components. State management libraries make it easier to manage complex application state and keep your UI in sync with your data.

Redux Toolkit

A popular state management library for React is Redux Toolkit. Redux Toolkit is a set of tools and best practices for efficiently managing state. It provides a simplified API for defining and updating state, as well as built-in support for features such as immutable updates, serializable action types, and more.

Redux Toolkit also includes a number of additional features, such as a built-in Thunk middleware for handling asynchronous logic, and a DevTools extension for debugging your Redux state.

Here’s a code snippet of a redux slice which is a collection of redux logic and actions for a single feature in your app:

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Zustand

Zustand is another state management library for React that provides a clear and lightweight solution for managing state in your application. Zustand provides a built-in mechanism for subscribing to state changes, so you can easily keep your UI in sync with your data.

It is a great choice for developers who want a lightweight and easy-to-use state management solution without the overhead of a larger library like Redux.

Here is a code snippet for a simple increment counter using Zustand:

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, inc } = useStore()

  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

Redux Toolkit for a more fully-featured solution with a larger API and built-in support for additional features.

Zustand for a lightweight and simple solution that is easy to use and doesn't require as much boilerplate code.

Server state management

Server state management refers to the management of data that is stored on the server and is accessed remotely by the client application. This data can include user authentication details, database records, and other backend data. To manage server state in React applications, there are several libraries available.

TanStack Query

The most popular one is TanStack Query which provides an intuitive and powerful way to manage server state in React applications. It provides a caching layer that automatically manages the state of your data, fetching and updating it as needed.

The library also provides a number of built-in features, such as automatic re-fetching, polling, and pagination, making it easy to work with complex data sets.

Here’s a sample code snippet of querying an API and working with the returned response in a function component:

function GitHubStats() {
  const { isLoading, error, data, isFetching } = useQuery({
    queryKey: ["repoData"],
    queryFn: () =>
      axios
        .get("https://api.github.com/repos/gopinav/react-query-tutorials")
        .then((res) => res.data),
  });

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
      <div>{isFetching ? "Updating..." : ""}</div>
    </div>
  );
}

SWR

SWR is another popular library for managing server state in React applications. The name “SWR” comes from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. Compared to TanStack Query, SWR does have some feature limitations.

If you’re using Redux Toolkit for client state management, Redux Toolkit Query is a great choice for seamlessly managing server state.

Apollo Client is another popular library for managing server state in React applications. It is particularly well-suited for working with GraphQL APIs.

Apollo Client for GraphQL

Form handling

Handling forms can be a tedious and error-prone task, but there are now many excellent form-handling libraries available for React. Some of the most popular options include Formik and React Hook Form. These libraries make it easier to handle form validation, submission, and error handling.

Formik

While Formik provides an intuitive API for managing form state, validating inputs, and submitting data the library is not actively maintained.

React Hook Form

React Hook Form should be your go-to library for handling forms in 2023. It is lightweight, fast, and straightforward to use. React Hook Form utilizes the power of React hooks to manage form state and validation rules. It also provides a flexible API for building forms and allows you to easily integrate with other libraries such as Yup and Zod for validation.

Unlike Formik, React Hook Form does not require a lot of boilerplate code and can significantly reduce the amount of code needed to handle form data. Additionally, React Hook Form has excellent performance as the component does not re-render for every change in the field value.

Here’s a sample code snippet for a react hook form that accepts a user’s first and last names:

import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  return (
    /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* register your input into the hook by invoking the "register" function */}
      <input {...register("firstName")} />
      
      {/* include validation with required or other standard HTML validation rules */}
      <input {...register("lastName", { required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.lastName && <span>This field is required</span>}
      
      <button>Submit</button>
    </form>
  );
}

React Hook Form with Yup/Zod for performant, flexible and extensible forms with easy-to-use validation.

Testing

Testing is an essential part of building high-quality React applications. When it comes to testing React applications, two excellent options to consider are Vitest and React Testing Library for unit testing and Playwright or Cypress for end-to-end testing.

Vitest

Vitest is a blazing-fast unit test framework powered by Vite. In the context of testing React apps, it is a test runner that finds tests, runs the tests, determines whether the tests passed or failed, and reports it back in a human-readable manner.

React testing library

React testing library is a javascript testing utility that provides virtual DOM for testing React components. With the automated tests, there is no actual DOM to work with. React Testing Library provides a virtual DOM which we can use to interact with and verify the behavior of a react component.

Playwright and Cypress

Playwright and Cypress are libraries that provide a reliable and robust way to test your React application's functionality from end to end. You can write tests that simulate real-world user interactions with your application, including clicks, keyboard input, and form submissions. They also have excellent documentation and an active community.

Top picks Vitest + React Testing Library for Unit Testing the way your software is used

Playwright or Cypress for end to end testing

Styling

Styling is an essential aspect of building modern web applications. With so many styling libraries available for React, it can be overwhelming to choose the right one for your project. Here are some popular styling libraries that can help you create beautiful and responsive user interfaces.

Tailwind

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes for building UI components. With Tailwind CSS, you can quickly create complex layouts and custom styles without writing CSS from scratch. It has excellent documentation and an active community, making it a top choice for developers looking to create modern, responsive UIs.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Styled Components

Styled Components is a popular library for styling React components using CSS-in-JS. It allows you to write CSS directly in your JavaScript code, making it easy to create dynamic styles that are scoped to individual components. Styled Components also has excellent support for theming, allowing you quickly switch between different styles for your application.

import styled from 'styled-components';

const Button = styled.button`
  background-color: #3f51b5;
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #303f9f;
  }
`;

export default Button;

Emotion

Emotion is another CSS-in-JS library that provides a powerful API for styling React components. It is highly performant and allows you to define styles using a wide range of syntaxes, including CSS, Sass, and Less.

import { css } from '@emotion/react';

const buttonStyles = css`
  background-color: #3f51b5;
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: #303f9f;
  }
`;

const Button = () => (
  <button css={buttonStyles}>
    Button
  </button>
);

export default Button;

CSS Modules

CSS Modules is a popular approach to styling in React that allows you to write modular CSS code that is scoped to individual components. With CSS Modules, you can write CSS classes that are only applied to specific components, preventing naming collisions and ensuring that styles are properly encapsulated.

In the CSS Modules approach, you would need to create a separate CSS file — for example, Button.module.css — with the following content:

import styles from './Button.module.css';

const Button = () => (
  <button className={styles.button}>
    Button
  </button>
);

export default Button;
.button {
  background-color: #3f51b5;
  color: #fff;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #303f9f;
}

Vanilla Extract Started by Mark Dalgleish, co-creator of CSS Modules, Vanilla Extract is one of the latest CSS-in-JS libraries to gain traction. It offers a lightweight, zero-runtime solution for styling React components with full TypeScript support. It provides static CSS generation at build time, resulting in improved performance and reduced bundle size. If you prefer a TypeScript-first approach and value performance, Vanilla Extract can be a great choice for styling your React applications.

import { style } from '@vanilla-extract/css';

// Define styles
const buttonStyles = style({
  backgroundColor: '#3f51b5',
  color: '#fff',
  fontWeight: 'bold',
  padding: '8px 16px',
  borderRadius: '4px',
  cursor: 'pointer',
  ':hover': {
    backgroundColor: '#303f9f',
  },
});

const Button = () => (
  <button className={buttonStyles}>
    Button
  </button>
);

export default Button;

UI component libraries

UI component libraries can be a huge time-saver for React developers, and there are now many excellent options available. Some of the most popular options include:

Material UI
Mantine UI
Ant Design
Chakra UI

There are also Tailwind CSS frameworks such as:

ShadCN
Daisy UI
Headless UI

Animation

React Spring and Framer Motion Animation can be a powerful tool for creating engaging and interactive user interfaces, and there are many excellent animation libraries available for React. Some of the most popular options include React Spring and Framer Motion. These libraries make it easy to create smooth and responsive animations with minimal code.

Here’s a sample code snippet that uses Framer Motion. The core of Motion is the motion component. Think of it as a plain HTML or SVG element, supercharged with animation capabilities. Animating a motion component is as straightforward as setting values on the animate prop.

import { motion } from "framer-motion";

export default function App() {
  return (
    <motion.div
      className="box"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
    />
  );
}

Top picks Framer Motion provides well thought-out APIs for creating powerful animations.

Data Visualization

Data visualization is an important part of many React applications, especially those that rely on complex data sets. Some popular data visualization libraries for React include:

Victory
React Chartjs
Recharts.

These libraries minimize the learning curve of creating beautiful and interactive visualizations that can help users understand complex data.

Here's an example code snippet that uses Recharts to render a line chart:

import { LineChart, Line } from 'recharts';
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];

const renderLineChart = (
  <LineChart width={400} height={400} data={data}>
    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
  </LineChart>
);

Top picks Recharts is a great library for getting started with a plethora of possible visualizations.

Conclusion The React ecosystem continues to evolve and grow at a rapid pace in 2023, with many excellent tools and libraries available for building high-quality React applications. Whether you're just getting started with React or you're a seasoned React developer, there are many options available to help you stay productive and build great user experiences.

Build swiggy.com Full Stack Clone Application

hello@tkssharma.com — Fri, 07 Jul 2023 00:00:00 GMT

Build swiggy Full Stack Clone Application

Playlist https://www.youtube.com/watch?v=VJFm8XRn6AU&list=PLIGDNOJWiL1-r0EBC_jnlL5-gIiRIOuwv Github https://github.com/tkssharma/Swiggy-Clone-Full-Stack

Title: Build a Swiggy Clone App with React.js & Nest.js (Node.js) - Step-by-Step Tutorial

Description:

🍔 Welcome to our in-depth tutorial on creating a Swiggy clone app using the power of React.js and Nest.js (Node.js)! In this comprehensive guide, you'll learn how to build a feature-rich food delivery application from scratch. Whether you're a beginner or an experienced developer, this tutorial provides valuable insights and hands-on demonstrations.

🔧 What You'll Learn:

Backend with Nest.js: Start by setting up a robust backend using Nest.js, a powerful Node.js framework. Build RESTful APIs for user authentication, restaurant management, menus, and order processing.
Frontend with React.js: Dive into React.js for the frontend, designing and developing responsive web pages for customers, restaurants, and delivery drivers. Leverage the power of reusable components.
User Authentication: Implement secure user registration, login, and authentication for both customers and restaurant owners. Learn best practices for handling user data.
Real-Time Features: Add real-time order tracking and notifications using technologies like WebSockets or Socket.io, ensuring customers and drivers stay informed.
Geolocation Services: Incorporate geolocation services to track delivery drivers in real-time and determine restaurant availability for users.
Payment Integration: Enable online payments for customers using payment gateways like Stripe or PayPal, ensuring smooth and secure transactions.
Deployment: Learn how to deploy your Swiggy clone app to cloud hosting platforms like Heroku, AWS, or Vercel for global accessibility.
Testing and Debugging: Thoroughly test your application, handle errors gracefully, and debug issues that may arise during development.

🚀 Who Should Watch?:

This tutorial is suitable for:

Developers: Whether you're a beginner or an experienced coder, you'll find valuable content to enhance your skills.
Entrepreneurs: If you have a startup idea related to food delivery services, this tutorial can serve as the foundation for your project.
Tech Enthusiasts: Curious about how food delivery apps like Swiggy operate? Join us to explore the inner workings of a real-world application.

🎓 Prerequisites:

Basic knowledge of JavaScript is recommended, as both React.js and Nest.js use JavaScript (or TypeScript).
Familiarity with React.js and Node.js is helpful but not required. We'll cover the essential concepts along the way.
No prior experience with real-time technologies, geolocation services, or payment gateways is necessary; we'll provide clear explanations.

Building a Swiggy-like food delivery application using React and Nest.js is an ambitious project. Below, I'll provide a simplified outline of the key steps involved in creating such an app. Please note that this is a high-level overview, and building a fully functional application of this scale will require a deep dive into each step.

Prerequisites:

Node.js and npm: Ensure you have Node.js and npm installed on your computer.
Basic Web Development Knowledge: Familiarity with JavaScript, React, and basic backend concepts is essential.
React and Nest.js: Learn the fundamentals of React for the frontend and Nest.js for the backend.
Database: Choose a database system (e.g., PostgreSQL, MongoDB) for storing user data, restaurant information, menus, orders, and more.

Steps to Build a Swiggy-Like App:

Project Setup:

Start by creating a new React project and a Nest.js project:

# Create React app
npx create-react-app swiggy-clone

# Create Nest.js app
nest new swiggy-backend

Database Setup:

Configure your database connection in the Nest.js project. Depending on your choice, set up a database schema for users, restaurants, menus, and orders.
Authentication:

Implement user authentication using JWT (JSON Web Tokens) or other authentication mechanisms. Ensure users can sign up, log in, and manage their profiles.
Backend Development:

Create APIs for restaurant management, menu items, order placement, and order tracking. Use Nest.js controllers, services, and decorators for structured API development.
Frontend Development:

Design and build user interfaces for customers, restaurant owners, and delivery drivers using React. Implement features such as restaurant listings, menu browsing, order placement, and real-time order tracking.
Real-Time Features:

Integrate real-time features using technologies like WebSockets or libraries like Socket.io for order tracking, chat, and notifications.
Geolocation Services:

Incorporate geolocation services for tracking delivery drivers in real-time and determining restaurant availability for users.
Payment Integration:

Enable online payments for customers through payment gateways like Stripe, PayPal, or a similar service. Ensure secure and seamless transactions.
Testing and Debugging:

Thoroughly test your application, handle errors gracefully, and debug any issues that arise during development.
Deployment:

Deploy both the frontend (React app) and backend (Nest.js app) to cloud hosting platforms like Heroku, AWS, or Google Cloud. Configure environment variables for security and sensitive information.
Optimizations:

Optimize your application for performance, scalability, and security. Implement features like caching, rate limiting, and security measures to protect user data.
Documentation and Maintenance:

Create documentation for your application, including API documentation for developers who may want to use your platform. Continuously maintain and update your application to stay up-to-date with technology trends and security best practices.

Building a Swiggy-like app is a significant undertaking, and this simplified overview serves as a starting point. You'll need to delve deeper into each step, explore documentation, and possibly use additional libraries and technologies to create a polished and secure application.

📢 Stay Tuned:

Don't forget to subscribe and enable notifications for more web development tutorials, coding challenges, and tech-related content. We're here to support your coding journey!

Hungry for knowledge? Let's embark on the journey of building something amazing together! 🍕🚗💨

Playlist https://www.youtube.com/watch?v=VJFm8XRn6AU&list=PLIGDNOJWiL1-r0EBC_jnlL5-gIiRIOuwv Github https://github.com/tkssharma/Swiggy-Clone-Full-Stack

Build uber eats Full Stack Clone Application

hello@tkssharma.com — Thu, 06 Jul 2023 00:00:00 GMT

Build UberEats Full Stack Clone Application

🔗 Playlist https://www.youtube.com/watch?v=t1JsK9rMYI8&list=PLIGDNOJWiL1-Smf4ABmuvcOrV7E4mCqN3

GitHub Link 🔗 https://github.com/tkssharma/uber-eats-clone-app

Welcome to Uber eats clone App development Let's build Ubereats Clone App Tools and technologies we are going to use

Architecture discussion
different type of architecture
Designing different microservices
Defining Deployment stack for application and services
Application setup with monorepo solutions
Lerna/Nx for monorepo
AWS CDK for deploying application
github action for CI/CD
exploring sveltekit for dashboard app
exploring Next JS 13 for UI apps
React JS with latest features from end user application
Nest JS Microservices for API development
next js for end user application
svelte kit for managing SSR using SvelteKit
React and next js
Nests with Node JS
SQS and Kafka
Twillio and sendGrid
Microservices and service communication
Express with Node JS and typescript
Prisma and TypeORM for services
Docker and containerization
Mysql and Postgres with MongoDB

Title: Building UberEats Full Stack Clone Application with Nest.js and Next.js - Step-by-Step Tutorial

Description:

🍔 Welcome to an exciting tutorial where we'll guide you through building a full-stack UberEats clone using the powerful combination of Nest.js and Next.js. Whether you're a seasoned developer or just starting your coding journey, this tutorial offers valuable insights and hands-on experience.

🔧 What You'll Learn:

Backend with Nest.js: Begin by setting up the robust backend with Nest.js. Explore the world of TypeScript and build RESTful APIs for user authentication, restaurant management, menu items, and orders.
Frontend with Next.js: Dive into Next.js for the frontend. Create responsive and dynamic web pages for customers, restaurant owners, and delivery drivers. Learn about server-side rendering (SSR) for enhanced performance.
User Authentication: Implement secure user registration, login, and authentication for customers and restaurant owners. Learn best practices for token-based authentication.
Real-Time Features: Add real-time order tracking and notifications using WebSockets and Nest.js. Keep customers and delivery drivers updated on their orders.
Geolocation Services: Utilize geolocation services to track delivery drivers in real-time and determine restaurant availability.
Payment Integration: Enable online payments for customers through payment gateways like Stripe. Ensure secure and seamless transactions.
Deployment: Learn how to deploy your UberEats clone to cloud hosting platforms like Heroku or AWS for global accessibility.
Testing and Debugging: Thoroughly test your application, handle errors gracefully, and debug any issues that may arise during development.

🚀 Who Should Watch?:

This tutorial is suitable for:

Developers: Whether you're new to coding or a seasoned developer, you'll gain valuable skills and knowledge.
Entrepreneurs: If you're planning a startup in the food delivery industry, this tutorial can serve as the foundation for your project.
Tech Enthusiasts: Curious about the inner workings of food delivery apps like UberEats? Join us on this journey of exploration.

🎓 Prerequisites:

Basic knowledge of JavaScript and React is recommended.
Familiarity with TypeScript, Nest.js, and Next.js is beneficial but not required. We'll cover the essentials.
No prior experience with real-time technologies or payment gateways is necessary; we'll provide clear explanations.

📚 Resources:

Download the complete source code and access additional resources on our GitHub repository (link in the video description).

Creating a full-stack UberEats clone application using Nest.js is an ambitious project. Below, I'll provide a simplified overview of the key steps involved. Please keep in mind that building such an application requires a deep understanding of both backend and frontend development, as well as the Nest.js framework.

Prerequisites:

Node.js and npm: Ensure you have Node.js and npm installed on your computer.
Basic Web Development Knowledge: Familiarity with JavaScript, TypeScript, and basic frontend technologies (HTML, CSS, and JavaScript) is crucial.
Nest.js: Learn the fundamentals of the Nest.js framework for building scalable and maintainable backend applications.
Database: Choose a database system (e.g., PostgreSQL, MongoDB) for storing user data, restaurant information, menus, and orders.

Steps to Build UberEats Full Stack Clone Application using Nest.js:

Set Up Your Project:

Start by creating a new Nest.js project:

npm install -g @nestjs/cli
nest new uber-eats-clone
cd uber-eats-clone

Database Configuration:

Configure your database connection in the src/database/database.module.ts file. You can use an ORM like TypeORM or Prisma to manage your database.
Define Data Models:

Create data models for users, restaurants, menu items, orders, etc., using decorators provided by Nest.js and your chosen ORM. Define the relationships between these models.
Authentication:

Implement user authentication using JWT (JSON Web Tokens) or other authentication mechanisms. Ensure that users can sign up, log in, and manage their profiles.
API Endpoints:

Create RESTful API endpoints for various actions, such as browsing restaurants, viewing menus, placing orders, and tracking order status. Use Nest.js controllers and services for structured API development.
Frontend Development:

For the frontend, consider using a JavaScript framework like React.js or Angular. Set up your frontend project and connect it to the backend API.
User Interfaces:

Design and build user interfaces for customers, restaurant owners, and delivery drivers. Implement features like restaurant listings, menu browsing, order placement, and real-time order tracking.
Real-Time Features:

Integrate real-time features using technologies like WebSockets or libraries like Socket.io for order tracking, chat, and notifications.
Payment Integration:

Implement payment processing using payment gateways like Stripe or PayPal to handle customer payments securely.
Testing and Debugging:

Thoroughly test your application, handle errors gracefully, and debug any issues that arise during development.
Deployment:

Deploy your application to a hosting platform like Heroku, AWS, or Google Cloud. Configure environment variables for security and sensitive information.
Optimizations:

Optimize your application for performance, scalability, and security. Implement features like caching, rate limiting, and security measures to protect user data.
Documentation and Maintenance:

Create documentation for your application, including API documentation for developers who may want to use your platform. Continuously maintain and update your application to ensure it stays up-to-date with technology trends and security best practices.

Building a full-stack UberEats clone is a substantial project that requires careful planning, design, and development. This simplified overview provides a starting point, but you'll need to dive deeper into each step and possibly use additional libraries and technologies to create a polished and secure application.

📢 Stay Tuned:

Subscribe and enable notifications for more web development tutorials, coding challenges, and tech-related content. We're here to support your coding journey!

Hungry for knowledge? Let's get started and build something amazing together! 🍕🚗💨

🔗 Playlist https://www.youtube.com/watch?v=t1JsK9rMYI8&list=PLIGDNOJWiL1-Smf4ABmuvcOrV7E4mCqN3

GitHub Link 🔗 https://github.com/tkssharma/uber-eats-clone-app

Build Booking.com Full Stack Clone Application

hello@tkssharma.com — Wed, 05 Jul 2023 00:00:00 GMT

Build Booking.com Full Stack Clone Application

https://www.youtube.com/watch?v=U4pE4y8xbmc&list=PLT5Jhb7lgSBNujQ5kM4gr6mgTHkCL-EM3&index=1&t=0s

Title: Building a Booking.com Fullstack Clone Application - Step-by-Step Tutorial

Description:

🏨 Welcome to our in-depth tutorial where we'll guide you through the process of building a complete Booking.com clone application from start to finish! Whether you're an aspiring developer or a seasoned coder, this comprehensive guide is packed with valuable insights and hands-on demonstrations.

🔧 What You'll Learn:

Frontend Development: We'll start by setting up the frontend using modern web technologies like React.js. You'll learn how to design and create responsive web pages for hotel listings, user profiles, and booking management.
Backend Development: Dive into backend development using Node.js and Express.js. We'll build RESTful APIs to handle user authentication, hotel bookings, reviews, and more.
User Authentication: Implement secure user registration and login features, allowing users to manage their profiles and bookings.
Hotel Listings and Search: Create a powerful hotel listing and search functionality, enabling users to search and filter hotels based on their preferences.
Booking Management: Implement booking features, allowing users to select rooms, make reservations, and manage their bookings.
Review System: Develop a review system that lets users rate and review hotels, contributing to the overall user experience.
Payment Integration: Enable secure online payments for hotel bookings using popular payment gateways such as Stripe.
Deployment: Learn how to deploy your Booking.com clone to a cloud hosting platform for global accessibility.
Testing and Debugging: Thoroughly test your application, handle errors gracefully, and debug any issues that may arise during development.

🚀 Who Should Watch?:

This tutorial is suitable for:

Developers: Whether you're new to coding or an experienced developer, you'll find valuable content to enhance your skills.
Entrepreneurs: If you have a startup idea related to the travel and hospitality industry, this tutorial can serve as a foundation for your project.
Tech Enthusiasts: Curious about how popular travel booking platforms like Booking.com work? Join us to explore the inner workings of a real-world application.

🎓 Prerequisites:

Basic knowledge of JavaScript and React is recommended.
Familiarity with Node.js and Express.js for the backend is helpful.
No prior experience with payment gateways or hotel booking systems is necessary; we'll provide clear explanations.

Building a platform similar to Booking.com using Next.js and Prisma is a complex and ambitious project. Below, I'll provide a simplified overview of the key steps involved in creating such a platform.

Prerequisites:

Node.js and npm: Ensure you have Node.js and npm installed on your computer.
Web Development Knowledge: A strong understanding of JavaScript, React, and basic backend development concepts is essential.
React, Next.js, Prisma, and a Database: Familiarize yourself with React for the frontend, Next.js for server-rendered React applications, Prisma as an ORM (Object-Relational Mapping) tool, and choose a database system (e.g., PostgreSQL, MySQL) for storing data.

Steps to Build a Booking.com-Like Platform:

Project Setup:

Start by creating a new Next.js project and a Prisma project:

# Create Next.js app
npx create-next-app booking-clone

# Create Prisma project
npx prisma init

Database Design:

Define the database schema for storing hotel listings, user data, bookings, reviews, and other relevant information. Use Prisma's schema definition language for this purpose.
Backend Development:

Develop the backend using Next.js and Prisma. Create RESTful APIs to manage user authentication, hotel listings, bookings, reviews, and search functionality.
Frontend Development:

Design and build the user interfaces for hotel listings, user profiles, search pages, and booking forms using React and Next.js. Ensure responsiveness and an intuitive user experience.
User Authentication:

Implement user authentication and authorization using technologies like JWT (JSON Web Tokens). Allow users to sign up, log in, and manage their profiles.
Hotel Listings:

Create a system for users to list hotels, including features like image uploads, descriptions, pricing, and availability calendars.
Booking Management:

Implement booking features, allowing users to search for hotels, view availability, and make reservations. Manage booking data and ensure real-time updates.
Review System:

Develop a review system that enables users to rate and review hotels. Implement validation and moderation to maintain review quality.
Payment Integration:

Enable secure online payments for hotel bookings using payment gateways like Stripe or a similar service.
Search and Recommendations:

Implement a robust hotel search functionality with filters, sorting options, and personalized recommendations to enhance the user experience.
Testing and Debugging:

Thoroughly test your application, handle errors gracefully, and debug any issues that may arise during development. Ensure the security of user data and payment information.
Deployment:

Deploy both the frontend (Next.js app) and backend (Next.js + Prisma app) to cloud hosting platforms like Vercel, Heroku, AWS, or Google Cloud. Configure environment variables for security and sensitive information.
Optimizations:

Optimize your application for performance, scalability, and security. Implement features like caching, rate limiting, and security measures to protect user data and ensure a smooth user experience.
Documentation and Maintenance:

Create comprehensive documentation for your application, including API documentation for developers. Continuously maintain and update your application to stay current with technology trends and security best practices.

Building a platform like Booking.com is a substantial and challenging project. This simplified overview serves as a starting point, and you'll need to delve deeper into each step, explore documentation, and possibly use additional libraries and technologies to create a polished and secure application.

📢 Stay Tuned:

Don't forget to subscribe and enable notifications for more web development tutorials, coding challenges, and tech-related content. We're here to support your coding journey!

Ready to embark on the journey of building your own Booking.com clone? Let's get started and create something amazing together! 🏨✈️🌍

Build Airbnb Full Stack Clone Application

hello@tkssharma.com — Tue, 04 Jul 2023 00:00:00 GMT

Build Airbnb Full Stack Clone Application

github https://www.youtube.com/watch?v=n0HR2c3HNWc&list=PLIGDNOJWiL1-j3FlkaBO5VjJWA3T5io6g

Playlist https://www.youtube.com/watch?v=n0HR2c3HNWc&list=PLIGDNOJWiL1-j3FlkaBO5VjJWA3T5io6g

Title: Airbnb Clone Tutorial - Next.js 13.x and Prisma

Description:

🏡 Welcome to our comprehensive Airbnb Clone tutorial! In this step-by-step guide, you'll learn how to build a feature-rich vacation rental platform using Next.js 13.x and Prisma. Whether you're a beginner or an experienced developer, you'll find valuable insights and practical tips in this tutorial.

🔨 What You'll Learn:

Next.js Fundamentals: We'll start by setting up a Next.js project and understanding the basics.
Prisma Database Integration: Learn how to connect your app to a PostgreSQL database using Prisma for efficient data management.
Data Modeling: Create robust data models for user profiles and property listings.
User Authentication: Implement user registration, login, and authentication with NextAuth.js.
CRUD Operations: Build APIs for Creating, Reading, Updating, and Deleting property listings.
Frontend Development: Design and develop the user interface with React components and CSS.
Server-Side Rendering (SSR): Optimize your app's performance with SSR techniques.
Deployment: Deploy your Airbnb Clone to a hosting platform and make it accessible to users worldwide.

🚀 Who Should Watch?:

This tutorial is suitable for:

Developers: Whether you're new to web development or looking to enhance your skills, this tutorial will guide you through the entire development process.
Entrepreneurs: If you have a startup idea related to vacation rentals, this tutorial can serve as the foundation for your project.
Tech Enthusiasts: Curious about how platforms like Airbnb work? Dive into this tutorial to understand the inner workings of a real-world application.

🎓 Prerequisites:

Basic knowledge of JavaScript and React will be helpful.
Familiarity with Next.js and Prisma is a plus but not required.

Creating an Airbnb clone using Next.js 13.x and Prisma is a complex project, but I'll provide you with a simplified outline of the key steps to get started. Please note that this is a high-level overview, and you'll need to dive deeper into each step to build a fully functional application.

Prerequisites:

Node.js and npm: Ensure you have Node.js and npm installed on your computer.
Basic Web Development Knowledge: Familiarity with JavaScript, React, and CSS is essential.
Next.js and Prisma: Get acquainted with Next.js for React-based frontend development and Prisma for database management.
Database: Choose a database system (e.g., PostgreSQL) for storing listing and user data.

Steps to Build Airbnb Clone:

Set Up Your Project:

Start by creating a new Next.js project:
```
npx create-next-app airbnb-clone
cd airbnb-clone
```
Install necessary dependencies:
```
npm install prisma @prisma/client
```
Database Configuration:

Configure your database connection in the schema.prisma file. For example, if you're using PostgreSQL:
```
// schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
```
Create your database schema using Prisma Migrate:
```
npx prisma migrate dev
```

Define Data Models:

In schema.prisma, define your data models for listings and users:

model User {
  id       Int      @id @default(autoincrement())
  email    String   @unique
  name     String?
  // Add more user fields as needed
  listings Listing[]
}

model Listing {
  id        Int       @id @default(autoincrement())
  title     String
  location  String
  price     Float
  // Add more listing fields as needed
  host      User      @relation(fields: [hostId], references: [id])
  hostId    Int
}

API Routes:

Create API routes in the pages/api directory to handle CRUD operations for listings and users.
Frontend Development:

Design and build the frontend of your Airbnb clone using React components, CSS, and Next.js features. Use Prisma Client to fetch and display data from your database.
User Authentication:

Implement user authentication using a library like NextAuth.js or Auth0 to allow users to sign up, log in, and access their personalized listings and profiles.
Deployment:

Choose a hosting platform (e.g., Vercel, Netlify) and deploy your Next.js application. Configure environment variables for database connection and other sensitive information.
Testing and Debugging:

Thoroughly test your application, handle errors gracefully, and debug any issues that arise during development.
Optimizations:

Implement optimizations like server-side rendering (SSR), client-side caching, and lazy loading to improve the performance of your application.
Launch and Maintenance:

Once everything is working as expected, launch your Airbnb clone to the public. Continuously monitor and maintain your application to ensure it runs smoothly and stays up-to-date with the latest technologies.

Remember that building a full Airbnb clone is a substantial project, and this outline serves as a starting point. You'll need to delve deeper into each step, explore documentation, and possibly use additional libraries and tools to create a polished and secure application.

github https://www.youtube.com/watch?v=n0HR2c3HNWc&list=PLIGDNOJWiL1-j3FlkaBO5VjJWA3T5io6g

Playlist https://www.youtube.com/watch?v=n0HR2c3HNWc&list=PLIGDNOJWiL1-j3FlkaBO5VjJWA3T5io6g

📢 Stay Tuned:

Don't forget to subscribe and turn on notifications for more web development tutorials, coding challenges, and tech-related content. We're here to help you on your coding journey!

Ready to get started on your Airbnb Clone project? Let's dive in and build something amazing together! 🏠💻🚀

How to Build and Deploy S3 bucket with Cloudfront

hello@tkssharma.com — Mon, 03 Jul 2023 00:00:00 GMT

Build and Deploy S3 bucket with Cloudfront

In this Blog we will cover all these Topics

Writing the Infrastructure for TypeScript Lambdas in AWS CDK
Writing the Code for creating S3 bucket
Deploying S3 stack with Cloudfront
S3 Bucket should be accessible by cloudfront as S3 bucket has Private access

Lets build S3 bucket

The AWS CDK (Cloud Development Kit) is a framework for defining cloud infrastructure as code using programming languages like TypeScript, Python, Java, and others. If you want to create an S3 bucket using AWS CDK, you can follow these steps in TypeScript as an example:

Lets prepare our Application and Stack

#!/usr/bin/env node
import 'source-map-support/register';
import * as cdk from 'aws-cdk-lib';
import { CdkStarterStack } from '../lib/lambda-app-stack';

const app = new cdk.App();
new CdkStarterStack(app, 'apiLambdaStack', {
  /* If you don't specify 'env', this stack will be environment-agnostic.
   * Account/Region-dependent features and context lookups will not work,
   * but a single synthesized template can be deployed anywhere. */

  /* Uncomment the next line to specialize this stack for the AWS Account
   * and Region that are implied by the current CLI configuration. */
  env: {
    account: process.env.CDK_DEFAULT_ACCOUNT,
    region: process.env.CDK_DEFAULT_REGION,
  },
  stage: process.env.STAGE!,

  /* Uncomment the next line if you know exactly what Account and Region you
   * want to deploy the stack to. */
  // env: { account: '123456789012', region: 'us-east-1' },

  /* For more information, see https://docs.aws.amazon.com/cdk/latest/guide/environments.html */
});

import * as iam from 'aws-cdk-lib/aws-iam';
import * as lambda from 'aws-cdk-lib/aws-lambda';
import * as cdk from 'aws-cdk-lib';
import * as path from 'path';

export class CdkStarterStack extends cdk.Stack {
  constructor(scope: cdk.App, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    const staticBucket = new cdk.aws_s3.Bucket(
      this,
      `store-bucket-${stage}`,
      {
        bucketName: `store-${stage}`,
        accessControl: cdk.aws_s3.BucketAccessControl.PRIVATE,
        blockPublicAccess: cdk.aws_s3.BlockPublicAccess.BLOCK_ALL,
        publicReadAccess: false,
        removalPolicy: cdk.RemovalPolicy.DESTROY,
      }
    );

  }
}

If you want to create an AWS CloudFront distribution with an associated S3 bucket and an Origin Access Identity (OAI) using AWS CDK (Cloud Development Kit), you can follow these steps in TypeScript as an example:

An AWS CloudFront Origin Access Identity (OAI) is a security feature that helps control access to your Amazon S3 bucket content when you use CloudFront as a content delivery network (CDN). In simpler terms, it's a way to restrict who can access the files in your S3 bucket through CloudFront.

Here's how it works:

S3 Bucket: When you configure CloudFront to serve content from an S3 bucket, the default behavior is that the S3 bucket and its objects are private by default, meaning they can't be accessed directly over the internet.
CloudFront Distribution: CloudFront acts as a caching layer in front of your S3 bucket, improving content delivery speed and reducing the load on your S3 bucket.
Origin Access Identity (OAI): To allow CloudFront to access and serve content from your private S3 bucket, you can create an Origin Access Identity. This OAI represents CloudFront and allows it to make authenticated requests to your S3 bucket on your behalf.
Restricting Access: Once you've created the OAI, you can configure your S3 bucket's permissions so that it only allows requests from the CloudFront distribution with the associated OAI. This effectively restricts direct access to your S3 content and ensures that requests must go through CloudFront.

The benefits of using CloudFront with an OAI include:

Enhanced Security: You can keep your S3 bucket private, reducing the risk of unauthorized access to your data.
Better Performance: CloudFront caches content closer to your users, reducing latency and improving content delivery speed.
Cost Savings: By reducing the load on your S3 bucket, you can save on data transfer and request costs.

In summary, an AWS CloudFront Origin Access Identity is a security mechanism that allows you to control and restrict access to your private S3 bucket content, ensuring that all requests go through CloudFront, which can improve security, performance, and cost-efficiency for your content delivery.

    // Cloudfront OAI - S3 bucket policy
    const cloudfrontOAI = new cdk.aws_cloudfront.OriginAccessIdentity(
      this,
      `storeOAI${stage}`,
      {
        comment: `Cloudfront distribution`,
      }
    );
    staticBucket.grantRead(cloudfrontOAI);

Add bucket deployment


    // Cloudfront
    const distribution = new cdk.aws_cloudfront.Distribution(
      this,
      `store-cf-distribution-${stage}`,
      {
        priceClass: cdk.aws_cloudfront.PriceClass.PRICE_CLASS_100,
        defaultRootObject: 'index.html',
        defaultBehavior: {
          origin: new cdk.aws_cloudfront_origins.S3Origin(staticBucket, {
            originAccessIdentity: cloudfrontOAI,
          }),
        },
        comment: `Cloudfront distribution`,
      }
    );

    // S3 deployment
    new cdk.aws_s3_deployment.BucketDeployment(
      this,
      `store-bucket-deployment-${stage}`,
      {
        destinationBucket: staticBucket,
        sources: [cdk.aws_s3_deployment.Source.asset(contentPath)],
        cacheControl: [
          cdk.aws_s3_deployment.CacheControl.maxAge(cdk.Duration.days(365)),
        ],
        distribution,
      }
    );

we have S3 bucket created with BucketAccessControl Private that means we need cloudfront to expose S3 bucket static web hosting, and S3 bucket can be accessible by cloudfront only.

Deploy Typescript Lambda to AWS

cdk synth
cdk bootstrap
cdk deploy
cdk destroy

When we synthesize our CloudFormation stack, it gets generated in the cdk.out directory. This is also where the asset files for our Lambda functions are stored. Let's run the synth command to generate the lambda assets:

npx aws-cdk synth

If we now take a look at the assets folder in the cdk.out directory, we can see that our Lambda function's code has been compiled down to JavaScript.

Now

npx aws-cdk deploy

Optimize Typescript Lambda function

The NodejsFunction construct uses esbuild under the hood to automatically transpile and bundle our code.

We can use the construct to write JavaScript or TypeScript and everything just works automatically. There are no Webpack configuration files we have to manage.

const myFunction = new NodejsFunction(this, 'my-function', {
  // ...rest
  bundling: {
    minify: true,
    externalModules: ['aws-sdk'],
  },
});

minify is a boolean that allows us to specify whether we want to minify the code of our Lambda function. This enables us to decrease bundle size and improve performance for larger functions.
externalModules is a string array that allows us to specify which modules should NOT be bundled with our Lambda code. This enables us to exclude modules that are already available in the Lambda runtime - for instance aws-sdk and layers.

Cleanup

To delete the stack from your account, run the destroy command:

npx aws-cdk destroy

Nest JS with Mongo DB Managing Relationships Part-4

hello@tkssharma.com — Mon, 05 Jun 2023 00:00:00 GMT

Nest JS with Mongo DB Managing Relationships Part-4

Blog	Name	Link
Part-1	Nest JS Building REST APIs using Mongo DB Part-1	https://tkssharma.com/building-rest-apis-with-nestjs-and-mongodb-part-1
Part-2	Nest JS APIs with mongoose Mongo DB Database Part-2	https://tkssharma.com/building-rest-apis-with-nestjs-and-mongodb-part-2
Part-3	Nest JS Building Auth Service with JWT Tokens Part-3	https://tkssharma.com/building-nestjs-auth-service-with-mongodb-part-3

In this post, I will demonstrate how to kickstart a simple RESTful APIs with NestJS from a newbie's viewpoint.

Github Link https://github.com/tkssharma/blogs/tree/master/nestjs-rest-apis-docs

What is NestJS?

As described in the Nestjs website, Nestjs is a progressive Node.js framework for building efficient, reliable and scalable server-side applications.

Nestjs combines the best programming practice and the cutting-edge techniques from the NodeJS communities.

A lot of NestJS concepts are heavily inspired by the effort of the popular frameworks in the world, esp. Angular .
Nestjs hides the complexities of web programming in NodeJS, it provides a common abstraction of the web request handling, you are free to choose Expressjs or Fastify as the background engine.
Nestjs provides a lot of third party project integrations, from database operations, such as Mongoose, TypeORM, etc. to Message Brokers, such as Redis, RabbitMQ, etc.

If you are new to Nestjs like me but has some experience of Angular , TypeDI or Spring WebMVC, bootstraping a Nestjs project is really a piece of cake.

Generating a NestJS project

Make sure you have installed the latest Nodejs.

npm i -g @nestjs/cli

When it is finished, there is a nest command available in the Path. The usage of nest is similar with ng (Angular CLI), type nest --help in the terminal to list help for all commands.

❯ nest --help
Usage: nest <command> [options]

Options:
  -v, --version                                   Output the current version.
  -h, --help                                      Output usage information.

Commands:
  new|n [options] [name]                          Generate Nest application.
  build [options] [app]                           Build Nest application.
  start [options] [app]                           Run Nest application.
  info|i                                          Display Nest project details.
  update|u [options]                              Update Nest dependencies.
  add [options] <library>                         Adds support for an external library to your project.
  generate|g [options] <schematic> [name] [path]  Generate a Nest element.
    Available schematics:
      ┌───────────────┬─────────────┐
      │ name          │ alias       │
      │ application   │ application │
      │ class         │ cl          │
      │ configuration │ config      │
      │ controller    │ co          │
      │ decorator     │ d           │
      │ filter        │ f           │
      │ gateway       │ ga          │
      │ guard         │ gu          │
      │ interceptor   │ in          │
      │ interface     │ interface   │
      │ middleware    │ mi          │
      │ module        │ mo          │
      │ pipe          │ pi          │
      │ provider      │ pr          │
      │ resolver      │ r           │
      │ service       │ s           │
      │ library       │ lib         │
      │ sub-app       │ app         │
      └───────────────┴─────────────┘

Now generate a Nestjs project via:

nest new nestjs-sample

Open it in your favorite IDEs, such as Intellij WebStorm or VSCode.

Exploring the project files

Expand the project root, you will see the following like tree nodes.

.
├── LICENSE
├── nest-cli.json
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── app.controller.spec.ts
│   ├── app.controller.ts
│   ├── app.module.ts
│   ├── app.service.ts
│   └── main.ts
├── test
│   ├── app.e2e-spec.ts
│   └── jest-e2e.json
├── tsconfig.build.json
└── tsconfig.json

The default structure of this project is very similar with the one generated by Angular CLI.

src/main.ts is the entry file of this application.
src/app* is the top level component in a nest application.
- There is an app.module.ts is a Nestjs Module which is similar with Angular NgModule, and used to organize codes in the logic view.
- The app.service.ts is an @Injectable component, similar with the service in Angular or Spring's Service, it is used for handling business logic. A service is annotated with @Injectable.
- The app.controller.ts is the controller of MVC, to handle incoming request, and responds the handled result back to client. The annotatoin @Controller() is similar with Spring MVC's @Controller.
- The app.controller.spec.ts is test file for app.controller.ts. Nestjs uses Jest as testing framework.
test folder is for storing e2e test files.

Dealing with model relations

We have added authentication in our application in the last post, you maybe have a question, can I add some fields to Post document and remember the user who created it and the one who updated it at the last time.

When I come to the Post model, and try to add fields to setup the auditors, I can not find a simple way to do this. After researching and consulting from the Nestjs channel in Discord, I was told that the @nestjs/mongoose can not deal with the relations between Documents.

There are some suggestions I got from the community.

Use Typegoose instead of @nestjs/mongoose, check the typegoose doc for more details. More effectively, there is a nestjs-typegoose to assist you to bridge typegoose to the Nestjs world.
Give up @nestjs/mongoose and turn back to use the raw mongoose APIs instead.

I have some experience of express and mongoose written in legacy ES5, so in this post I will try to switch to use the pure Mongoose API to replace the modeling codes we have done in the previous post. With the help of @types/mongoose, it is easy to apply static types on the mongoose schemas , documents and models.

Redefining the models with Mongoose API

We will follow the following steps to clean the codes of models one by one .

Clean the document definition interface.
Redefine the schema for related documents using Mongoose APIs.
Define mongoose Models and provide them in the Nestjs IOC engine.
Create a custom provider for connecting to Mongo using Mongoose APIs.
Remove the @nestjs/mongoose dependency finally.

Firstly let's have a look at Post, in the post.model.ts, fill the following content:

import { Document, Schema, SchemaTypes } from 'mongoose';
import { User } from './user.model';

export interface Post extends Document {
  readonly title: string;
  readonly content: string;
  readonly createdBy?: Partial<User>;
  readonly updatedBy?: Partial<User>;
}

export const PostSchema = new Schema(
  {
    title: SchemaTypes.String,
    content: SchemaTypes.String,
    createdBy: { type: SchemaTypes.ObjectId, ref: 'User', required: false },
    updatedBy: { type: SchemaTypes.ObjectId, ref: 'User', required: false },
  },
  { timestamps: true },
);

The PostSchema is defined by type-safe way, all supports can be found in SchemeTypes while navigating it. The createdBy and updatedBy is a reference of User document. The { timestamps: true } will append createdAt and updatedAt to the document and fill these two fields the current timestamp automatically when saving and updating the documents.

Create a database.providers.ts file to declare the Post model. We also create a provider for Mongo connection.

import { PostSchema, Post } from './post.model';
import {
  DATABASE_CONNECTION,
  POST_MODEL
} from './database.constants';

export const databaseProviders = [
  {
    provide: DATABASE_CONNECTION,
    useFactory: (): Promise<typeof mongoose> =>
      connect('mongodb://localhost/blog', {
        useNewUrlParser: true,
        useUnifiedTopology: true,
      }),
  },
  {
    provide: POST_MODEL,
    useFactory: (connection: Connection) =>
      connection.model<Post>('Post', PostSchema, 'posts'),
    inject: [DATABASE_CONNECTION],
  },
//...
];

More info about creating custom providers, check the custom providers chapter of the official docs.

For the convenience of using the injection token, create a database.constant.ts file to define series of constants for further uses.

export const DATABASE_CONNECTION = 'DATABASE_CONNECTION';
export const POST_MODEL = 'POST_MODEL';
export const USER_MODEL = 'USER_MODEL';
export const COMMENT_MODEL = 'COMMENT_MODEL';

Create a database.module.ts file, and define a Module to collect the Mongoose related resources.

@Module({
  providers: [...databaseProviders],
  exports: [...databaseProviders],
})
export class DatabaseModule {}

To better organize the codes, move all model related codes into the database folder.

Import DatabaseModule in the AppModule.

@Module({
  imports: [
    DatabaseModule,
//...
})
export class AppModule {}

Now in the post.service.ts, change the injecting Model<Post> to the following.

 constructor(
    @Inject(POST_MODEL) private postModel: Model<Post>,
    //...
    ){...}

In the test, change the injection token from class name to the constant value we defined, eg.

module.get<Model<Post>>(POST_MODEL)

Similarly, update the user.model.ts and related codes.

//database/user.model.ts
export interface User extends Document {
  readonly username: string;
  readonly email: string;
  readonly password: string;
  readonly firstName?: string;
  readonly lastName?: string;
  readonly roles?: RoleType[];
}

const UserSchema = new Schema(
  {
    username: SchemaTypes.String,
    password: SchemaTypes.String,
    email: SchemaTypes.String,
    firstName: { type: SchemaTypes.String, required: false },
    lastName: { type: SchemaTypes.String, required: false },
    roles: [
      { type: SchemaTypes.String, enum: ['ADMIN', 'USER'], required: false },
    ],
    //   createdAt: { type: SchemaTypes.Date, required: false },
    //   updatedAt: { type: SchemaTypes.Date, required: false },
  },
  { timestamps: true },
);

UserSchema.virtual('name').get(function() {
  return `${this.firstName} ${this.lastName}`;
});

export const userModelFn = (conn: Connection) =>
  conn.model<User>('User', UserSchema, 'users');


//database/role-type.enum.ts
export enum RoleType {
  ADMIN = 'ADMIN',
  USER = 'USER',
}

//database/database.providers.ts
export const databaseProviders = [
    //...
  {
    provide: USER_MODEL,
    useFactory: (connection: Connection) => userModelFn(connection),
    inject: [DATABASE_CONNECTION],
  },
];

//user/user.service.ts
@Injectable()
export class UserService {
  constructor(@Inject(USER_MODEL) private userModel: Model<User>) {}
  //...	
}

Create another model Comment, as sub document of Post. A comment holds a reference of Post doc.

export interface Comment extends Document {
  readonly content: string;
  readonly post?: Partial<Post>;
  readonly createdBy?: Partial<User>;
  readonly updatedBy?: Partial<User>;
}

export const CommentSchema = new Schema(
  {
    content: SchemaTypes.String,
    post: { type: SchemaTypes.ObjectId, ref: 'Post', required: false },
    createdBy: { type: SchemaTypes.ObjectId, ref: 'User', required: false },
    updatedBy: { type: SchemaTypes.ObjectId, ref: 'User', required: false },
  },
  { timestamps: true },
);

export const databaseProviders = [
  //...
  {
    provide: COMMENT_MODEL,
    useFactory: (connection: Connection) =>
      connection.model<Post>('Comment', CommentSchema, 'comments'),
    inject: [DATABASE_CONNECTION],
  },
 ]

Update the PostService , add two methods.

//post/post.service.ts
export class PostService {
  constructor(
    @Inject(POST_MODEL) private postModel: Model<Post>,
    @Inject(COMMENT_MODEL) private commentModel: Model<Comment>
  ) {}
    //...
    //  actions for comments
  createCommentFor(id: string, data: CreateCommentDto): Observable<Comment> {
    const createdComment = this.commentModel.create({
      post: { _id: id },
      ...data,
      createdBy: { _id: this.req.user._id },
    });
    return from(createdComment);
  }

  commentsOf(id: string): Observable<Comment[]> {
    const comments = this.commentModel
      .find({
        post: { _id: id },
      })
      .select('-post')
      .exec();
    return from(comments);
  }
}

The CreateCommentDto is a POJO to collect the data from request body.

//post/create-comment.dto.ts
export class CreateCommentDto {
  readonly content: string;
}

Open PostController, add two methods.

export class PostController {
  constructor(private postService: PostService) {}

  //...
  @Post(':id/comments')
  createCommentForPost(
    @Param('id') id: string,
    @Body() data: CreateCommentDto,
  ): Observable<Comment> {
    return this.postService.createCommentFor(id, data);
  }

  @Get(':id/comments')
  getAllCommentsOfPost(@Param('id') id: string): Observable<Comment[]> {
    return this.postService.commentsOf(id);
  }
}

In the last post, we created authentication, to protect the saving and updating operations, you can set JwtGuard on the methods of the controllers.

But if we want to control the access in details, we need to consider Authorization, most of time, it is simple to implement it by introducing RBAC.

Role based access control

Assume there are two roles defined in this application, USER and ADMIN. In fact, we have already defined an enum class to archive this purpose.

Nestjs provide a simple way to set metadata by decorator on methods.

import { SetMetadata } from '@nestjs/common';
import { RoleType } from '../database/role-type.enum';
import { HAS_ROLES_KEY } from './auth.constants';

export const HasRoles = (...args: RoleType[]) => SetMetadata(HAS_ROLES_KEY, args);

Create specific Guard to read the metadata and compare the user object in request and decide if allow user to access the controlled resources.

@Injectable()
export class RolesGuard implements CanActivate {
  constructor(private readonly reflector: Reflector) {}
  canActivate(
    context: ExecutionContext,
  ): boolean | Promise<boolean> | Observable<boolean> {
    const roles = this.reflector.get<RoleType[]>(
      HAS_ROLES_KEY,
      context.getHandler(),
    );
    if (!roles) {
      return true;
    }

    const { user }= context.switchToHttp().getRequest() as AuthenticatedRequest;
    return user.roles && user.roles.some(r => roles.includes(r));
  }
}

For example, we require a USER role to create a Post document.

export class PostController {
  constructor(private postService: PostService) {}
    
  @Post('')
  @UseGuards(JwtAuthGuard, RolesGuard)
  @HasRoles(RoleType.USER, RoleType.ADMIN)
  createPost(@Body() post: CreatePostDto): Observable<BlogPost> {
    //...
  }
    
}

You can add other rules on the resource access, such as a USER role is required to update a Post, and ADMIN is to delete a Post.

Adding auditing info

We have added roles to control access the resources, now we can save the current user who is creating the post or update the post.

There is a barrier when we wan to read the authenticated user from request and set it to fields createdBy and updatedBy in PostService, the PostService is singleton scoped, you can not inject a request in it. But you can declare the PostService is REQUEST scoped, thus injecting a request instance is possible.

@Injectable({ scope: Scope.REQUEST })
export class PostService {
  constructor(
    @Inject(POST_MODEL) private postModel: Model<Post>,
    @Inject(COMMENT_MODEL) private commentModel: Model<Comment>,
    @Inject(REQUEST) private req: AuthenticatedRequest,
  ) {}
    
  //...
  save(data: CreatePostDto): Observable<Post> {
    const createPost = this.postModel.create({
      ...data,
      createdBy: { _id: this.req.user._id },
    });
    return from(createPost);
  }
 
  update(id: string, data: UpdatePostDto): Observable<Post> {
    return from(
      this.postModel
        .findOneAndUpdate(
          { _id: id },
          { ...data, updatedBy: { _id: this.req.user._id } },
        )
        .exec(),
    );
  }
 
 //  actions for comments
  createCommentFor(id: string, data: CreateCommentDto): Observable<Comment> {
    const createdComment = this.commentModel.create({
      post: { _id: id },
      ...data,
      createdBy: { _id: this.req.user._id },
    });
    return from(createdComment);
  }    
}

As a convention in Nestjs, you have to make PostController available in the REQUEST scoped.

@Controller({path:'posts', scope:Scope.REQUEST})
export class PostController {...}

In the test codes, you have to resolve to replace get to get the instance from Nestjs test harness.

describe('Post Controller', () => {
  describe('Replace PostService in provider(useClass: PostServiceStub)', () => {
    let controller: PostController;

    beforeEach(async () => {
      const module: TestingModule = await Test.createTestingModule({
        providers: [
          {
            provide: PostService,
            useClass: PostServiceStub,
          },
        ],
        controllers: [PostController],
      }).compile();

      controller = await module.resolve<PostController>(PostController);// use resovle here....
    });
  ...

PostService also should be changed to request scoped.

@Injectable({ scope: Scope.REQUEST })
export class PostService {...}

In the post.service.spec.ts , you have to update the mocking progress.

describe('PostService', () => {
  let service: PostService;
  let model: Model<Post>;
  let commentModel: Model<Comment>;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [
        PostService,
        {
          provide: POST_MODEL,
          useValue: {
            new: jest.fn(),
            constructor: jest.fn(),
            find: jest.fn(),
            findOne: jest.fn(),
            update: jest.fn(),
            create: jest.fn(),
            remove: jest.fn(),
            exec: jest.fn(),
            deleteMany: jest.fn(),
            deleteOne: jest.fn(),
            updateOne: jest.fn(),
            findOneAndUpdate: jest.fn(),
            findOneAndDelete: jest.fn(),
          },
        },
        {
          provide: COMMENT_MODEL,
          useValue: {
            new: jest.fn(),
            constructor: jest.fn(),
            find: jest.fn(),
            findOne: jest.fn(),
            updateOne: jest.fn(),
            deleteOne: jest.fn(),
            update: jest.fn(),
            create: jest.fn(),
            remove: jest.fn(),
            exec: jest.fn(),
          },
        },
        {
          provide: REQUEST,
          useValue: {
            user: {
              id: 'dummyId',
            },
          },
        },
      ],
    }).compile();

    service = await module.resolve<PostService>(PostService);
    model = module.get<Model<Post>>(POST_MODEL);
    commentModel = module.get<Model<Comment>>(COMMENT_MODEL);
  });
    
//...

Run the application

Now we have done the clean work, run the application to make sure it works as expected.

> npm run start

Use curl to test the endpoints provided in the application.


$ curl http://localhost:3000/auth/login -d "{\"username\":\"hantsy\",\"password\":\"password\"}" -H "Content-Type:application/json" 

{"access_token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cG4iOiJoYW50c3kiLCJzdWIiOiI1ZWYwYjdkNTRkMDY3MzIxMTQxODQ1ZjYiLCJlbWFpbCI6ImhhbnRzeUBleGFtcGxlLmNvbSIsInJvbGVzIjpbIlVTRVIiXSwiaWF0IjoxNTkyODM0MDE3LCJleHAiOjE1OTI4Mzc2MTd9.Jx53KIWHgyPADhLr-LhjW-iu1e8hD650e9nduGgJ8Bw"}

$ curl -X POST http://localhost:3000/posts -d "{\"title\":\"my title\",\"content\":\"my content\"}" -H "Content-Type:application/json" -H "Authorization:Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cG4iOiJoYW50c3kiLCJzdWIiOiI1ZWYwYjdkNTRkMDY3MzIxMTQxODQ1ZjYiLCJlbWFpbCI6ImhhbnRzeUBleGFtcGxlLmNvbSIsInJvbGVzIjpbIlVTRVIiXSwiaWF0IjoxNTkyODM0MDE3LCJleHAiOjE1OTI4Mzc2MTd9.Jx53KIWHgyPADhLr-LhjW-iu1e8hD650e9nduGgJ8Bw"

{"_id":"5ef0b7fe4d067321141845fc","title":"my title","content":"my content","createdBy":"5ef0b7d54d067321141845f6","createdAt":"2020-06-22T13:54:06.873Z","updatedAt":"2020-06-22T13:54:06.873Z","__v":0}

$ curl -X POST http://localhost:3000/posts/5ef0b7fe4d067321141845fc/comments -d "{\"content\":\"my content\"}" -H "Content-Type:application/json" -H "Authorization:Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cG4iOiJoYW50c3kiLCJzdWIiOiI1ZWYwYjdkNTRkMDY3MzIxMTQxODQ1ZjYiLCJlbWFpbCI6ImhhbnRzeUBleGFtcGxlLmNvbSIsInJvbGVzIjpbIlVTRVIiXSwiaWF0IjoxNTkyODM0MDE3LCJleHAiOjE1OTI4Mzc2MTd9.Jx53KIWHgyPADhLr-LhjW-iu1e8hD650e9nduGgJ8Bw"

{"_id":"5ef0b8414d067321141845fd","post":"5ef0b7fe4d067321141845fc","content":"my content","createdBy":"5ef0b7d54d067321141845f6","createdAt":"2020-06-22T13:55:13.822Z","updatedAt":"2020-06-22T13:55:13.822Z","__v":0}

$ curl http://localhost:3000/posts/5ef0b7fe4d067321141845fc/comments
[{"_id":"5ef0b8414d067321141845fd","content":"my content","createdBy":"5ef0b7d54d067321141845f6","createdAt":"2020-06-22T13:55:13.822Z","updatedAt":"2020-06-22T13:55:13.822Z","__v":0}]

One last thing

After cleaning up the codes, we do not need the @nestjs/mongoose dependency, let's remove it.

npm uninstall --save @nestjs/mongoose

Grab the source codes from my github, switch to branch feat/model.

How to manage environment variables in Nest JS Part-5

hello@tkssharma.com — Mon, 05 Jun 2023 00:00:00 GMT

How to manage environment variables in Nest JS Part-5

Blog	Name	Link
Part-1	Nest JS Building REST APIs using Mongo DB Part-1	https://tkssharma.com/building-rest-apis-with-nestjs-and-mongodb-part-1
Part-2	Nest JS APIs with mongoose Mongo DB Database Part-2	https://tkssharma.com/building-rest-apis-with-nestjs-and-mongodb-part-2
Part-3	Nest JS Building Auth Service with JWT Tokens Part-3	https://tkssharma.com/building-nestjs-auth-service-with-mongodb-part-3
Part-4	Nest JS with Mongo DB Managing Relationships Part-4	https://tkssharma.com/building-nestjs-apis-with-mongodb-relationships

Github Link https://github.com/tkssharma/blogs/tree/master/nestjs-rest-apis-docs

In this post, I will demonstrate how to kickstart a simple RESTful APIs with NestJS from a newbie's viewpoint and will also understand managing environment variables

Github Link https://github.com/tkssharma/blogs/tree/master/nestjs-rest-apis-docs

What is NestJS?

As described in the Nestjs website, Nestjs is a progressive Node.js framework for building efficient, reliable and scalable server-side applications.

Nestjs combines the best programming practice and the cutting-edge techniques from the NodeJS communities.

A lot of NestJS concepts are heavily inspired by the effort of the popular frameworks in the world, esp. Angular .
Nestjs hides the complexities of web programming in NodeJS, it provides a common abstraction of the web request handling, you are free to choose Expressjs or Fastify as the background engine.
Nestjs provides a lot of third party project integrations, from database operations, such as Mongoose, TypeORM, etc. to Message Brokers, such as Redis, RabbitMQ, etc.

If you are new to Nestjs like me but has some experience of Angular , TypeDI or Spring WebMVC, bootstraping a Nestjs project is really a piece of cake.

Make sure you have installed the latest Nodejs.

npm i -g @nestjs/cli

When it is finished, there is a nest command available in the Path. The usage of nest is similar with ng (Angular CLI), type nest --help in the terminal to list help for all commands.

❯ nest --help
Usage: nest <command> [options]

Options:
  -v, --version                                   Output the current version.
  -h, --help                                      Output usage information.

Commands:
  new|n [options] [name]                          Generate Nest application.
  build [options] [app]                           Build Nest application.
  start [options] [app]                           Run Nest application.
  info|i                                          Display Nest project details.
  update|u [options]                              Update Nest dependencies.
  add [options] <library>                         Adds support for an external library to your project.
  generate|g [options] <schematic> [name] [path]  Generate a Nest element.
    Available schematics:
      ┌───────────────┬─────────────┐
      │ name          │ alias       │
      │ application   │ application │
      │ class         │ cl          │
      │ configuration │ config      │
      │ controller    │ co          │
      │ decorator     │ d           │
      │ filter        │ f           │
      │ gateway       │ ga          │
      │ guard         │ gu          │
      │ interceptor   │ in          │
      │ interface     │ interface   │
      │ middleware    │ mi          │
      │ module        │ mo          │
      │ pipe          │ pi          │
      │ provider      │ pr          │
      │ resolver      │ r           │
      │ service       │ s           │
      │ library       │ lib         │
      │ sub-app       │ app         │
      └───────────────┴─────────────┘

Now generate a Nestjs project via:

nest new nestjs-sample

Open it in your favorite IDEs, such as Intellij WebStorm or VSCode.

Exploring the project files

Expand the project root, you will see the following like tree nodes.

.
├── LICENSE
├── nest-cli.json
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── app.controller.spec.ts
│   ├── app.controller.ts
│   ├── app.module.ts
│   ├── app.service.ts
│   └── main.ts
├── test
│   ├── app.e2e-spec.ts
│   └── jest-e2e.json
├── tsconfig.build.json
└── tsconfig.json

The default structure of this project is very similar with the one generated by Angular CLI.

src/main.ts is the entry file of this application.
*src/app** is the top level component in a nest application.
- There is an app.module.ts is a Nestjs Module which is similar with Angular NgModule, and used to organize codes in the logic view.
- The app.service.ts is an @Injectable component, similar with the service in Angular or Spring's Service, it is used for handling business logic. A service is annotated with @Injectable.
- The app.controller.ts is the controller of MVC, to handle incoming request, and responds the handled result back to client. The annotatoin @Controller() is similar with Spring MVC's @Controller.
- The app.controller.spec.ts is test file for app.controller.ts. Nestjs uses Jest as testing framework.
test folder is for storing e2e test files.

Externalizing the configuration

Till now, all configurations in our application is working for the local development environment, but they are written in hard codes.

In the development and deployment stages of a real world application, we have to consider a flexible way to alter the configurations in the production environment without any code changes while the application is deployed continuously through a predefined delivery pipeline.

Nestjs provides excellent configuration support, thus your application can read the configuration values from environment variables, a .env file, etc. More info about the configuration, check the Configuration chapter from the Nestjs official docs.

In this post, we will move our hard-coded configuration we've used in the previous posts to a central place and organize them with the NestJS configuration facilities.

Introduce to ConfigModule

First of all, install @nestjs/config package.

npm install @nestjs/config

Simply, import ConfigModule in the top-level AppModule.


import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [ConfigModule.forRoot()],
})
export class AppModule {}

It will register a ConfigService for you to read configuration properties by calling its get method.

configService.get<string>('MONGO_URI')

Internally, Nestjs will scan .env file in the root folder.

The following is a sample of the content of the .env file.

MONGO_URI=mongodb://localhost/blog

If you want to read configuration from an environment-aware file, eg. .dev.env for development phase, then configure the location in ConfigModule.

ConfigModule.forRoot({
  envFilePath: '.dev.env',
});

For the container deployment or cloud deployment, setup configuration in a config server or as environment variables or K8s ConfigMap is more popular.

Externalizing application configurations

Personally, I prefer use a default hard-coded configuration in the development phase, and use environmental variables to override it in the production.

Nestjs also support load custom configuration where it can read configurations from the environment variables freely.

In the AppModule, disable .env file support for ConfigModule.

@Module({
   imports:[
    	ConfigModule.forRoot({ ignoreEnvFile: true }),
	] 
})
export class AppModule{}

Then create a config folder to organize all configurations in this application.

In the config folder, add a new configuration for Mongo database.

//config/mongodb.config.ts

import { registerAs } from '@nestjs/config';

export default registerAs('mongodb', () => ({
  uri: process.env.MONGODB_URI || 'mongodb://localhost/blog',
}));

Here we use registerAs to group the configurations related to the context mongodb.

In the DatabaseModule, load the mongodb configuration.

import { databaseConnectionProviders } from './database-connection.providers';

@Module({
  imports: [ConfigModule.forFeature(mongodbConfig)],
  providers: [...databaseConnectionProviders,],
  exports: [...databaseConnectionProviders, ],
})
export class DatabaseModule { }

You can also use Nestjs ConfigModule to load the configuration globally, but here we do not want to expose the mongodb config to other modules.

And change the database connection providers like this.

import { ConfigType } from '@nestjs/config';
import { Connection, createConnection } from 'mongoose';
import mongodbConfig from '../config/mongodb.config';
import { DATABASE_CONNECTION } from './database.constants';

export const databaseConnectionProviders = [
  {
    provide: DATABASE_CONNECTION,
    useFactory: (dbConfig: ConfigType<typeof mongodbConfig>): Connection =>
      createConnection(dbConfig.uri, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
        //see: https://mongoosejs.com/docs/deprecations.html#findandmodify
        useFindAndModify: false
      }),
    inject: [mongodbConfig.KEY],
  }
];

In the above codes, provide a token mongodbConfig.KEY, you can inject a config instance as type ConfigType<typeof mongodbConfig> in the factory method, then you can read the configuration in a type safe way via dbConfig.uri.

Similarly, create a configuration for the JWT authentication, move the existing JWT options into this configuration file.

//config/jwt.config.ts
import { registerAs } from '@nestjs/config';

export default registerAs('jwt', () => ({
  secretKey: process.env.JWT_SECRET_KEY || 'rzxlszyykpbgqcflzxsqcysyhljt',
  expiresIn: process.env.JWT_EXPIRES_IN || '3600s',
}));

In the AuthModule, apply the configuration like this.

import { ConfigModule, ConfigType } from '@nestjs/config';
import jwtConfig from '../config/jwt.config';

@Module({
  imports: [
    ConfigModule.forFeature(jwtConfig),
    ...
    JwtModule.registerAsync({
      imports: [ConfigModule.forFeature(jwtConfig)],
      useFactory: (config: ConfigType<typeof jwtConfig>) => {
        return {
          secret: config.secretKey,
          signOptions: { expiresIn: config.expiresIn },
        } as JwtModuleOptions;
      },
      inject: [jwtConfig.KEY],
    }),
  ],
....
})
export class AuthModule {}

And open jwt.stretagy.ts file, change the value of secretOrKey to read from jwtConfig.

import jwtConfig from '../../config/jwt.config';
import { ConfigType } from '@nestjs/config';
//...

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor(@Inject(jwtConfig.KEY) config: ConfigType<typeof jwtConfig>) {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      ignoreExpiration: false,
      secretOrKey: config.secretKey,
    });
  }
  //...
}

In a production environment, it is easy to change these settings by simply declaring an environment variables like this.

export MONGODB_URI=mongodb://localhost:27019/blog

Or set it in the docker-compose file like this.

version: '3.8' # specify docker-compose version
services:
  //...  
  api:
    environment:
      - "MONGODB_URI=mongodb://mongodb:27017/blog"
	//...

We will start a new topic of deployment in the further posts.

Testing configurations

An example of jwt-config.spec.ts.

import { ConfigModule, ConfigType } from '@nestjs/config';
import { TestingModule, Test } from '@nestjs/testing';
import jwtConfig from './jwt.config';

describe('jwtConfig', () => {
  let config: ConfigType<typeof jwtConfig>;
  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      imports: [ConfigModule.forFeature(jwtConfig)],
    }).compile();

    config = module.get<ConfigType<typeof jwtConfig>>(jwtConfig.KEY);
  });

  it('should be defined', () => {
    expect(jwtConfig).toBeDefined();
  });

  it('should contains expiresIn and secret key', async () => {
    expect(config.expiresIn).toBe('3600s');
    expect(config.secretKey).toBe('rzxlszyykpbgqcflzxsqcysyhljt');
  });
});

Github Link https://github.com/tkssharma/blogs/tree/master/nestjs-rest-apis-docs

Building REST APIs using Mongo DB and Nest JS Part-1

hello@tkssharma.com — Sun, 04 Jun 2023 00:00:00 GMT

Nest JS Building REST APIs using Mongo DB Part-1

Github Link https://github.com/tkssharma/blogs/tree/master/nestjs-rest-apis-docs

In this post, I will demonstrate how to kickstart a simple RESTful APIs with NestJS from a newbie's viewpoint.

What is NestJS?

As described in the Nestjs website, Nestjs is a progressive Node.js framework for building efficient, reliable and scalable server-side applications.

Nestjs combines the best programming practice and the cutting-edge techniques from the NodeJS communities.

A lot of NestJS concepts are heavily inspired by the effort of the popular frameworks in the world, esp. Angular .
Nestjs hides the complexities of web programming in NodeJS, it provides a common abstraction of the web request handling, you are free to choose Expressjs or Fastify as the background engine.
Nestjs provides a lot of third party project integrations, from database operations, such as Mongoose, TypeORM, etc. to Message Brokers, such as Redis, RabbitMQ, etc.

If you are new to Nestjs like me but has some experience of Angular , TypeDI or Spring WebMVC, bootstraping a Nestjs project is really a piece of cake.

Generating a NestJS project

Make sure you have installed the latest Nodejs.

npm i -g @nestjs/cli

When it is finished, there is a nest command available in the Path. The usage of nest is similar with ng (Angular CLI), type nest --help in the terminal to list help for all commands.

❯ nest --help
Usage: nest <command> [options]

Options:
  -v, --version                                   Output the current version.
  -h, --help                                      Output usage information.

Commands:
  new|n [options] [name]                          Generate Nest application.
  build [options] [app]                           Build Nest application.
  start [options] [app]                           Run Nest application.
  info|i                                          Display Nest project details.
  update|u [options]                              Update Nest dependencies.
  add [options] <library>                         Adds support for an external library to your project.
  generate|g [options] <schematic> [name] [path]  Generate a Nest element.
    Available schematics:
      ┌───────────────┬─────────────┐
      │ name          │ alias       │
      │ application   │ application │
      │ class         │ cl          │
      │ configuration │ config      │
      │ controller    │ co          │
      │ decorator     │ d           │
      │ filter        │ f           │
      │ gateway       │ ga          │
      │ guard         │ gu          │
      │ interceptor   │ in          │
      │ interface     │ interface   │
      │ middleware    │ mi          │
      │ module        │ mo          │
      │ pipe          │ pi          │
      │ provider      │ pr          │
      │ resolver      │ r           │
      │ service       │ s           │
      │ library       │ lib         │
      │ sub-app       │ app         │
      └───────────────┴─────────────┘

Now generate a Nestjs project via:

nest new nestjs-sample

Open it in your favorite IDEs, such as Intellij WebStorm or VSCode.

Exploring the project files

Expand the project root, you will see the following like tree nodes.

.
├── LICENSE
├── nest-cli.json
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── app.controller.spec.ts
│   ├── app.controller.ts
│   ├── app.module.ts
│   ├── app.service.ts
│   └── main.ts
├── test
│   ├── app.e2e-spec.ts
│   └── jest-e2e.json
├── tsconfig.build.json
└── tsconfig.json

The default structure of this project is very similar with the one generated by Angular CLI.

src/main.ts is the entry file of this application.
src/app* is the top level component in a nest application.
- There is an app.module.ts is a Nestjs Module which is similar with Angular NgModule, and used to organize codes in the logic view.
- The app.service.ts is an @Injectable component, similar with the service in Angular or Spring's Service, it is used for handling business logic. A service is annotated with @Injectable.
- The app.controller.ts is the controller of MVC, to handle incoming request, and responds the handled result back to client. The annotatoin @Controller() is similar with Spring MVC's @Controller.
- The app.controller.spec.ts is test file for app.controller.ts. Nestjs uses Jest as testing framework.
test folder is for storing e2e test files.

Defining the APIs

I will reuse the concept I've used in the former examples - the blogging posts.

GET /posts - Get all posts
GET /posts/id - Get post by id
POST /posts - Save a post
PUT /posts/id - Update the certain post specified by id
DELETE /posts/id - Delete a post

In the next steps, we will create:

A new module PostModule to organize all these features.
A Post interface to present the Post entity resource.
A PostService component to serve the data for controller. In this post, we use a dummy data storage temporarily, and we will replace it with a real MongoDB in the future post.
A PostController to expose APIs which is responsible for handling incoming requests.

Creating PostService

Following the Nestjs coding style, first of all, let's generate a module named post:

nest g mo post

PosModule is imported into the top-level AppModule. Check the content of file src/app/app.module.ts:

//... other imports
import { PostModule } from './post/post.module';

@Module({
  imports: [PostModule],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Then generate a Post service and interface respectively.

nest g s post
nest g interface post

The PostService is added to PostModule automatically when it is generated.

//...other imports
import { PostService } from './post.service';

@Module({
  providers: [PostService]
})
export class PostModule {}

After it is done there are 4 files created in the src/app/post folder, including a spec file for testing PostService.

post.interface.ts
post.module.ts
post.service.spec.ts
post.service.ts

Firstly, let's open post.interface.ts to model the Post entity.

export interface Post {
 id?: number;
 title:string;
 content: string;
 createdAt?: Date,
 updatedAt?: Date
}

In the above interface, add some fields as you see, here we make the id, createdAt, updatedAt optional now.

Let's create a method in PostService to fetch all posts.

@Injectable()
export class PostService {
  private posts: Post[] = [
    {
      id: 1,
      title: 'Generate a NestJS project',
      content: 'content',
      createdAt: new Date(),
    },
    {
      id: 2,
      title: 'Create CRUD RESTful APIs',
      content: 'content',
      createdAt: new Date(),
    },
    {
      id: 3,
      title: 'Connect to MongoDB',
      content: 'content',
      createdAt: new Date(),
    },
  ];

  findAll(): Observable<Post> {
    return from(this.posts);
  }
}

In the codes, we used an array posts as the background data storage. The findAll method returns a Observerable which is created from the dummy posts we have declared.

Add a test for this method. Open post.service.spec.ts, add a new test case.


describe('PostService', () => {
  let service: PostService;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [PostService],
    }).compile();

    service = module.get<PostService>(PostService);
  });

  it('should be defined', () => {
    expect(service).toBeDefined();
  });

  it('getAllPosts should return 3 posts', done => {
    service
      .findAll()
      .pipe(take(3), toArray())
      .subscribe({
        next: data => expect(data.length).toBe(3),
        error: error => console.log(error),
        complete: done(),
      });
  });
}

Similar with Angular, in the beforeEach hook , it prepares a TestingModule to assemble the required resources in the test.

Like the annotations (@BeforeEach, etc.) provided JUnit 5 in Java world, there are some similar hooks ready for preparing the test and doing clean work in a Jest test, such as beforeAll, afterAll, beforeEache, afterEach , etc.

In the newly added it('getAllPosts should return 3 posts', done => {} , it uses a done handler to mark the an asynchronous task is done. It is very helpful to test Promise or Observerable invocation in a test.

The pipe accepts a series of Rxjs operators for some processor working, such as filtering, transforming, collecting, etc. check the Rxjs official docs.

The subscribe accept a subscriber to handle the data stream, see the Subscriber API for more details.

Run npm run test command in the root folder to run all tests.

❯ npm run test

> nestjs-sample@0.0.1 test D:\hantsylabs\nestjs-sample
> jest

...
Time:        4.563 s, estimated 11 s
Ran all test suites.

Awesome, it works.

If you want to track the changes of test codes and rerun the test cases automatically, use npm run test:watch instead.

Let's modify the findAll slightly, make it accept a keyword to query the posts.

@Injectable()
export class PostService {
  //...
  findAll(keyword?: string): Observable<Post> {
    if (keyword) {
      return from(this.posts.filter(post => post.title.indexOf(keyword) >= 0));
    }

    return from(this.posts);
  }
}

Add another test to verify filtering the posts by keyword.

it('getAllPosts with keyword should return 1 post', done => {
    service
        .findAll('Generate')
        .pipe(take(3), toArray())
        .subscribe({
        next: data => expect(data.length).toBe(1),
        error: error => console.log(error),
        complete: done(),
    });
});

When using a keyword Generate, only one item will be included in the data stream. Run the test again, it will pass.

Let's move the next one. Create a findById method in PostService class. When a post is found return the found post else return a Rxjs EMPTY.

findById(id: number): Observable<Post> {
    const found = this.posts.find(post => post.id === id);
    if (found) {
      return of(found);
    }
    return EMPTY;
}

And add a test for the case when a post is found.

it('getPostById with existing id should return 1 post', done => {
    service.findById(1).subscribe({
        next: data => {
            expect(data.id).toBe(1);
            expect(data.title).toEqual('Generate a NestJS project');
        },
        error: error => console.log(error),
        complete: done(),
    });
});

When the findById return a EMPTY, I tried to use the same approach to verify the result in the next handler, but failed, the next is never called, I started a topic on stackoverflow, and got two solutions for handling the EMPTY stream.

The first solution is utilizing the testing facility from Rxjs. Set up a TestScheduler for test, and use expectObservable to assert the data stream in marble diagrams.

beforeEach(() => {
    testScheduler = new TestScheduler((actual, expected) => {
        // asserting the two objects are equal
        expect(actual).toEqual(expected);
    });
});

// This test will actually run *synchronously*
it('test complete for empty()', () => {
    testScheduler.run(helpers => {
        const { cold, expectObservable, expectSubscriptions } = helpers;
        expectObservable(service.findById(10001)).toBe('|');
    });
});

The second test is using a signal myself to make sure it is completed.

it('getPostById with none existing id should return empty', done => {
    let called = false;
    service.findById(10001).subscribe({
        next: data => {
            console.log(data);
            called = true;
        },
        error: error => {
            console.log(error);
            called = true;
        },
        complete: () => {
            expect(called).toBeFalsy();
            done();
        },
    });

Another workaround is converting the EMPTY stream to an array and asserting it is an empty array in the next handler.

it('getPostById with none existing id should return empty', done => {
    service
        .findById(10001)
        .pipe(toArray())
        .subscribe({
        next: data => expect(data.length).toBe(0),
        error: error => console.log(error),
        complete: done(),
    });
});

Ok, we have resolved the emtpy stream testing issue. Go ahead.

Next, let's create a method to save a new Post into the data storage. Since we are using an array for the dummy storage, it is simple when saving a new Post, just append it into the end of the existing posts:

save(data: Post): Observable<Post> {
    const post = { ...data, id: this.posts.length + 1, createdAt: new Date() };
    this.posts = [...this.posts, post];
    return from(this.posts);
}

Here, we return the new array as result. In a real world application, most of case it is better to return the new persisted object or the id of the new post.

Create a test for saving a new post, verify if the length of the array is increased and if the createdAt is set in the new post.

it('save should increase the length of posts', done => {
    service
        .save({
            id: 4,
            title: 'test title',
            content: 'test content',
        })
        .pipe(toArray())
        .subscribe({
            next: data => {
                expect(data.length).toBe(4);
                expect(data[3].createdAt).toBeTruthy();
            },
            error: error => console.log(error),
            complete: done(),
        });
});

Execute npm run test to make make sure it works.

Similarly, create a update method in PostService class to update the existing post.

update(id: number, data: Post): Observable<Post> {
    this.posts = this.posts.map(post => {
        if (id === post.id) {
            post.title = data.title;
            post.content = data.content;
            post.updatedAt = new Date();
        }
        return post;
    });
    return from(this.posts);
}

Create a test for update method. In the test, we updated the first item in the posts data store, and update it, and finally verify the changes.

it('update should change the content of post', done => {
    service
        .update(1, {
            id: 1,
            title: 'test title',
            content: 'test content',
            createdAt: new Date(),
        })
        .pipe(take(4), toArray())
        .subscribe({
        next: data => {
            expect(data.length).toBe(3);
            expect(data[0].title).toBe('test title');
            expect(data[0].content).toBe('test content');
            expect(data[0].updatedAt).not.toBeNull();
        },
        error: error => console.log(error),
        complete: done(),
    });
});

Create a method to delete post by id.

deleteById(id: number): Observable<boolean> {
    const idx: number = this.posts.findIndex(post => post.id === id);
    if (idx >= 0) {
        this.posts = [
            ...this.posts.slice(0, idx),
            ...this.posts.slice(idx + 1),
        ];
        return of(true);
    }
    return of(false);
}

Create a test case in post.service.test to verify the functionality of the deleteById method.

it('deleteById with existing id should return true', done => {
    service.deleteById(1).subscribe({
        next: data => expect(data).toBeTruthy,
        error: error => console.log(error),
        complete: done(),
    });
});

it('deleteById with none existing id should return false', done => {
    service.deleteById(10001).subscribe({
        next: data => expect(data).toBeFalsy,
        error: error => console.log(error),
        complete: done(),
    });
});

OK, all methods used for CRUD functionalities are ready, let's move to the controller.

Creating PostController

Like Spring WebMVC, in the NestJS world, the controller is responsible for handling incoming requests from the client, and sending back the handled result to the client.

Generate a controller using nest command:

nest g co post

It will add two files into the src/app/post folder.

post.controller.spec.ts
post.controller.ts

And PostController is registered in PostModule automatcially when it is generated.

//...other imports
import { PostController } from './post.controller';

@Module({
  controllers: [PostController],
  providers: [PostService]
})
export class PostModule {}

Open the post.controller.ts file and enrich the PostController class as we planned.

@Controller('posts')
export class PostController {
  constructor(private postService: PostService) {}

  @Get('')
  getAllPosts(@Query('q') keyword?: string): Observable<BlogPost[]> {
    return this.postService.findAll(keyword).pipe(take(10), toArray());
  }

  @Get(':id')
  getPostById(@Param('id', ParseIntPipe) id: number): Observable<BlogPost> {
    return this.postService.findById(id);
  }

  @Post('')
  createPost(@Body() post: BlogPost):Observable<BlogPost[]> {
    return this.postService.save(post).pipe(toArray());
  }

  @Put(':id')
  updatePost(@Param('id', ParseIntPipe) id: number, @Body() post: BlogPost): Observable<BlogPost[]> {
    return this.postService.update(id, post).pipe(toArray());
  }

  @Delete(':id')
  deletePostById(@Param('id', ParseIntPipe) id: number): Observable<boolean> {
    return this.postService.deleteById(id);
  }
}

In the above codes:

In the constructor, we add PostService as its arguments, the PostService component will be injected automatically.
The Controller annotation indicates it is a controller, and it uses /posts as base uri all methods.
The Get, Post, Put, and Delete on methods are used for handling different HTTP methods.
The @Param binds the path parameters (:id) to the method arguments, and there is ParseIntPipe applied in the second arguments of Param. Pipe is a Angular concept, here it is more close to Spring's converters and validators.
@Body parses the request body into a Post object.

In the Typescript language, we call the @Controller syntax as Decorator. For those who are familiar with Spring WebMVC, using the word annotation is easier to understand.

Now we add tests for PostController.

Open post.controller.spec.ts , add the following tests.

describe('Post Controller', () => {
  let controller: PostController;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [PostService],
      controllers: [PostController],
    }).compile();

    controller = module.get<PostController>(PostController);
  });

  it('should be defined', () => {
    expect(controller).toBeDefined();
  });

  it('GET on /posts should return all posts', async () => {
    const posts = await controller.getAllPosts().toPromise();
    expect(posts.length).toBe(3);
  });

  it('GET on /posts/1 should return one post ', done => {
    controller.getPostById(1).subscribe(data => {
      expect(data.id).toEqual(1);
      done();
    });
  });

  it('POST on /posts should return all posts', async () => {
    const post:Post = {id:4, title:'test title', content:'test content'};
    const posts = await controller.createPost(post).toPromise();
    expect(posts.length).toBe(4);
  });

  it('PUT on /posts/1 should return all posts', done => {
    const post:Post = {id:4, title:'test title', content:'test content'};
    controller.updatePost(1, post).subscribe(data => {
      expect(data.length).toBe(3);
      expect(data[0].title).toEqual('test title');
      expect(data[0].content).toEqual('test content');
      expect(data[0].updatedAt).toBeTruthy();
      done();
    });
  });

  it('DELETE on /posts/1 should return true', done => {
    controller.deletePostById(1).subscribe(data => {
      expect(data).toBeTruthy();
      done();
    });
  });

  it('DELETE on /posts/1001 should return false', done => {
    controller.deletePostById(1001).subscribe(data => {
      expect(data).toBeFalsy();
      done();
    });
  });
});

Run the tests again and make sure it works.

Run the application

Now let's try to run the application.

Open a terminal, and go to the root folder of the project, and execute the following command.

>npm run start
> nestjs-sample@0.0.1 start D:\hantsylabs\nestjs-sample
> nest start

[Nest] 9956   - 06/13/2020, 12:04:50 PM   [NestFactory] Starting Nest application...
[Nest] 9956   - 06/13/2020, 12:04:50 PM   [InstanceLoader] AppModule dependencies initialized +16ms
[Nest] 9956   - 06/13/2020, 12:04:50 PM   [InstanceLoader] PostModule dependencies initialized +1ms
[Nest] 9956   - 06/13/2020, 12:04:50 PM   [RoutesResolver] AppController {}: +10ms
[Nest] 9956   - 06/13/2020, 12:04:50 PM   [RouterExplorer] Mapped {, GET} route +4ms
[Nest] 9956   - 06/13/2020, 12:04:50 PM   [RoutesResolver] PostController {/posts}: +1ms
[Nest] 9956   - 06/13/2020, 12:04:50 PM   [RouterExplorer] Mapped {/posts, GET} route +1ms
[Nest] 9956   - 06/13/2020, 12:04:50 PM   [RouterExplorer] Mapped {/posts/:id, GET} route +2ms
[Nest] 9956   - 06/13/2020, 12:04:50 PM   [RouterExplorer] Mapped {/posts, POST} route +1ms
[Nest] 9956   - 06/13/2020, 12:04:50 PM   [RouterExplorer] Mapped {/posts/:id, PUT} route +2ms
[Nest] 9956   - 06/13/2020, 12:04:50 PM   [RouterExplorer] Mapped {/posts/:id, DELETE} route +2ms
[Nest] 9956   - 06/13/2020, 12:04:50 PM   [NestApplication] Nest application successfully started +7ms

When it is started up, it serves at http://localhost:3000.

Let's test the exposed APIs via curl:

>curl http://localhost:3000/posts
[{"id":1,"title":"Generate a NestJS project","content":"content","createdAt":"2020-06-13T04:20:21.920Z"},{"id":2,"title":"Create CRUD RESTful APIs","content":"content","createdAt":"2020-06-13T04:20:21.920Z"},{"id":3,"title":"Connect to MongoDB","content":"content","createdAt":"2020-06-13T04:20:21.920Z"}]

>curl http://localhost:3000/posts/1
{"id":1,"title":"Generate a NestJS project","content":"content","createdAt":"2020-06-13T04:20:21.920Z"}

>curl http://localhost:3000/posts -d "{\"title\":\"new post\",\"content\":\"content of my new post\"}" -H "Content-Type:application/json" -X POST
[{"id":1,"title":"Generate a NestJS project","content":"content","createdAt":"2020-06-13T04:20:21.920Z"},{"id":2,"title":"Create CRUD RESTful APIs","content":"content","createdAt":"2020-06-13T04:20:21.920Z"},{"id":3,"title":"Connect to MongoDB","content":"content","createdAt":"2020-06-13T04:20:21.920Z"},{"title":"new post","content":"content of my new post","id":4,"createdAt":"2020-06-13T04:20:52.526Z"}]

>curl http://localhost:3000/posts/1 -d "{\"title\":\"updated post\",\"content\":\"content of my upated post\"}" -H "Content-Type:application/json" -X PUT
[{"id":1,"title":"updated post","content":"content of my upated post","createdAt":"2020-06-13T04:20:21.920Z","updatedAt":"2020-06-13T04:21:08.259Z"},{"id":2,"title":"Create CRUD RESTful APIs","content":"content","createdAt":"2020-06-13T04:20:21.920Z"},{"id":3,"title":"Connect to MongoDB","content":"content","createdAt":"2020-06-13T04:20:21.920Z"},{"title":"new post","content":"content of my new post","id":4,"createdAt":"2020-06-13T04:20:52.526Z"}]

>curl http://localhost:3000/posts/1 -X DELETE
true

>curl http://localhost:3000/posts
[{"id":2,"title":"Create CRUD RESTful APIs","content":"content","createdAt":"2020-06-13T04:20:21.920Z"},{"id":3,"title":"Connect to MongoDB","content":"content","createdAt":"2020-06-13T04:20:21.920Z"},{"title":"new post","content":"content of my new post","id":4,"createdAt":"2020-06-13T04:20:52.526Z"}]

In the further post, we will connect to a real database to replace the dummy data service.

Nest JS Building Auth Service with JWT Tokens Part-3

hello@tkssharma.com — Sat, 03 Jun 2023 00:00:00 GMT

Nest JS Building Auth Service with JWT Tokens Part-3

Blog	Name	Link
Part-1	Nest JS Building REST APIs using Mongo DB Part-1	https://tkssharma.com/building-rest-apis-with-nestjs-and-mongodb-part-1
Part-2	Nest JS APIs with mongoose Mongo DB Database Part-2	https://tkssharma.com/building-rest-apis-with-nestjs-and-mongodb-part-2

In this post, I will demonstrate how to kickstart a simple RESTful APIs with NestJS from a newbie's viewpoint.

Github Link https://github.com/tkssharma/blogs/tree/master/nestjs-rest-apis-docs

What is NestJS?

As described in the Nestjs website, Nestjs is a progressive Node.js framework for building efficient, reliable and scalable server-side applications.

Nestjs combines the best programming practice and the cutting-edge techniques from the NodeJS communities.

A lot of NestJS concepts are heavily inspired by the effort of the popular frameworks in the world, esp. Angular .
Nestjs hides the complexities of web programming in NodeJS, it provides a common abstraction of the web request handling, you are free to choose Expressjs or Fastify as the background engine.
Nestjs provides a lot of third party project integrations, from database operations, such as Mongoose, TypeORM, etc. to Message Brokers, such as Redis, RabbitMQ, etc.

If you are new to Nestjs like me but has some experience of Angular , TypeDI or Spring WebMVC, bootstraping a Nestjs project is really a piece of cake.

Make sure you have installed the latest Nodejs.

npm i -g @nestjs/cli

When it is finished, there is a nest command available in the Path. The usage of nest is similar with ng (Angular CLI), type nest --help in the terminal to list help for all commands.

❯ nest --help
Usage: nest <command> [options]

Options:
  -v, --version                                   Output the current version.
  -h, --help                                      Output usage information.

Commands:
  new|n [options] [name]                          Generate Nest application.
  build [options] [app]                           Build Nest application.
  start [options] [app]                           Run Nest application.
  info|i                                          Display Nest project details.
  update|u [options]                              Update Nest dependencies.
  add [options] <library>                         Adds support for an external library to your project.
  generate|g [options] <schematic> [name] [path]  Generate a Nest element.
    Available schematics:
      ┌───────────────┬─────────────┐
      │ name          │ alias       │
      │ application   │ application │
      │ class         │ cl          │
      │ configuration │ config      │
      │ controller    │ co          │
      │ decorator     │ d           │
      │ filter        │ f           │
      │ gateway       │ ga          │
      │ guard         │ gu          │
      │ interceptor   │ in          │
      │ interface     │ interface   │
      │ middleware    │ mi          │
      │ module        │ mo          │
      │ pipe          │ pi          │
      │ provider      │ pr          │
      │ resolver      │ r           │
      │ service       │ s           │
      │ library       │ lib         │
      │ sub-app       │ app         │
      └───────────────┴─────────────┘

Now generate a Nestjs project via:

nest new nestjs-sample

Open it in your favorite IDEs, such as Intellij WebStorm or VSCode.

Exploring the project files

Expand the project root, you will see the following like tree nodes.

.
├── LICENSE
├── nest-cli.json
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── app.controller.spec.ts
│   ├── app.controller.ts
│   ├── app.module.ts
│   ├── app.service.ts
│   └── main.ts
├── test
│   ├── app.e2e-spec.ts
│   └── jest-e2e.json
├── tsconfig.build.json
└── tsconfig.json

The default structure of this project is very similar with the one generated by Angular CLI.

src/main.ts is the entry file of this application.
src/app* is the top level component in a nest application.
- There is an app.module.ts is a Nestjs Module which is similar with Angular NgModule, and used to organize codes in the logic view.
- The app.service.ts is an @Injectable component, similar with the service in Angular or Spring's Service, it is used for handling business logic. A service is annotated with @Injectable.
- The app.controller.ts is the controller of MVC, to handle incoming request, and responds the handled result back to client. The annotatoin @Controller() is similar with Spring MVC's @Controller.
- The app.controller.spec.ts is test file for app.controller.ts. Nestjs uses Jest as testing framework.
test folder is for storing e2e test files.

Protect your APIs with JWT Token

In the last post, we connected to a Mongo server and used a real database to replace the dummy data storage. In this post, we will explore how to protect your APIs when exposing to a client application.

When we come to the security of a web application, technically it will include:

Authentication - The application will ask you to provide your principal and then it will identify who are you.
**Authorization ** - Based on your claims, check if you have permissions to perform some operations.

Passportjs is one of the most popular authentication frameworks on the Expressjs platform. Nestjs has great integration with passportjs with its @nestjs/passportjs module. We will follow the Authentication chapter of the official guide to add local and jwt strategies to the application we have done the previous posts.

Prerequisites

Install passportjs related dependencies.

$ npm install --save @nestjs/passport passport passport-local @nestjs/jwt passport-jwt
$ npm install --save-dev @types/passport-local @types/passport-jwt

Before starting the authentication work, let's generate some skeleton codes.

Firstly generate a AuthModule and AuthService .

nest g mo auth
nest g s auth

The authentication should work with users in the application.

Similarly, create a standalone UserModule to handle user queries.

nest g mo user
nest g s user

Ok, let's begin to enrich the AuthModule.

Implementing Authentication

First of all, let's create some resources for the user model, a Document and Schema file.

Create new file under /user folder.

import { SchemaFactory, Schema, Prop } from '@nestjs/mongoose';
import { Document } from 'mongoose';

@Schema()
export class User extends Document {
  @Prop({ require: true })
  readonly username: string;

  @Prop({ require: true })
  readonly email: string;

  @Prop({ require: true })
  readonly password: string;
}

export const UserSchema = SchemaFactory.createForClass(User);

The User class is to wrap a document in Mongoose, and UserSchema is to describe User document.

@Module({
  imports: [MongooseModule.forFeature([{ name: 'users', schema: UserSchema }])],
  providers: [//...
  ],
  exports: [//...
  ],
})
export class UserModule {}

The users here is used as the token to identify different Model when injecting a Model. When registering a UserSchema in mongoose, the name attribute in the above MongooseModule.forFeature is also the collection name of User documents.

Add a findByUsername method in UserService.

@Injectable()
export class UserService {
  constructor(@InjectModel('users') private userModel: Model<User>) {}

  findByUsername(username: string): Observable<User | undefined> {
    return from(this.userModel.findOne({ username }).exec());
  }
}

In the @Module declaration of the UserModule, register UserService in providers, and do not forget to add it into exports, thus other modules can use this service when importing UserModule.

//...other imports
import { UserService } from './user.service';

@Module({
  providers: [UserService],
  exports:[UserService]//exposing users to other modules...
})
export class UserModule {}

Create a test case to test the findByUsername method.

describe('UserService', () => {
  let service: UserService;
  let model: Model<User>;

  beforeEach(async () => {
    const module: TestingModule = await Test.createTestingModule({
      providers: [
        UserService,
        {
          provide: getModelToken('users'),
          useValue: {
            findOne: jest.fn(),
          },
        },
      ],
    }).compile();

    service = module.get<UserService>(UserService);
    model = module.get<Model<User>>(getModelToken('users'));
  });

  it('should be defined', () => {
    expect(service).toBeDefined();
  });

  it('findByUsername should return user', async () => {
    jest
      .spyOn(model, 'findOne')
      .mockImplementation((conditions: any, projection: any, options: any) => {
        return {
          exec: jest.fn().mockResolvedValue({
            username: 'hantsy',
            email: 'hantsy@example.com',
          } as User),
        } as any;
      });

    const foundUser = await service.findByUsername('hantsy').toPromise();
    expect(foundUser).toEqual({
      username: 'hantsy',
      email: 'hantsy@example.com',
    });
    expect(model.findOne).lastCalledWith({username: 'hantsy'});
    expect(model.findOne).toBeCalledTimes(1);
  });
});

UserService depends on a Model<User>, use a provider to mock it by jest mocking feature. Using jest.spyOn method, you can stub the details of a methods, and watch of the calling of this method.

Let's move to AuthModule.

With @nestjs/passpart, it is simple to set up your passport strategy by extending PassportStrategy, we will create two passport strategies here.

LocalStrategy to handle authentication by username and password fields from request.
JwtStrategy to handle authentication by given JWT token header.

Simplify , generate two files by nest command line.

nest g class auth/local.strategy.ts --flat
nest g class auth/jwt.strategy.ts --flat

Firstly, let's implement the LocalStrategy.

@Injectable()
export class LocalStrategy extends PassportStrategy(Strategy) {
  constructor(private authService: AuthService) {
    super({
      usernameField: 'username',
      passwordField: 'password',
    });
  }

  validate(username: string, password: string): Observable<any> {
    return this.authService
      .validateUser(username, password)
      .pipe(throwIfEmpty(() => new UnauthorizedException()));
  }
}

In the constructor, use super to provide the essential options of the strategy you are using. For the local strategy, it requires username and password fields.

And the validate method is used to validate the authentication info against given info, here it is the username and password provided from request.

More details about the configuration options and validation of local strategy, check passport-local project.

In AuthService, add a method validateUser.

@Injectable()
export class AuthService {
  constructor(
    private userService: UserService,
    private jwtService: JwtService,
  ) {}

  validateUser(username: string, pass: string): Observable<any> {
    return this.userService.findByUsername(username).pipe(
      map(user => {
        if (user && user.password === pass) {
          const { password, ...result } = user;
          return result;
        }
        return null;
      }),
    );
  }
}

In the real application, we could use a crypto util to hash and compare the input password. We will discuss it in the further post.

It invokes findByUsername in UserService from UserModule. Imports UserModule in the declaration of AuthModule.

@Module({
  imports: [
    UserModule,
 	...]
    ...   
})
export class AuthModule {}

Let's create a method in AppController to implement the authentication by given username and password fields.

@Controller()
export class AppController {
  constructor(private authService: AuthService) {}

  @UseGuards(LocalAuthGuard)
  @Post('auth/login')
  login(@Req() req: Request): Observable<any> {
    return this.authService.login(req.user);
  }
}

It simply calls another method login in AuthService.

@Injectable()
export class AuthService {
  constructor(
    private userService: UserService,
    private jwtService: JwtService,
  ) {}
  //...
  login(user: Partial<User>): Observable<any> {
    const payload = {
      sub: user.username,
      email: user.email,
      roles: user.roles,
    };
    return from(this.jwtService.signAsync(payload)).pipe(
      map(access_token => {
        access_token;
      }),
    );
  }
}

The login method is responsible for generating a JWT based access token based on the authenticated principal.

The URI path auth/login use a LocalAuthGuard to protect it.

@Injectable()
export class LocalAuthGuard extends AuthGuard('local') {}

Let's summarize how local strategy works.

When a user hits auth/login with username and password, LocalAuthGuard will be applied.
LocalAuthGuard will trigger LocalStrategy , and invokes its validate method, and store the result back to request.user.
Back the controller, read user principal from request, generate a JWT token and send it back to the client.

After logging in, the access token can be extracted and put into the HTTP header in the new request to access the protected resources.

Let's have a look at how JWT strategy works.

Firstly implement the JwtStrategy.

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      ignoreExpiration: false,
      secretOrKey: jwtConstants.secret,
    });
  }

  validate(payload: any) :any{
    return { email: payload.email, sub: payload.username };
  }
}

In the constructor, there are several options configured.

The jwtFromRequest specifies the approach to extract token, it can be from HTTP cookie or request header Authorization .

If ignoreExpiration is false, when decoding the JWT token, it will check expiration date.

The secretOrKey is used to sign the JWT token or decode token.

In the validate method, the payload is the content of decoded JWT claims. You can add custom validation based on the claims.

More about the configuration options and verify method, check passport-jwt project.

In the declaration of AuthModule , imports JwtModule, it accept a register method to add initial options for signing the JWT token.

@Module({
  imports: [
     // ...
    JwtModule.register({
      secret: jwtConstants.secret,
      signOptions: { expiresIn: '60s' },
    }),
  ],
  providers: [//..., 
      LocalStrategy, JwtStrategy],
  exports: [AuthService],
})
export class AuthModule {}

Similarly create a JwtAuthGuard, and register it in the providers in AuthModule.

@Injectable()
export class JwtAuthGuard extends AuthGuard('jwt'){}

Create a method to read profile of the current user.

@Controller()
export class AppController {
  constructor(private authService: AuthService) {}
  
  //...  
  @UseGuards(JwtAuthGuard)
  @Get('profile')
  getProfile(@Req() req: Request): any {
    return req.user;
  }
}

Let's review the workflow of the JWT strategy.

Given a JWT token XXX, access /profile with header Authorization:Bearer XXX.
JwtAuthGuard will trigger JwtStrategy, and calls validate method, and store the result back to request.user.
In the getProfile method, send the request.user to client.

If you want to set a default strategy, change PassportModule in the declaration of AuthModule to the following.

@Module({
  imports: [
    PassportModule.register({ defaultStrategy: 'jwt' }),
    //...
})
export class AuthModule {}

There are several application lifecycle hooks provided in Nestjs at runtime. In your codes you can observe these lifecycle events and perform some specific tasks for your application.

For example, create a data initializer for Post to insert sample data.

@Injectable()
export class UserDataInitializerService
  implements OnModuleInit, OnModuleDestroy {
  constructor(@InjectModel('users') private userModel: Model<User>) {}
  onModuleInit(): void {
    console.log('(UserModule) is initialized...');
    this.userModel
      .create({
        username: 'hantsy',
        password: 'password',
        email: 'hantsy@example.com',
      })
      .then(data => console.log(data));
  }
  onModuleDestroy(): void {
    console.log('(UserModule) is being destroyed...');
    this.userModel
      .deleteMany({})
      .then(del => console.log(`deleted ${del.deletedCount} rows`));
  }
}

More info about the lifecycle hooks, check the Lifecycle events chapter of the official docs.

Run the application

Open your terminal, run the application by executing the following command.

npm run start

>curl http://localhost:3000/auth/login -d "{\"username\":\"hantsy\", \"password\":\"password\"}" -H "Content-Type:application/json"
>{"access_token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cG4iOiJoYW50c3kiLCJzdWIiOiI1ZjJkMGU0ODZhOTZiZTEyMDBmZWZjZWMiLCJlbWFpbCI6ImhhbnRzeUBleGFtcGxlLmNvbSIsInJvbGVzIjpbIlVTRVIiXSwiaWF0IjoxNTk2Nzg4NDg5LCJleHAiOjE1OTY3OTIwODl9.4oYpKTikoTfeeaUBoEFr9d1LPcN1pYqHjWXRuZXOfek"}

Try to access the /profile endpoint using this access_token.

>curl http://localhost:3000/profile -H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cG4iOiJoYW50c3kiLCJzdWIiOiI1ZjJkMGU0ODZhOTZiZTEyMDBmZWZjZWMiLCJlbWFpbCI6ImhhbnRzeUBleGFtcGxlLmNvbSIsInJvbGVzIjpbIlVTRVIiXSwiaWF0IjoxNTk2Nzg4NDg5LCJleHAiOjE1OTY3OTIwODl9.4oYpKTikoTfeeaUBoEFr9d1LPcN1pYqHjWXRuZXOfek"
{"username":"hantsy","email":"hantsy@example.com","id":"5f2d0e486a96be1200fefcec","roles":["USER"]}

Grab the source codes from my github, switch to branch feat/auth.