Skip to main content

Posts

Showing posts from October, 2022

Part-6 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

The main objectives of this article are: Create A HTTP Delete Endpoint In NestJS App. Consume The Delete Endpoint in ReactJS App. Create A HTTP Delete Endpoint In NestJS App: Let's implement the HTTP Delete Endpoint in the NestJS Application. Let's implement the delete operation logic in 'EmployeeService'. NestJS_App/src/employee/employee.service.ts: async delete(id: string) { await this.employeeModel.findByIdAndRemove(id); } Here 'findByIdAndRemove()' method deletes the document from the MongoDB collection. Let's add the HTTP Delete endpoint in our 'EmployeeController'. NestJS_App/src/employee/employee.controller.ts: import { Body, Controller, Delete, Get, Param, Post, Put } from '@nestjs/common'; import { EmployeeService } from './employee.service'; import { Employee } from './schema/employee-schema'; @Controller('employee') export class EmployeeController { constructor(private employeeService: EmployeeServi

Part-5 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

The main objectives of this article are: Create A Get By Id HTTP Get Endpoint In NestJS. Create A HTTP Put Endpoint In NestJS. Consume NestJS HTTP Put Endpoint From The ReactJS Create A Get By Id HTTP Get Endpoint In NestJS: Let's create a get by id HTTP Get Endpoint. This endpoint is generally to fetch the record that needs to be edited. In our 'EmployeeService' let's implement logic to fetch a document by the 'id' value. NestJS_App/src/employee/employee.service.ts: import { Injectable } from '@nestjs/common'; import { InjectModel } from '@nestjs/mongoose'; import { Model } from 'mongoose'; import { Employee, EmployeeDocument } from './schema/employee-schema'; // existing code hidden for display purpose @Injectable() export class EmployeeService { constructor( @InjectModel(Employee.name) private employeeModel: Model<EmployeeDocument>, ) {} async getByid(id: string) { return await this.employeeModel.findById

Part-4 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

The main objectives of this article are: Create A HTTP Post Endpoint In The NestJS Application. React App To Consume HTTP Post Endpoin Create A HTTP Post Endpoint In The NestJS Application: In our service file implement the logic to save a new document to the MongoDB. NestJS_App/src/employee/employee.service.ts: async create(employee: Employee) { const newEmployee = new this.employeeModel(employee); return await newEmployee.save(); } Here our payload 'employee' is converted to the MongoDB collection model document type using the 'employeeModel'  and then invoking the 'save()' method that saves our new document into the MongoDB collection. Let's add the HTTP Post method to our controller. NestJS_App/src/employee/employee.controller.ts: import { Body, Controller, Get, Post } from '@nestjs/common'; import { EmployeeService } from './employee.service'; import { Employee } from './schema/employee-schema'; @Controller('employe

Part-3 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

The main objectives of this article are: Create HTTP Get Endpoint In NestJS Application. Install & Configure React Routing Library In ReactJS Application. Create React Component 'AllEmployee' Install Axios Library Create HTTP Get Endpoint In NestJS Application: In 'EmployeeService' implement logic to fetch data from the MongoDB. NestJS_App/src/employee/employee.service.ts: import { Injectable } from '@nestjs/common'; import { InjectModel } from '@nestjs/mongoose'; import { Model } from 'mongoose'; import { Employee, EmployeeDocument } from './schema/employee-schema'; @Injectable() export class EmployeeService { constructor( @InjectModel(Employee.name) private employeeModel: Model<EmployeeDocument>, ) {} async getAll() { return await this.employeeModel.find().exec(); } } The 'find()' method fetches all the documents from the MongoDB collection. Let's create a controller like 'EmployeeControll

Part-2 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

The main objectives of this article are: MongoDB MongoDB Atlas Cloud Service. MongoDB ConnectionString. MongoDB: MongoDB is a document-oriented database, which is classified as a NoSQL database. In MongoDB, tables are called collections, and records are called documents. It stores data in BSON format. The BSON is the binary serialization of JSON. The reading of data from MongoDB is faster when compared to the Relational Database. But MongoDB doesn't have relation between the collections. We can't declare NoSQL is better than SQL or vice-versa. So depending on the application requirement either select NoSQL or SQL  or Both databases. MongoDB Atlas Cloud Service: For our demo to use MongoDB let's use the MongoDB Atlas Cloud Service. (Step 1) Let's go to the MongoDB Atlas website and then signup for 'Free'(Pricing Package). (Step 2) After registration creates a free cluster and next land on the dashboard page as below. (Step 3) Now to create a MongoDB collection(t

Part-1 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

The main objectives of this article are: NestJS And ReactJS Application Communication. NestJS. Create NestJS Application. Debug The NestJS Application From Visual Studio Code. ReactJS Create ReactJS Applicaiton Install React Bootstrap Add React Bootstrap Menu. NestJS And ReactJS Application Communication: The user request the ReactJS application(single page application) then js files are downloaded and then runs the application on the browser. Since ReactJS is a single-page application it depends on API for data to display. So ReactJS request the NestJS endpoint through HTTP requests. NestJS API that runs at the server gives the JSON response. NestJS API communicates with the database for fetching and storing the data. NestJS: NestJS is a framework used to develop the server-side application. NestJS is built on top of the Node.js framework just like Express. It is a combination of Progressive Javascript, Object-Oriented Programming, Functional Programming, and Functional Reactive P

ReactJS(v18) JWT Authentication Using HTTP Only Cookie

In this article, we will implement the ReactJS application authentication using the HTTP-only cookie. HTTP Only Cookie: In a SPA(Single Page Application) Authentication JWT token either can be stored in browser 'LocalStorage' or in 'Cookie'. Storing the JWT token inside of the cookie then the cookie should be HTTP Only. The HTTP-ONly cookie nature is that it will be only accessible by the server application. Client apps like javascript-based apps can't access the HTTP-Only cookie. So if we use the authentication with HTTP-only JWT cookie then we no need to implement the custom logic like adding authorization header or storing token data, etc at our client application. Because once the user authenticated cookie will be automatically sent to the server by the browser on every API call. Authentication API: To authenticate our client application with JWT HTTP-only cookie, I developed a NetJS(which is a node) Mock API. Check the GitHub link and read the document on G