Working of Express.js middleware and its benefits

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 only limited operatable websites or web applications. 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 posted, 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 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:

• 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 is made by the client so that we can perform operations according to the request. 
• 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 a get request is done by the client for eg: Redirecting another webpage request 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 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 on the website.
• Easy to connect with databases such as MongoDB, MySQL. Easy to serve static files and resources we can easily serve HTML documents using express.js.
• 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.

Installing Module:

Install the express module using the following command:

npm install express

Project structure:

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
const 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, and 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 express.js module 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 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");
})

Steps to run the program:

Run the app.js file using the following command:

node app.js

Output: