DEV Community: renam singla

WEBSOCKETS

renam singla — Wed, 15 Oct 2025 21:09:49 +0000

The WebSocket API makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive responses without having to poll the server for a reply

The WebSocket protocol is the underlying communication standard, while the WebSocket API is the interface that developers use in client-side applications (like web browsers) to leverage the capabilities of that protocol.

The client and the server can communicate without the handshake.
The communication needs to started by the client generally.
WebSocket servers are used for real time communication (provide full duplex communication).
It is persistent in nature, once connection made, it remains.

Sockets are -

In-build
A library called Socket.IO

SOCKET.IO

It is build on WebSocket only.
Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server.
In this http also works along with the sockets functionality.
Socket.IO internally uses sockets creating WebSocket connections and using eventListeners for its working. That is-

// Create WebSocket connection.
const socket = new WebSocket("ws://localhost:8080");

// Connection opened
socket.addEventListener("open", (event) => {
  socket.send("Hello Server!");
});

// Listen for messages
socket.addEventListener("message", (event) => {
  console.log("Message from server ", event.data);
});

Socket.IO Working-

Client and server connects through a pipeline, not requiring handshake, where server can send data to the client and client can send data to server as well.

Hence, not requiring get or post request for communication

And that very pipeline is called SOCKET

Each socket has an id to refer to the client connected to the server.

On the server side,

server manages 1) request response cycle and 2) sockets as well.

To use sockets on server side-

npm install socket.io

The socket(pipeline) is used on the client and the server side with the help of the object of socket having their id

💡

IO -The group of sockets on server side is called io

Hence , when message is send to the io , all the connected cllients receives the message with different id , called BROADCASTING.

NOTE-

When we use sockets, we cannot start express server i.e. app.listen() as it creates a new HTTP server

INITIALIZING SERVER (backend)-

const express = require("express");
const { createServer } = require("http");  //require http
const { Server } = require("socket.io");   //require server from socket.io

const app = express();
const httpServer = createServer(app);   //http gets a refrence of the app
const io = new Server(httpServer, { /* options */ });

io.on("connection", (socket) => {
  // this function works when client is connected to the server
});

httpServer.listen(3000);

-Whenever a client connects to the server , it triggers the event connection , hence using-

io.on("connection",(socket)=>{ //we get an object of socket
            console.log("client connected");
});

USE SOCKET.IO ON FRONTEND-

By default, the Socket.IO server exposes a client bundle at /socket.io/socket.io.js when the server is started.

STEPS-

1- Create a public folder and make index.html inside it.
2- Send the file on the server-

