Forem: Rajesh T

Shallow copy vs Deep copy of JavaScript object

Rajesh T — Thu, 08 Oct 2020 08:30:05 +0000

https://www.linkedin.com/pulse/copy-object-rajesh-t

Sharing data between routed components in Angular 10

Rajesh T — Thu, 23 Jul 2020 07:04:10 +0000

https://www.linkedin.com/pulse/passing-data-between-components-routing-rajesh-t

JavaScript compiler , Scope & TDZ in depth

Rajesh T — Fri, 15 May 2020 07:28:15 +0000

JavaScript is a compiled & interpreted language

Most of the beginners can confuse about this statement. When we are coming from C, C++ background, where the those compilers can compile our code into low level, the JavaScript compiler is different than that.

To understand the role of compiler in JavaScript,We should know about roles of JavaScript Engine.

Now let us understand the role of compiler with an example.

var data=100;

It is variable declaration and initialization.Even though it is appearing as single statement,Actually,
" It is combination of two different actions which can occur at two different situations "

Action-1:

when compiler encountering "var a", then ,it asks scope,to see a variable "a" already existed for that particular scope collection .
If it is already there,the compiler ignores the declaration and moves on.
In this example, the variable is global and not already existed, so the compiler asks Scope to declare a variable in its Scope collection
Compiler then produces code for Engine to later execute, to handle the a = 2 assignment. That means assignment(data=100) will be done during execution

So, the scope of a variable is decided during compilation time and assignment will be done during execution time


    
var data=100;
return data;

The same thing will be happened to a function also. That means the function declaration will be done at a specific scope during compilation and assignment of function definition will be done during execution.


    
var testFunction=function(){
       return "testFunction called";
}

testFunction();

Note: The JS engine compiles your code sometimes during execution,especially when dealing with function execution

With this knowledge,let us try the following example.


    
return a;
var a=100;

Here, actually, we expected an error, because we returned the value of variable "a" before it is even declared. But surprisingly, it returned "undefined" which is default value of a variable.This is because, the scope of variable a is declared during compilation and also initialized with "undefined". That why,it has returned "undefined" instead of error. That means, the variable declaration is " Hoisted ".

Now let us observe the following


    
return a;

It has generated "Reference Error" ,because RHS lookup failure.It means,it search for the value of a variable which is not yet declared. So, that variable declaration is not available at its Scope .

The same thing would be happened with functions too.


    
//calling function before declaration
//but the declaration will be hoisted
testFunction();
 function testFunction(){
      console.log("test function called");
}

But when we assign a function to a variable, the that variable will be hoisted and generates Type error


    
//calling function before declaration
//but the declaration will be hoisted
testFunction();
 var testFunction=function (){
      console.log("test function called");
}

Temporal Dead Zone

Here is the MDN’s explanation of the temporal dead zone:
In ECMAScript 2015, let bindings are not subject to Variable Hoisting, which means that let declarations do not move to the top of the current execution context. Referencing the variable in the block before the initialization results in a ReferenceError (contrary to a variable declared with var, which will just have the undefined value). The variable is in a “temporal dead zone” from the start of the block until the initialization is processed

To understand this lengthy statement, first we should know the difference between the old one ,called "var" and the "let" which was introduced in ES6.

Variables declared by "var" has Function scope and those declared with "let" has Block scope


    
var marks=90;
var testFunction=function(){
       if(marks>80){
       let status="First grade"
       return status;
       }
}

testFunction();

Here the variable "marks" is in global scope which can be known to all functions of that file. But the variable "status" has Block scope and known only to if block . When we tried to access "status" from outside of if block, it generates Refference error


    
var marks=90;
var testFunction=function(){
       if(marks>80){
       let status="First grade"
   }

return status;
}

testFunction();

Now, let us see about TDZ of "let". Once we revisit the the definition of TDZ,"let bindings are not subject to Variable Hoisting". That means like "var", the variables declared with "let" will not be hoisted. That means no initialization will be done automatically like "var" with "undefined".


    
let a=100;
return a;

