Working of Express.js middleware and its benefits

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.
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.
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 moduleconst express = require("express"); // Creating express app objectconst app = express();  // Handling '/' routeapp.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' routeapp.get("/Hello", (req,res,next) => {   res.send("Getting request of the Hello");}) // Server setupapp.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.
Filename: Index.js
Javascript
// Requiring modulevar http = require('http'); // Create a server objecthttp.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");});
Filename: index.js
Javascript
// Requiring moduleconst express = require("express"); const app = express(); // Middleware 1function Middleware1(req,res,next) {      console.log("I am Middleware 1");         // Calling the next middleware present in stack    next(); } // Middleware 2function 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 handlingapp.get("/", Middleware1, Middleware2); // Server setupapp.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:
 
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="https://media.geeksforgeeks.org/wp-content/cdn-uploads/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 moduleconst express = require("express");const app = express();const path = require("path"); // Middlewareapp.use(express.static(__dirname+"/public")); // Handling requestapp.get("/", (req,res,next) => {    res.write("GFG");    res.end();}) // Server setupapp.listen((3000), () => {    console.log("Server is Running");})
  
Run the app.js file using the following command:
 
node app.js
Output:
 
 
sagar0719kumar
Express.js
HTML-Misc
Technical Scripter 2020
Node.js
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.