Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Working of Express.js middleware and its benefits

  • Difficulty Level : Expert
  • Last Updated : 17 Jun, 2021

Framework: It is known to be a skeleton where the application defines the content of the operation by filling out the skeleton. For Web development, there is python with Django, java with spring, and For Web development in we have Node.js with Express.js in node.js there is an HTTP module by which we can create an only limited operatable website or web application. In general, the real working of any web application or website is that it is capable to handle any kind of request. Requests may be post, get, delete, and many more like a request for an image, video, etc that’s why Express.js is used as a Framework for Node.js. 

Express.js is a routing and Middleware framework for handling the different routing of the webpage and it works between the request and response cycle.

Working of Middleware Framework:

There are lots of middleware functions in Express.js like Express.js app.use() Function etc. 

Syntax:



app.use(path,(req,res,next))

Parameters: It accepts the two parameters as mentioned above and described below:

  • path: It is the path for which the middleware function is being called. It can be a string representing a path or path pattern or a regular expression pattern to match the paths.
  • callback: It is the callback function that contains the request object, response object, and next() function to call the next middleware function if the response of current middleware is not terminated. In the second parameter, we can also pass the function name of the middleware.

The working cycle of multiple Middleware:

Benefits of using Express.js Middleware:

1. We generally use http.createServer() to create a server and performs request and response according to the information, but we cannot check what type of request made by the client so that we can perform operations according to the request. 

2. Express.js contains multiple methods to handle all types of requests rather than work on a single type of request as shown below:

  • Express.js req.get() Method: This method is used when get request is done by the client for eg: Redirecting another webpage requests etc
  • Express.js req.post() Method: This method is used when post requests are done by the client for eg uploading documents etc.
  • Express.js req.delete() Method: This method is used when a delete request is done by the client it is mainly done by the admin end for e.g. deleting the records from the server.
  • Express.js req.put() Method: This method is used when update requests are done by the client to update the information over the website.

3. Easy to connect with databases such as MongoDB, MySQL.

4. Easy to serve static files and resources we can easily serve HTML documents using express.js.

5. There are several other benefits of using Express.js like handling multiple get requests on a single webpage that means Allows you to define multiple routes of your application based on HTTP methods and URLs.

Project structure:



Installing Module:

Install the express module using the following command:

npm install express

Filename: Index.js

Javascript




// Requiring module
const express = require("express");
 
// Creating express app object
const app = express(); 
 
// Handling '/' route
app.get("/", (req,res,next) => { 
  res.send("unknown request");
})
 
// Handling '/GFG' route   
app.get("/GFG", (req,res,next) => { 
  res.send("Getting request of GFG");
})
 
// Handling '/Hello' route
app.get("/Hello", (req,res,next) => { 
  res.send("Getting request of the Hello");
})
 
// Server setup
app.listen(3000, () => {
  console.log("Server is Running");
})

Run the index.js file using the following command:

node index.js

Command to run the project

Output:

Now open your browser and go to http://localhost:3000/GFG, you can see the following output:

Now go to http://localhost:3000/hello you can see the following output:



Note: Handling Multiple requests using the HTTP module by default is a get request. This method cannot be used for multiple handling requests. If we use the HTTP module for handling multiple get requests it requires more length of code and multiple if-else conditions to handle the different routes.

Handling Multiple requests using an HTTP module:

Filename: Index.js

Javascript




// Requiring module
var http = require('http');
 
// Create a server object
http.createServer(function (req, res) {
     
   // The http header
   res.writeHead(200, {'Content-Type': 'text/html'});
     
   // Getting URL from the request object
   var url = req.url;
     
   // Checking url
   if(url === '/GFG') {
      res.send("Getting request of GFG");
      res.end();
   }
   else if(url === '/hello') {
       res.send("Getting request of the Hello");
       res.end();
   } else {
       res.send("unknown request");
       res.end();
   }
     
}).listen(3000, function() {
   // The server object listens on port 3000
   console.log("server start at port 3000");
});

Calling multiple middleware from single middleware:

Filename: index.js

Javascript




// Requiring module
const express = require("express"); 
const app = express();
 
// Middleware 1
function Middleware1(req,res,next) {  
    console.log("I am Middleware 1");
     
    // Calling the next middleware present in stack
    next(); 
}
 