But, because of TDZ, the variables declared with "let" will not be initialized. Because of this fact, when we try to access then before their initialization we will get Reference error


    
return a;
let a=100;

Hope this brief discussion helped you to understand the basics in clear way.

Understanding async and await in JavaScript

Rajesh T — Sun, 10 May 2020 08:49:46 +0000

Before reading this article one should have good understanding of callbacks,Promises of JavaScript.
If you not ware of them still,i recommend you to go through my articles
callbacks
Promises

Let us see the definition of async and await from documentation

"An async function is a function declared with the async keyword. Async functions are instances of the AsyncFunction constructor, and the await keyword is permitted within them. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains"

That means async and await are developed based on promises. One can write code to work asynchronously using async and await very easily and code is in very clean format.

async

Let us understand async first.
Consider the following function.


    
async function test(){

}
console.log(test())

It returns a Promise object whose status is "resolved" and value is "undefined".
That means an async function returns promise.

Let us return some value by this function


    
async function test(){
       return 100;
}
test().then((value)=>value)

Now the value of promise object is 100.

It is same as explicitly returning promise like below


    
async function test(){
       return Promise.resolve(100);
}
test().then((value)=>value)

Now, we are very clear about await function.Let us focus on async.

await

"Async functions can contain zero or more await expressions. Await expressions suspend progress through an async function, yielding control and subsequently resuming progress only when an awaited promise-based asynchronous operation is either fulfilled or rejected"
That means "an await expression" suspends progress until the async function of that expression completes its execution.
syntax:
let value=await promise;

Let us understand this with an example


    
function waitForTaskStatus(){
   return new Promise((resolve,reject)=>{
    setTimeout(() => {
        resolve("task completed")
    }, 2000);
   })
}

async function test(){
    console.log("waiting for task status")
    let status=await waitForTaskStatus();
    return status;
}
test();

We just experienced asynchronous nature of await expression which suspends the progress until the "waitForTaskStats()" function is executed.Then only the rest of statements of "test() function" will get chance to execute.

By using "await" ,we can avoid calling "then()" on promise object to deal with its resolve status.

The await keyword is only valid inside async functions. If you use it outside of an async function's body, you will get a SyntaxError.

The purpose of async/await is to simplify the syntax necessary to consume promise-based APIs. The behavior of async/await is similar to combining generators and promises.

Now let us implement the use what i considered in my
article on callbackscallbacks ,
article on Promises
which is " find big number of given two numbers,add 100 to to it and subtract 10 from the result ". Let us implement the same using async and await.


    
function finBig(first,second){
    return new Promise((res)=>{
        setTimeout(() => {
            if(first>second|| first==second){
                console.log("big number is ",first);
                res(first);
            }
            else{
                console.log("big number is ",second);
                res(second);
            }
        }, 2000);


});

}

function incrementResultBy100(bigNumber){
    return new Promise((res)=>{
        let bigNUmberAddedBy100=bigNumber+100;
        console.log("big number after added with 100 is  is ",bigNUmberAddedBy100);
        res(bigNUmberAddedBy100);

    }
)}

function decreaseResultBy10(bigNUmberAddedBy100)
{
    return new Promise((res)=>{
        setTimeout(() => {
            let result=bigNUmberAddedBy100-10;
          //  console.log("result after decrement of 10 is  is ",result);
             res(result);
        }, 1000);


});

}

function test(){
return finBig(100,200).then((bigNumber)=>{
return incrementResultBy100(bigNumber)

}).then((bigNUmberAddedBy100)=>{
return decreaseResultBy10(bigNUmberAddedBy100);

}).then(result=>{
console.log("final result  after decreasing 10 is ",result)

}).catch((err)=>{console.log("err is ",err)});

}

test();