const path=require('path')
app.use(express.static(path.join(__dirname,'public'));

3- The first initiation is to de done by the client by adding the bundle to the index.html file in the script tag by-

<script src="/socket.io/socket.io.js"></script>

4- io named function now will be available to the browser

5- To connect the client to server- io() function needs to be called by the browser, meaning a pipeline is established between the client and the server
6- To do the above step we made js file in the public folder for the frontend.

//in script.js file in the public folder(frontend)
const socket= io();

socket can be accessed from the backend and the frontend as well, they would have same socket.id hence establishing the pipeline.

Sockets Work through Event Triggering from both ends-

(source- documentation of socket.io)

emit function is used to send the message with the name of the event

on function is used to receive (or capturing the event) the message by matching the event name

All the event trigger written in backend are coded inside the io.on() function only where we made "connection" .

CREATE CHAT APPLICATION-

ON FRONTEND- create an input and send message button-

In script.js file of frontend send this input message to the server when button is clicked-

btn.addEventListener('click',(ev)=>{
    socket.emit('chat',{
        data: msg.value //here msg is the id of the input
    })
})

To receive this message on the server-

io.on("connection", (socket) => {
  console.log("client connected", socket.id); 

//   all the event triggering is written in the io.on() function

    socket.on('chat',(chatdata)=>{
        console.log(chatdata.data)
    })
})

To send this message on all the clients including from where it was received we use-io.emit()

io.emit('grpchat',chatdata.data)

and the frontend can receive the message using socket.on() and match the event name and display on the viewport using ul and li -DOM concept.

To broadcast this message to all the clients except from where it was send to the server, we use- socket.broadcast.emit()

socket.broadcast.emit('grpchat',chatdata.data)

OUPTUT FOR BROADCAST-

To disconnect from client side, create a button that would fire the given command on click of it to disconnect the user and the server- socket.disconnect();

To view the full code, visit GitHub- https://github.com/renamsingla/WebSockets

Session Management- Cookies, Session and JWT

renam singla — Fri, 03 Oct 2025 17:48:14 +0000

Since every request to a server is a new request, so for the server to identify whether the request came from the same browser/ user, we use SESSION MANAGEMENT.

In order to identify the user, we use the concept of Cookies, Session, and JWT

COOKIES

The cookies , is a way to identify whether the user is a new user or has visited the website before.

When a client sends a “sign in” request to the server using a form lets say, in response to that server generates the personalised or generic response .
With the response, the server sends a “cookie”, an additional data to the client which stores information about the user which helps to distinguish the user.
Next time , whenever the user makes a get request to the server for that PORT it will also give its cookie with the request to the server , which says, i am the same user that signed in before , hence helps for identification of the authenticated client.
Basically cookie is a medium through which a user can remain logged in as server has information of the user through cookie.

How to set a Cookie?

Cookie stores the user information key-value format, the cookie can be set by-

//user, id and info is an object of cookie
res.cookie('user','123',{
                httpOnly: false, //it allows access to the javascript
                secure: false, //allow over HTTP
                sameSite: 'Strict',
                maxAfe: 65480000 //in sec, it gives the expire time of the cookie
                });

The another way to set a cookie is-
- This is an object of user-data containing the information of the user

const userdata= {
                username,
                id:123
                };

This userdata object then further is JSON.stringify to store is a cookie with the help of function res.cookie()

res.cookie('user', JSON.stringify(userdata),{
                httpOnly: false, //it allows access to the javascript
                });

Here, the object of javascript needs to be changed as a string in order to store it in cookie, as it is not a primitive data type.

SO, LETS SEE HOW WILL COOKIES WORK IN CONTEXT OF AN APPLICATION!!

1. Start a Server -

To start a server , we need to install npm package and express and further use app.listen() function.

For in detail understanding refer to the previous blog- https://dev.to/renam_singla_fb52a400f07e/expressjs-for-beginners-get-post-serving-static-files-577d

2. Declaring the Functionality of the Application

It is important to know what the application will do and understanding of its flow before building it. So let’s start with declaring our functionality, request and the working of the app.

//we need a log-in page, which will give a .html page
app.get('/login', (req,res)=>{

});

//this will set the cookie, with the information send by the user
app.post('/login', (req,res)=>{

});

//we need a profile page, which is accessible to only users having the cookie
//and help in their identification
app.get('/profile',(req,res)=>{

});

//a log-out page which will delete the cookie
app.get('/logout', (req,res)=>{

});

FLOW OF APPLICATION-

3. Create a "LOGIN" page -

Through this page, client can sign in to the application using post request and with it a cookie will be created and send to the browser by the server.

To access this page on browser, we create a GET REQUEST on the server , which will send this file in response using res.sendFile and path.join() function

Here, this get request will give a html file in the same directory.

This inhex.html page contains a form tag, which lets the user “sign in” by giving the asked information .

<body>
    <h1>COOKIES</h1>
    <form action="/login" method="POST">
        <input type="text" name="username" placeholder="add username">
        <button type="submit">login</button>
    </form>
</body>

Further, submitting the form, will send a post request through browser, through which later a cookie will be set.

So , our login page will look like-

But , if cookie already exists, then user must be redirected to the profile-

if (req.cookies.user) {
        return res.redirect('/profile');
    }

4. Set a Cookie-

To set a cookie, we first need to install the cookie package from npm , here we are going to use cookie-parser package.

npm install cookie-parser

And then, require it in the app.js file

As discussed initially , to set a cookie, we use res.cookie() function.

Now, we will first require the “username” send by the user by the form.
Then, create an object for cookie data using that username.
Which will further help to set a cookie after changing it to a string

…when the post request was made on the submission of the form

And since the cookie is set now, the user can have access to /profile URL path

5. Access to “/profile” and Working of it-

Firstly for any user to access 'profile path , it is mandatory to have a cookie, which means they have logged in , otherwise the user should be redirected to the /login path

req.cookies : command helps to read the cookie, by the name- user

app.get('/profile', (req,res)=>{

                if(!req.cookies.user){
                    res.redirect('/login');
                }
});

If cookie exists-

We can have the username on the profile with number of times the user visited/ refreshed the profile url path
For js to require the username from the cookie, we need to parse the cookie
With the above response in res.send(), we will also send a logout button (having /logout path ) if user wants to log out from the application

OUTPUT-

6. Logout from the Application-

When clicked on the logout BUTTON, the '/logout' path will be requested due to <a> tag.

Where we simply empty the cookie string.
Cookie can not be deleted as once set, it cannot be modified from server side, as it is stored by the browser
And since the cookie is empty, the profile page won’t be accessed in future as it requires username and further redirect to the /login .

With the cookies, there is an issue that we have not addressed yet, that they can be manipulated y anyone and hence the user can be changed without any restriction.

To stop this, we use SESSION.

SESSION

The session has a “session map” which will store the object of the session-data, and it will send an “id” in respond which will be stored in cookie rather than the data.
Therefore, no one will have access to the authentication data and it cannot be manipulated anymore.
The session-id will be generated automatically
Hence the session data is stored in the server side and session-Id is only accessible by the cookie.

NOTE- session can be stored in the database as well

1. How to use express-session?

Firstly install express-session npm package, in the terminal-

npm i express-session

Then require it in the js file-

const session= require('express-session');
app.use(session({
    secret: 'notknownbytheuser', //for id generation, secret is required
    resave: false, //do not change the data
    saveUninitialized: true  
    //irrespective of requirement everyone will get a session ID
}))

Secret should not be shared with anyone
saveUninitialized will create an id even before the user has login as default

The express-session do not need to use parser, it manages it by itself

2. Set a session-

On our login page, to set a session-

The user provides a username and the object of that is then required by the session using the POST request.
To set the session and to read as well we use- req.session.user
And in return it creates an unique id by itself

app.post('/login',(req,res)=>{
    const {username}= req.body;

    let userData={
        username,
        count:0
    }

    // setting the session- putting userData in the session
    req.session.user= userData;
    res.redirect('/profile');
})

The Output in the browser, will only show the “id”

For the profile get request-

app.get('/profile', (req,res)=>{
    if(!req.session.user){
         return res.redirect('/login');
    }

    req.session.user.count++;
    let userData= req.session.user;

    res.send(`welcome ${userData.username} with the count: ${userData.count}
        <br> <br>
        <a href='/logout'>
            <button>logout</button>
        </a>`)
})

3. Delete a session-

When clicked on the “logout” button, /logout path is requested-

app.get('/logout',(req,res)=>{
    req.session.destroy(function(error){
        res.redirect('/login');
    })
})

To delete, we use req.session.destroy(function(error)) function which is an error first callback function.

If there is no error it will simply does perform the function otherwise will give an error

LASTLY,

if the server is refreshed, session map will loose its data, hence it is better to store sessions in a database.

JWT- JSON WEB TOKEN

JWT comprises of three things-

Header: type and algorithm
Payload: user information
Signature: having header, payload and secret

We also need JWT secret.

JWT does not go with each request by itself like cookie, it needs to be send with the request.

Here, we will also be requiring cookie to store “token”, hence install that by referring to the above blog.

1. Install JWT-

const jwt= require('jsonwebtoken');

JWT generates a “token” when provided the payload and the JWT secret

Therefore, we have to create a JWT secret as well-

const JWT_SECRET= "decneicnjvbjrgvd";

2. Generate a JWT -

In the post request of the form when submitted the form, we first create a token by-

var token= jwt.sign(userData, JWT_SECRET);

And then this token is stored in the cookie using CookieParser as we did before

res.cookie('token',token,{ 
        httpOnly:true
    } )

So the POST request for /login looks like-

3. Verification of the token -

Before giving access to the profile, it is important to verify that the token exists and if exists , does it matches the user.

first we require the token from the cookie, if it exists then we proceed
The userData then is verified using the “token” and the “secret key”
If it does not matches , the request will be redirected to the /login
This is done using either error first callback function or using try-catch syntax

Now, after the token is verified, we proceed to show the profile to the client.

OUTPUT ON THE BROWSER AND THE TOKEN IN THE COOKIE-

4. Logout -

To logout, we simply empty the cookie, which establishes that the token does not exists

app.get('/logout',(req,res)=>{
    res.cookie('token',"",{
        httpOnly:true
    })
    res.redirect('/login');
})

And then , at /login get request , we first check if the token exists or not.

if the token exists the client is redirected to the profile page only-

With this the working of JWT is completed!!

Anyone interested to view the whole code can check out the GitHub link-

https://github.com/renamsingla/Session_Management

Full-Stack TodoApp: Node.js, Express, MongoDB, and HBS Guide

renam singla — Tue, 23 Sep 2025 16:41:04 +0000

A Todo Application is the easiest web based application that usually each web developer starts their journey with, yet most of the candidates struggle with it.

This simplest application holds many important topics and concept that one needs to understand before diving in the complexity of developing web application for masses.

Through this application we are going to focus on concepts like-

Mongoose (MongoDB)- for storing the data
Handlers- for server side rendering
module.exports concept
Basic CRUD operation functionality to make the app working

FEATURES

Before starting with coding part, it is important to know the working and features of the app-

Adding a todo to the todo app
Getting all the todos on the browser
Deleting a todo from the todos
Getting one todo on the browser

The application needs to have a database to store the todos we will add to our application, for that we will use MongoDB- *mongoose*

MongoDB

MongoDB is a NOSQL database product for storing data as a BSON, a JSON like-format.

To store data it is important to have in our system, one can download it from its official side according to their system compatibility.

Next,

Before we are able to store the data, it is important to have the mongodb server setup

It requires us to create a folder in our project directory, lets name it data and then in terminal write-

mongod --dbpath=data

After running this command, once check if mongodb is running or not-

Go to the browser and give url- http://localhost:27017 ,it should show-

MONGOOSE

Mongoose is a JavaScript object-oriented programming library that creates a connection between MongoDB and the Node.js JavaScript runtime environment

Basically, it is an ODM- Object Data Modelling, in which all things are stored as an object.

To start the server, In terminal-

npm init --y
npm i express 
npm install mongoose

Make a javascript file in the directory

So now, we need to create a connection between Mongodb and our javascript file

To use mongoose, we need models(collections) , which are made with the help of schema

Everything in Mongoose starts with a Schema. Each schema maps to a MongoDB collection and defines the shape of the documents within that collection.

In our application we are going to create a schema for a Todo which will have-

taskName
Description
Id (it is automatically generated by the MongoDB , hence no need to specify)

It is usually better to segregate different functionality of the project , hence we are going to make schemas in new javascript file which is stored in a folder by the name model

here , in schema object we declared an object of data in form of key:value pair where each key having an object with its type and true for required, which means that it is mandatory to give the data , otherwise it will give error and

Now at the end , you must have thought what does module.exports mean?

module.exports

In Node.js, module.exports is a special object available within every JavaScript file,

it allows you to expose specific functionalities (like functions, objects, classes, or primitive values) from a module, making them accessible to other modules in your application.

Hence we can use the Todos.js file and mongoose.model in any other javascript file where it is required.

As mentioned earlier, it is better to use different files for handling different work just like we do with functions.

therefore, in order to separate functionality of each CRUD operation from the routing (working) of it , we make a separate javascript file - todoFun.js

Now, here , we are going to require the Todos.js file that we exported

We are almost set to work on our application, but one thing that we are yet to handle is what we will show on the browser???

For that we will be using handlebars- hbs

HANDLEBARS- hbs

While using serving static file, the data is send to the browser in the chunky manner (i.e. little data is send according to the need) with the help of app.use(express.static()) middleware, but it is not efficient to write backend code

Hence , we use SERVER SIDE RENDERING - sending the whole file at once with the help of handlebars

It helps to throw the index file at once and it is used as .hbs file as with this, HTML file is just not only made on backend but we can use javascript variables as well in the file

For this , install hbs

npm install hbs

WE can access .hbs in js file with the help of res.render , it is a response where client gets index.hbs file.

res.render('index')

In order to use handlebars in our javascript file, we need to set it by-

app.set('view engine','hbs')

Now, in package.json file, dependencies will look like-

Next, create a folder in the project folder by the name views and it will hold our all .hbs files

Now, make index.hbs file which will be send to the client and an error.hbs file if there is something wrong on the backend

At the same time, make a static folder to have style.css file

And, in order to use all of the files, we must require them-

Now your project set up will look something like this-

FRONTEND OF THE APPLICATION

One can create their application with as much creativity as they like, here, we are going to keep it simple to focus more on the functionality

In the index.hbs file will will create a simple template for the app, using <form> tag which will help us later to add new todos and <ul> tag to show the created todos on the browser.
Here the <form> tag has <input> that will help us to add the task name and the description as an input on frontend
The submit <button> will add the todo to our database by the action attribute in the form routing to the given url path.

With the above code of templating and styling, our webpage looks like this-

But the application is a Static application without being able to do any functionality

So, here we start with application CRUD operation functionality making it usable

BACKEND OF THE APPLICATION

Adding a todo to the todo app-

WHEN WE PRESS “ADD TODO” on our webpage after adding task name and its description what happens is-

To add any kind of data, we use POST request
We will add data with the help of form that we made in index.hbs file, which had action that helps us to get a path of post request
This path will have a POST request written in our app.js file
For post request in app.js we call for todoFun.js asynchronously for addTodo function
addTodo will perform the function of adding a todo in our Todos database and further return the message if successfully conducted.
Now, in app.js and performing the async function, the request is redirected to the base url.
Lastly, the newTodo will be added to our database that we can see with the help of “MongoDB Compass”

As we can see, we are directed to base path, so what will it have, can we see the added todo?

YES

As we have written a functionality to get all the todos that has been added explained below.

Getting all the todos on the browser-

To get all the todos , we simply needs to get all the todos in our database and then send it to the index.hbs page to help us show on the page with the help of the list

When a GET request is made on the base url (’/’), the getTodo() function is called in todoFun.js file asynchronously.
The getTodo() function will find() all the todos from database using mongoose ‘find’ function and later return it to the get request where it was called from.
Then the todos that we received will be send to index.hbs file as an object using res.render request.

In index.hbs file, which just not shows a list but let us use javascript variables and working like “for each loops” and “if conditions” with the help of its “moustache” syntax.

We iterate through each todo as t and if t.taskName exists , each todo task-name and description will be added to the li of list in a span tag

On client side, this would look like-

One can apply css as they would like to have their content styled on the webpage

You must be thinking what does this delete button do? Or will we be able to actually delete?

Deleting a todo from the todos-

When we click on the delete button, the get request would be directed to the “delete path”
With the help of req.params we de-structure the id which is unique for each todo
Then we call the delTodo(id) function from todoFun.js file .
This function will delete the todo by using Todos.deleteOne() mongoose function by matching the id .
And later the request is directed to the base url path.

with the help of anchor tag <a> and we will see all the content except that todo that was deleted.

Getting one todo on the browser-

Now, to get just one todo from all the todos,

when we click on the todo of our choice, it will redirect us to a new page having that todo only
This is possible as every todo has unique id provided by the MongoDB, which helps server to identify the todo client need

what we are doing is-

When clicked on the todo (as all todos are stored in anchor tag, they have a href path), it will direct the get request at the /todo/:id path.
Here we will take the id of that one todo using req.params and further call the getTodo function from todoFun file
In that function, it will asynchronously( using async await syntax) will find that one todo by Todos.findOne() mongoose function in the database having same id and return it.
The GET request then render to the index file with that one todo in the object

OUTPUT-

Here, we can notice the url path has changed , hence we are redirected to the new page containing only that one todo.

Hence, our Todo Application is ready with a permanent database helping us to perform basic crud operation so we can keep a check on our todo list.

Hopefully , this was helpful ,if you want to view the whole code -

Here is the GitHub link- https://github.com/renamsingla/TodoApp

Express.js for Beginners: GET, POST & Serving Static Files

renam singla — Thu, 18 Sep 2025 07:18:56 +0000

When building web apps with Node.js, handling requests and sending responses manually can get messy. That’s where Express.js comes in — a lightweight framework that makes it simple to define routes, handle GET and POST requests, and even serve static files like HTML, CSS, and JavaScript.

Express is a node.js web framework(un-opinionated).

It is required:-

Write handlers for requests with different HTTP verbs at different URL paths (routes).
For setting up servers for web applications
To use middleware for tasks like parsing request bodies
Serving static files efficiently

In a traditional data-driven website, a web application waits for HTTP requests from the web browser (or other client). When a request is received the application works out what action is needed based on the URL pattern and possibly associated information contained in POST data or GET data. Depending on what is required it may then read or write information from a database or perform other tasks required to satisfy the request. The application will then return a response to the web browser, often dynamically creating an HTML page for the browser to display by inserting the retrieved data into placeholders in an HTML template.

CREATING A SERVER-

in the terminal of the right directory

npm init --y
npm i express

//install nodemon(just once)
npm install -g nodemon

//create a js file- app.js in the same directory
//to start the server

nodemon app.js

After installing, in order to create a server in our app.js file, we require(import) express module and create an express application.

This app starts a server and listen to the port- 4444 for connection.

const express= require('express');
const app= express();
const PORT= 4444;

app.get('/',(req,res)=>{
        res.send("hello world");
})

app.listen(PORT,()=>{
     console.log(`http://localhost:`+PORT);
})

ROUTE handlers-

Routing refers to how an application’s endpoints (URIs) respond to client requests. For an introduction to routing, see Basic routing.

You define routing using methods of the Express app object that correspond to HTTP methods; for example, app.get() to handle GET requests and app.post to handle POST requests. For a full list, see app.METHOD. You can also use app.all() to handle all HTTP methods and app.use() to specify middleware as the callback function

app.METHOD(PATH, HANDLER)

Where:

app is an instance of express.
METHOD is an HTTP request method, in lowercase.
PATH is a path on the server.
HANDLER is the function executed when the route is matched.

GET REQUEST (res.send, req.query, req.params)-

IT IS USED TO READ DATA

The middle part of the code (the three lines starting with app.get) shows a route definition. The app.get() method specifies a callback function that will be invoked whenever there is an HTTP GET request with a path ('/') relative to the site root. The callback function takes a request and a response object as arguments, and calls send() on the response to return the string "Hello World!"

res.send-

In the app, we have written a GET request- a GET request will read the data on the specified URL path (for ‘/’ means the base path)

Here, res- response and req- request.
res.send is the respond send by the server to the client when client go the url path mentioned

OUTPUT we got when we visited the url(http://localhost:4444/) mentioned-

req.query -

req.query is the request made to the browser to send the data to the server.
Data comes in the object of request(req).
req.query is an object that stores data sent in the URL after a ?. Example: /greet?name=John → { name: 'John' }
And then to access the url in browser we have to give res.send

app.get('/greet',(req,res)=>{
        const{name}=req.query;
        //we have destructured the name from the url path using query parameter
        res.send(`hii after requesting from browser to send
         name- "${name}" to the server`);
        })

OUTPUT after “getting” data from the url path using req.query and showing it on the browser using res.send

req.params-

Now, the another way to get the data be requesting is- req.params

it takes “key/:value” like this.

//in browser url path key/value are written without ':' unlike mentioned 
//in the get request
app.get('/movies/:movie',(req,res)=>{
        const{movie}=req.params;
        res.send(`the data requested using req.params is -${movie}`)
    })

OUTPUT-

GET REQUEST IMPLEMENTATION AFTER STARTING A SERVER USING EXPRESS.JS

POST REQUEST (req.body, middleware)-

IT IS USED TO GIVE SOME DATA (CREATE/ ADD)

The data in POST request is hidden from user as it not shown in the url.
To use post request we used POSTMAN, and the res.send is shown in postman only as it is an alternative for browser
Data of post request is called “Payload”
In backend the data of payload is seen in “body” in postman
Whenever the server is restarted , we lost the added data (by post) hence we need databases.

app.post('/add',(req,res)=>{
        cost {name,id}= req.body;
        console.log(req.body);
        res.send(`new person- ${name}`);

})

In the above code, we are using a POST request, at url ”localhost:4444/add” .If this url exists, its callback function is called.

MIDDLEWARE-

Middleware that only parses urlencoded bodies and only looks at requests where the Content-Type header matches the type option. This parser accepts only UTF-8 encoding of the body and supports automatic inflation of gzip and deflate encodings.

-Functions that run between a request and a response, e.g., parsing request body, authentication, logging.

-Hence it is like a layer or barrier that will run before the user gets the data from the server

-the data added using post was an encoded data send in the request body, hence it needs to be decoded by server.

req.body-

it is used with post request, it requests the data from the body that was added using postman
req.body will also has an object of name and age
Here , the res.send will show us the response in the body of the postman.

Now, to get the data , that was added with the help of the post request, we use-

get request
a way to add data in a data structure (or DOM manipulation, so the data won’t get lost once server restarted)
work in the callback function of post and get request to give and acquire data respectively

OUTPUT IN POSTMAN FOR GET REQUEST-

OUTPUT IN TERMINAL-

OUTPUT IN BROWSER FOR GET -

ERROR-

BUT, once the server is restarted it gives error, because the data get lost that was added using post request, therefore, we require databases

SEND FILE AS A RESPONSE TO A PATH

In order to send a file as a response to the browser (client) , we first need the path to that file on the server. For that we use a built-in module of Node.js called path .

“PATH” module is utilised for working with file and directory path , making it easier to write code independent of system used upon.

const path= require('path')

The function that we will use from path module is- path.join

It joins the path of different file and directory, without making it difficult to connect through concatenation and making it platform independent
path.join function takes the path and file name and join it

const pathOfFile= path.join(__dirname, '/index.html')

here the __dirname is the path to the present directory of the system and joining it with the index.html file present in same directory.

Here, this pathOfFile will help us to locate the file and further send it as a res .

res.sendFile-

To send a file we cannot simply use res.send as it sends a single response but not any file, image or documents ,etc. .

Instead we use an Express.js function - res.sendFile that helps to send static files provided a HTTP response to the client.

app.get('/file',(req,res)=>{
        res.sendFile(path.join(__dirname,'/index.html);
}

As a response on the browser we get-

Here is what we wrote to get this response-

⚠️

But what if our index.html file had style.css file and script .js file linked. Will those also work with in relation to index.html file being requested from our server ?

—NO, because a js and css file, in-fact any file is also a request on the server, hence they also need to be inclusive of the response of the GET request when requested at their path route.

Therefore, we use GET request for all the files that we need as a response using res.sendFile

But what if there are hundreds of files that we want to send to the browser? It doesn't make sense to write a request for each file that needs to be sent, as it's time-consuming and makes it difficult to track which files have been handled.

Therefore we have- SERVING STATIC FILES

SERVING STATIC FILES-

To serve static files such as images, CSS files, and JavaScript files, we use the express.static built-in middleware function in Express.

-Firstly a folder (usually under the name ‘static’) needs to be made in the directory.

-The static folder contains all the files that needs to be requested by the client

-It should have an .html file in order to show the response on the browser

Middleware-

app.use(express.static(path.join(__dirname,'static')));

This middleware is a header, which means, we cannot send a GET request at path (’/’) , because express.static did that for us.

Hence, when we go the http://localhost: ${PORT} , it would launch a .html file that was present in the “static” folder and other linked files like javascript and CSS file.

OUTPUT -

Now, with the help of above knowledge we can create a basic todo app :)