// Middleware 2
function Middleware2(req,res,next) {  
 
  res.write("<h1>Express.js GFG<h1>")
   
  // Printing the statement
  console.log("I am Middleware 2"); 
   
  // Ending the response
  res.end(); 
}
 
// Request handling
app.get("/", Middleware1, Middleware2);
 
// Server setup
app.listen(3000, () => {
  console.log("Server is Running");
})

 
 

Output:

 

Now open your browser, you will see the following output:



 

The following will be the output on your terminal screen:

 

Sending HTML documents using Express.js: 

The express.static() middleware is the of the express.js module is used for serving the HTML static documents. The benefit of using it automatically fetches the name of the HTML document present in the particular directory.

 

Project structure:

 

Filename: index.html

 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
 
        /* Assign full width inputs */
        input[type=text],
        input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
 
        /* Set a style for the buttons */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }
 
        /* Set a hover effect for the button */
        button:hover {
            opacity: 0.8;
        }
 
        /* Set extra style for the cancel button */
        .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #f44336;
        }
 
        /* Centre the display image inside
          the container */
        .imgcontainer {
            text-align: center;
            margin: 24px 0 12px 0;
            position: relative;
        }
 
        /* Set image properties */
        img.avatar {
            width: 40%;
            border-radius: 50%;
        }
 
        /* Set padding to the container */
        .container {
            padding: 16px;
        }
 
        /* Set the forgot password text */
        span.psw {
            float: right;
            padding-top: 16px;
        }
 
        /* Set the Modal background */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
            padding-top: 60px;
        }
 
        /* Style the model content box */
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto 15% auto;
            border: 1px solid #888;
            width: 80%;
        }
 
        /* Style the close button */
        .close {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
        }
 
        .close:hover,
        .close:focus {
            color: red;
            cursor: pointer;
        }
 
        /* Add zoom animation */
        .animate {
            -webkit-animation: animatezoom 0.6s;
            animation: animatezoom 0.6s
        }
 
        @-webkit-keyframes animatezoom {
            from {
                -webkit-transform: scale(0)
            }
 
            to {
                -webkit-transform: scale(1)
            }
        }
 
        @keyframes animatezoom {
            from {
                transform: scale(0)
            }
 
            to {
                transform: scale(1)
            }
        }
 
        @media screen and (max-width: 300px) {
            span.psw {
                display: block;
                float: none;
            }
 
            .cancelbtn {
                width: 100%;
            }
        }
    </style>
</head>
 
<body>
 
    <h2>Modal Login Form</h2>
    <button onclick="document.getElementById('id01')
        .style.display='block'" style="width:auto;">
        Login
    </button>
 
    <div id="id01" class="modal">
 
        <form class="modal-content animate"
            action="/action_page.php">
             
            <div class="imgcontainer">
                <span onclick="document
                    .getElementById('id01').style
                    .display='none'" class="close"
                    title="Close Modal">
                    ×
                </span>
                 
                <img src=
20190710102234/download3.png" alt="Avatar" class="avatar">
            </div>
 
            <div class="container">
                <label><b>Username</b></label>
                <input type="text" placeholder=
                    "Enter Username" name="uname"
                    required>
 
                <label><b>Password</b></label>
                <input type="password" placeholder=
                    "Enter Password" name="psw"
                    required>
 
                <button type="submit">Login</button>
                <input type="checkbox"
                    checked="checked">
                    Remember me
            </div>
 
            <div class="container" style=
                "background-color:#f1f1f1">
                <button type="button" onclick=
                    "document.getElementById('id01')
                    .style.display='none'"
                    class="cancelbtn">
                    Cancel
                </button>
                 
                <span class="psw">Forgot <a href="#">
                    password?
                </a></span>
            </div>
        </form>
    </div>
 
    <script>
        var modal = document.getElementById('id01');
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>
 
</html>

Filename: app.js

Javascript




// Requiring module
const express = require("express");
const app = express();
const path = require("path");
 
// Middleware
app.use(express.static(__dirname+"/public"));
 
// Handling request
app.get("/", (req,res,next) => {
    res.write("GFG");
    res.end();
})
 
// Server setup
app.listen((3000), () => {
    console.log("Server is Running");
})

 
 

Run the app.js file using the following command:

 

node app.js

Output:

 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!