Now, let us rewrite the above using async and await which can be more clean like below


    
function finBig(first,second){
    return new Promise((res)=>{
        setTimeout(() => {
            if(first>second|| first==second){
                console.log("big numbe is ",first);
                res(first);
            }
            else{
                console.log("big numbe is ",second);
                res(second);
            }
        }, 2000);


});

}

function incrementResultBy100(bigNumber){
    return new Promise((res)=>{
        let bigNUmberAddedBy100=bigNumber+100;
        console.log("big number after added with 100 is  is ",bigNUmberAddedBy100);
        res(bigNUmberAddedBy100);

    }
)}

function decreaseResultBy10(bigNUmberAddedBy100)
{
    return new Promise((res)=>{
        setTimeout(() => {
            let result=bigNUmberAddedBy100-10;
          //  
             res(result);
        }, 1000);


});

}

async function test(){
    try{
    const bigNumber=await finBig(1000,200);
    const bigNUmberAddedBy100=await incrementResultBy100(bigNumber);
    const result=await decreaseResultBy10(bigNUmberAddedBy100);
    console.log("result after decrement of 10 is  is ",result);
    }
    catch(err){
        console.log("err is ",err)
    }
}

test()

Summary

The async keyword before a function has two effects:

Makes it always return a promise.
Allows await to be used in it.
The await keyword before a promise makes JavaScript wait until that promise settles, and then:

If it’s an error, the exception is generated — same as if throw error were called at that very place.
Otherwise, it returns the result.

Understanding JavaScript promises

Rajesh T — Thu, 07 May 2020 18:12:32 +0000

https://www.linkedin.com/pulse/promises-javascript-rajesh-t/

Callbacks in JavaScript

Rajesh T — Wed, 06 May 2020 14:35:51 +0000

Most of us feel confusion while learning about asynchronous behavior of JavaScript. In this article i tried to explain need and nature of callbacks with simple examples.

JavaScript is a single threaded language. This means it has one call stack and one memory heap. As expected, it executes code in order and must finish executing a piece code before moving onto the next.

Let us understand the above statement with a very simple example. Let us take a use case as " Find big number in given two numbers and then add 10 to that big number". It is very simple example which can help us to understand asynchronous behavior of JavaScript.

The above use case has two tasks. One is finding big number and second one is adding 10 to the result of first task.

Let me take two functions to implement above two tasks.

var bigNumber;
//function to find big number
function findBig(firstNumber,secondNumber)
{
if(firstNumber>secondNumber){
bigNumber=firstNumber;

}

else if(firstNumber==secondNumber){
bigNumber=firstNumber;

}
else{
bigNumber=secondNumber;
}
}

//function to add 10 to big number
function incrementResultBy10(){
let result=bigNumber+10;
console.log("big number is ",bigNumber);
console.log("result after increment is ",result);
}

//call functions

findBig(100,200);
incrementResultBy10();

we will get output as

big number is 100

result after increment is 110

Everything is as we expected and nothing to confuse. Great....

Now, let us assume as it may take some time to find and to return big number. It is not really happened here. All I/O operations are blocking operations.But to understand callbacks with simple example,let us make this assumption. For this we can use

                      setTimeout(()=>{},timeout)

var bigNumber;

//function to find big number

function findBig(firstNumber,secondNumber)

{

if(firstNumber>secondNumber){

  setTimeout(() => {

              bigNumber=firstNumber;  

  }, 1000);                     

}   

else if(firstNumber==secondNumber){       

    setTimeout(() => {

        bigNumber=firstNumber;      

      }, 1000);        

}

else{

    setTimeout(() => {

        bigNumber=secondNumber;      

      }, 1000); 

}

}

//function to add 10 to big number

function incrementResultBy10(){

let result=bigNumber+10;

console.log("big number is ",bigNumber)

console.log("result after increment is ",result);

}

//call functions

findBig(200,200);

incrementResultBy10();

Now, surprisingly we got output as

big number is undefined

result after increment is NaN

Why??????
What is happening behind ?????

Let us focus on understanding this behavior. As we knew JavaScript is single threaded, with one call stack, it will take support of WebAPI to execute things asynchronously. That means, In this example, the function call( findBig(200,200)) will start execution. Inside of it,setTimeout() method is existed. Then JavaScript will forward that to WebAPI and meanwhile, It will execute the second function call(incrementResultBy10()). Then this function will execute before the first function completes its timeout. That's why we got such result where variable bigNumber is not assigned with actual value until the first function completes its execution.

Let us fix this issue
The solution to this problem is , the second function (incrementResultBy10()) should wait until the first function call(findBig(200,200)) is completed. But how to control flow of execution as per our need. Callbacks are introduced to solve these kind of problems.

Callback function
Callback function is an argument to another function,which will be executed eventually ,when outside function completes its execution.

This can help us to fix the above issue. Now let us refine the findBig(firstNumber,secondNumber) using callback function like below.

function findBig ( firstNumber , secondNumber , callback)

{

if(firstNumber>secondNumber){

    setTimeout(() => {

        callback(firstNumber);  

    }, 2000);      

}   

else if(firstNumber==secondNumber){       

    setTimeout(() => {

        callback(firstNumber);  

    }, 2000);       

}

else{

    setTimeout(() => {

        callback(secondNumber);  

    }, 2000);

}

}

Now the third parameter is "callback" which can receive a function as argument and execute after timeout.Now let us efine second task which can add 10 to big number like below.

function incrementResultBy10(bigNumber){

let result=bigNumber+10;

console.log("big number is ",bigNumber)

console.log("result after increment is ",result)

}

Then pass this function as third argument to findBig() function.

findBig(200,1000,incrementResultBy10)

Now , the second function can be executed only after the completion of findBig() function.Hence the issue is resolved.

Hope you understand the need and behavior of callbacks in JavaScript. With this understanding, we can use callbacks to deal with blocking I/O operations.

Error handling in Express Applicatopn

Rajesh T — Sat, 02 May 2020 06:13:24 +0000

https://www.linkedin.com/pulse/error-handling-express-application-rajesh-t

Storing images in MEAN stack application using "Cloudinary"

Rajesh T — Sat, 02 May 2020 06:12:22 +0000

Saving images and videos of a web application is always challenging, because, performance of application matters.We have 2 options to deal with this

Storing images in database
Storing images in cloud

In this article ,i will explain how to store images and videos in "Cloudinary"

Cloudinary
Cloudinary is a cloud-based service that provides an end-to-end image and video management solution. The Node.js SDK provides simple, yet comprehensive image and video manipulation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing Node.js SDK application.

The following diagrams explains the process of saving User data into database collection.

No alt text provided for this image
It contains 4 steps.

Step-1: Sending user data along with profile image to server by making HTTP POST request

Step-2: Image(or video i.e. a file) of request object can save to cloudinary storage.

Step-3 : Once the file is stored to cloudinary, it returns CDN link of the image

Step-4 : Add the CDN link of profile picture to user data and save it to Database(user collection)

Step-1-Sending user data along with profile image to server by making HTTP POST request
Create register component and register service in Angular application. Then, add registration form to register component.

register.component.html

Name
class="form-control" ngModel>

  <!--username-->

 <div class="form-group">

 <label for="un">Username</label>

 <input type="text" id="un" name="username" class="form-control" ngModel>

 </div>


        <!--password-->

 <div class="form-group">

  <label for="pw">Password</label>

 <input type="text" id="pw" name="password" class="form-control" ngModel>

 </div>




          <!--email-->

<label for="em">Email</label>

<input type="email" id="em" name="email" class="form-control" ngModel>

 <label for="db">Email</label>

 <input type="date" id="db" name="dob" class="form-control" ngModel>

Choose profile image

    <button type="submit" class="btn btn-success">Register</button>

register.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { RegisterService } from '../register.service';
import { Router } from '@angular/router';

@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

//inject register service obj
constructor(private rs:RegisterService,private router:Router) { }

ngOnInit(): void {
}

file: File;

imageUrl: string | ArrayBuffer ="https://bulma.io/images/placeholders/480x480.png";

fileName: string = "No file selected";

//this method receives file content ,read and make it ready for preview

onChange(file: File) {

if (file) {
  this.fileName = file.name;
  this.file = file;

/*The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer,
using File or Blob objects to specify the file or data to read. */

  const reader = new FileReader();

//The readAsDataURL method is used to read the contents of the specified Blob or File
reader.readAsDataURL(file);

/A handler for the load event. This event is triggered
each time the reading operation is successfully completed.
The FileReader.onload property contains an event handler
executed when the load event is fired/

  reader.onload = () => {
    /*  the "result" attribute contains the data as a base64 encoded string.*/

    this.imageUrl = reader.result;

  };
}

}

//this methid is called at form submission
submit(formObj:NgForm)
{
//formdata obj preperation
let formData=new FormData();

//get user object from NgForm object
let userObj=formObj.value;

  //append image to it
  formData.append("photo",this.file);

 //append user object by converting it into string
  formData.append("userObj",JSON.stringify(userObj));


 //pass "formData" object to register service to make HTTP POST request 
  this.rs.doRegister(formData).subscribe((result)=>{

      if( result["message"]=="user existed")
       {
         alert("user already existed");
         formObj.reset();
       }
     if( result["message"]=="user created")
       {
         alert("user created successfully");
         //redirect to login page
         this.router.navigate(['./login']);
       }
  })

}

register.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class RegisterService {

constructor(private hc:HttpClient) { }

doRegister(userObj):Observable
{
//make http post req and returns Observable
return this.hc.post('/user/register',userObj);

}
}

Step-2: Image(or video i.e. a file) of request object can save to cloudinary storage.
Once the FormData object is reached to server.js, it will execute "userApi.js" by sending request object to it.

server.js

//load express function
const exp=require("express");
//create express obj
const app=exp();

const path=require("path");

//connecting ANgular app with this server
app.use(exp.static(path.join(__dirname,'./dist/AngApp9WithMultipleModules')));

//import MongoClient
const mc=require("mongodb").MongoClient;

//import user router

const userApiObj=require("./apis/userApi");

//if path contains '/user'
app.use('/user',userApiObj);
;

//middleware to handle unavailable paths
app.use((req,res,next)=>{
res.send({message:path ${req.url} is not available});
});

//get db url from mongo atlas
var dbUrl = "mongodb+srv://b26:b26@cluster0-z3col.mongodb.net/test?retryWrites=true&w=majority";

mc.connect(dbUrl,{useNewUrlParser:true,useUnifiedTopology:true},(err,client)=>{
if(err)
{
console.log("Err in db connect ",err);
}
else{
//get db connection object
let b26DatabaseObject=client.db("b26db");

    //get collection objects
    let userCollectionObj=b26DatabaseObject.collection("usercollection");
    let adminCollectionObj=b26DatabaseObject.collection("admincollection");


    console.log("db connected..");



    //assign collection objects to "locals" object of "app"
    app.locals.userCollectionObj=userCollectionObj;
    app.locals.adminCollectionObj=adminCollectionObj;



    const port=4000;
    app.listen(port,()=>{ console.log(`server listening on port ${port}`)});


}

});

Now, we need to configure the cloudinary service.For that, register and login into https://cloudinary.com/.

Then it will provide crdentials to use its API and they are "Cloud name","API Key" and "API secret".

Now install and import the following modules at userApi.js

cloudinary

                                           multer-storage-cloudinary

                                           multer

const cloudinary = require("cloudinary");

const cloudinaryStorage = require("multer-storage-cloudinary");

const multer = require("multer");

Now configure cloudinary with its credentials.

cloudinary.config({

cloud_name: "xxxxxxx",

api_key: "xxxxxx",

api_secret: "xxxxxxx",

});

Now, after configuring cloudinary, configure storage at cloudinary.

var storage = cloudinaryStorage({

cloudinary: cloudinary,

folder: "user-profiles",

allowedFormats: ["jpg", "png"],

filename: function (req, file, cb) {

 cb(undefined, file.fieldname + "-" + Date.now());

});

Now,configure multer middleware

var upload = multer({ storage: storage });

Then it will use configured storage location at cloudinary to store file data

Step-3 : Once the file is stored to cloudinary, it returns CDN link of the image
Execute multer middleware before request handling middleware by adding it as second argumant like below.

the method "single(string)" will upload single image to storage location.

const exp = require("express");
const userRouter = exp.Router();

//use body parser middleware
userRouter.use(exp.json());

userRouter.post("/register", upload.single("photo"), (req, res, next) => {

console.log("req body is ",req.body)

/multer middleware will execute first before req handling middleware
save image to cloudinary and get CDN link in req.file.secure_url property/

console.log("url is ", req.file.secure_url);
console.log("user data is ", JSON.parse(req.body.userObj));

//now parse userObj and assign to req.body

req.body=JSON.parse(req.body.userObj); 


//add CDN link of profile image to req.body


req.body.profileImageUrl= req.file.secure_url;

// write user create logic here..............................

}

Step-4 : Add the CDN link of profile picture to user data and save it to Database(user collection)
The following Code contains user registration logic

userRouter.post("/register", upload.single("photo"), (req, res, next) => {

console.log("req body is ",req.body)
console.log("url is ", req.file.secure_url);
console.log("user data is ", JSON.parse(req.body.userObj));

req.body=JSON.parse(req.body.userObj);

req.body.imgUrl = req.file.secure_url;

delete req.body.photo;

//get usercollection object from "req.app.locals" object
let userCollectionObj = req.app.locals.userCollectionObj;

//check for a user in user collection with the "username" received from client
userCollectionObj.findOne({ username: req.body.username }, (err, userObj) => {
if (err) {
next(err);
}

//if user is existed
if (userObj != null) {
  res.send({
    message: "user existed",
  });
}

//if user is not existed

else {
  //insert "req.body" into usercollection

  //hash the password
  bcrypt.hash(req.body.password, 7, (err, hashedPassword) => {
    if (err) {
      next(err);
    }


    //replace paint text password with hashedpassword
    req.body.password = hashedPassword;


    //insert req.body to user collection
    userCollectionObj.insertOne(req.body, (err, success) => {
      if (err) {
        next(err);
      }
      res.send({ message: "user created" });
    });
  });
}

});
});

Now the user collection of database contains user object will all user data along with CDN link of his profile image.

Storing images in MEAN stack application using "Cloudinary"

Rajesh T — Mon, 27 Apr 2020 07:04:08 +0000

https://www.linkedin.com/pulse/storing-images-mean-stack-application-using-cloudinary-rajesh-t/

Connecting Angular application with Nodejs backend

Rajesh T — Sat, 25 Apr 2020 14:40:35 +0000

In this article, i will explain ,how to connect Angular Application with Nodejs backend.

When we create a new angular application using CLI tool, we will be provided with live development server to run that application. It will listen to port number 4200 by default.

When we send request to live development server from browser as http://127.0.0.1:4200 then it will send the JavaScript bundles of Angular application as response.That server is enough to run and test angular application.

When we implement server side services,we can use web server/HTTP server like Apache tomcat. But when we use NodeJS as backend technology,it allows to create HTTP server instead of using third party web servers.

Creating HTTP server in NodeJS
We can use either "http" module or "express" module to create a HTTP Server .Express is a web application framework which run on top of NodeJS. It is combination of multiple middlewares which can help developer to create efficient server side services of a web application.Let us create an HTTP server using "express" module.

          //load express module                               
                  const express=require("express");


          //call function loaded to "express" variable to get express object
                   const app=express();


          //assign port number
                app.listen(3000,()=> {
                                 console.log("server starting on port 3000");
                                     }

Now ,save it as "server.js" and can start the server by running following command.

                         node server.js

Now, once the HTTP server is ready ,then we can focus on connecting Angular application with this server. We know that Angular is written in TypeScript .SO first we need to create JavaScript bundles by transpiling the Angular app.

The ng serve command is intentionally for fast, local and iterative developments and also for builds, watches and serves the application from a local CLI development server.

The ng build command is intentionally for building the apps and deploying the build artifacts. It is also possible to run this command in watch mode as "ng build --watch" which can rebuild the angular app automatically after modifications.

When we run "ng build" command,then it will create a folder "dist" at root level of application and a sub folder in it with the same name of application.In side of that sub folder it places JavaScript bundles of Angular application. One can find reason for "dist" folder creation in "angular.json" file.

"options": {

         "outputPath": "dist/<name-of-application>",

......................................................

}

Now it is the time to connect the content of " dist " folder with HTTP server that we created using "express" module above.

In express module, a method called static() is existed to serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.The function signature is

                      express.static(root, [options])

The root argument specifies the root directory from which to serve static assets.Now, we need to join the paths of server and "dist" folder which contains static content as JavaScript bundles. For this ,we use core module of NodeJS called "path". This module has method to join the paths.

           express.static(path.join( __dirname,'./dist/<Sub-folder-name>));

"__dirname" is the directory name of the current module( i.e. server.js).

Now ,inform to express application to use this.

  app.use (express.static(path.join( __dirname,'./dist/<Sub-folder-name>)));

Hence the Angular app is connected with Nodejs backend. Now start the HTTP server and make a request from browser as

                      http://127.0.0.1:3000

Now the HTTP server will send the "JavaScript bundles" of angular app as response to client.

Token based Authentication in ExpressJS Application

Rajesh T — Fri, 24 Apr 2020 07:15:55 +0000

HTTP is a stateless protocol. That means ,it cannot maintain state of previous requests. A web application can contain some un-protected routes and some protected routes. The Un-protected routes can be accessed by any user. But protected routes can be accessed only by Authorized users.
A user can prove his authorization by submitting his credentials (username and password) for every request he makes which is practically panic. Once the server receives the user credentials, It should check with “user data” in database for correctness of user credentials. This is another nightmare which can degrade the application’s efficiency.
To overcome this problem, the concept of authentication is introduced. It works like below.

When the user submits his credentials ,then the server will verify them.
a. If username is not matched,Then it will send “invalid username” to client
b. If password is not matched,then it will send “invalid password” to client
If username and password are matched, then the server has to create either SessionID or JWT token with respect to that user and can send it as response.

(Note: You can find difference between Session based authentication and Token based authentication at
https://medium.com/@sherryhsu/session-vs-token-based-authentication-11a6c5ac45e4 )
Here ,we are using Token based authentication.

Json web token(JWT)

JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA.

JSON Web Tokens are useful for:
Authorization
Information Exchange

JSON Web Token structure

JSON Web Tokens consist of three parts separated by dots (.), which are:
• Header
• Payload
• Signature

Therefore, a JWT typically looks like the following.
xxxxx.yyyyy.zzzzz

Header

The header typically consists of two parts: the type of the token, which is JWT, and the signing algorithm being used, such as HMAC SHA256 or RSA.
For example:

{
"alg": "HS256",
"typ": "JWT"
}

Then, this JSON is Base64Url encoded to form the first part of the JWT.

Payload

The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional data
Ex:
{
"sub": "1234567890",
"name": "John Doe",
"iat": 1516239022
}

The payload is then Base64Url encoded to form the second part of the JSON Web Token.

Do note that for signed tokens this information, though protected against tampering, is readable by anyone. Do not put secret information in the payload or header elements of a JWT unless it is encrypted

Signature

To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that.
{
"sub": "1234567890",
"name": "John Doe",
"iat": 1516239022
}

In authentication, when the user successfully logs in using their credentials, a JSON Web Token will be returned. Since tokens are credentials, great care must be taken to prevent security issues. In general, you should not keep tokens longer than required.

jsonwebtoken module

To create JWT token, we can use a module “jsonwebtoken”.
It has a method to encode token.
sign(payload ,secret ,callback);
We can add time duration to the token using “expiresIn” property.
Eg: 60, "2 days", "10h", "7d". A numeric value is interpreted as a seconds count. If you use a string be sure you provide the time units (days, hours, etc), otherwise milliseconds unit is used by default ("120" is equal to "120ms")
Algorithm is HS256 by default.

Let us consider the following Request handler which implements the above discussion.

const exp = require("express");
const userRouter = exp.Router();
const jwt = require("jsonwebtoken");

userRouter.post("/login", (req, res, next) => {
//get usercollection object from "req.app.locals" object
let userCollectionObj = req.app.locals.userCollectionObj;

//compare username
userCollectionObj.findOne({ username: req.body.username }, (err, userObj) => {
if (err) {
next(err);
}
//if user obj is null,then send "invalid username" to client
if (userObj == null) {
res.send({ message: "invalid username" });
}
//if user obj is not null,compare passwords
else {
bcrypt.compare(req.body.password, userObj.password, (err, isMatched) => {
if (err) {
next(err);
}
//if passwords are not matched
if (isMatched == false) {
res.send({ message: "invalid password" });
}
//if passwords are matched
else {
//create a JWT token and send it as response to client
jwt.sign(
{ username: userObj.username },
"abcdef",
{ expiresIn: 120 },
(err, signedToken) => {
if (err) {
next(err);
}
res.send({
message: "user logged in successfully",
token: signedToken,
});
}
);
}
});
}
});
});

Handling Errors in Express Application

Rajesh T — Thu, 23 Apr 2020 13:49:06 +0000

Error Handling refers to how Express catches and processes errors that occur both synchronously and asynchronously. Express comes with a default error handler so you don’t need to write your own to get started.

An error can be occurred in an Express application in the following two cases.
1.When requested route is not found in server
2.When the request handling middle ware generates an error.

Handling unavailable routes

Express Application creates a routing table in the order of route handlers in the application. When a client makes a request,It can start comparing the request handlers in the order of they derived.
If no match found,then it returns an HTML response with error message in it. We can handle this error by adding a middleware as last one in the application.

app.use( (req, res, next) = > {
res.send(`path  ${ req.url } of type request ${ req.method }is not found`);

});

This middleware function can execute for every client’s request. So , by placing this as last one,we can make it respond only for unavailable paths.

Handling error of request handling middlewares

Whenever an error is occurred ,the default Error handling middleware of express can deal with that.
The default error handling middleware take four objects like below.

    (error, request , response , next )=>{}

When an error is occurred in execution of request, the Express creates an Error objects and handover it to default error handling mechanish by suspending the execution rest of code in that request handler.
One can throw an Error object to that default error handler by using

            let err=new Error(“error message”);
    next(err);  //this will call error handling middleware

Note: next() will call next middleware in the list where as next(err) will call error handling middleware

Now add the following error handling middleware as last one in the list and just above list() method.

        app.use( (err , req , res , next )= > { } );

So the final order of route handlers in express app should like below

    //write all request handlers
    //write middleware to deal with unavailable paths
        app.use( (req, res, next) = > {
res.send(`path  ${ req.url } of type request ${ req.method }is not found`);

});

    //write error handling middleware
    app.use( (err , req , res , next )= > {
console.log(err.stack);
res.send(“something went wrong!!!!”);

} );
//assign port number
app.listen(some port number here);