Skip to content
Related Articles

Related Articles

How to send different HTML files based on query parameters in Node.js ?
  • Difficulty Level : Expert
  • Last Updated : 22 Apr, 2021

The following approach covers how to send different HTML files based on the query parameters in Node.js

Approach: The task can be easily fulfilled by receiving the query parameters and map different HTML files with the respective parameters.

Step 1: Create your project folder and install the express module using the following command:

npm install express

Step 2: Create a main.js file in the root directory of your project and write down the following code in it.

main.js






var express = require('express');
var app = express();
const fs = require("fs");
  
// Helper function to read and serve html files 
// according to the requested paths 
function readAndServe(path, res) {
    fs.readFile(path, function (err, data) {
        res.end(data);
    })
}
  
// Setting get request path to receive id as query parameter 
app.get('/:id', function (req, res) {
    console.log(req.params);
  
    // Mapping different id's with respective html files
    if (req.params.id == "id1")
        readAndServe("./id1.html", res);
    else if (req.params.id == "id2")
        readAndServe("./id2.html", res);
    else {
        res.end("Invalid request");
    }
});
  
app.listen(8080, () => { console.log("Server Listening on Port 8080") });

Step 3: Create id1.html and id2.html files in the root directory of your project as shown below.

id1.html




<!DOCTYPE HTML>
<html>
    <head>
        <title>Id 1</title>
    </head>
    <body>
        <h1>Requested Id = 1</h1>
    </body>
</html>

id2.html




<!DOCTYPE HTML>
<html>
    <head>
        <title>Id 2</title>
    </head>
    <body>
        <h1>Requested Id = 2</h1>
    </body>
</html>

Step 4: Run the server using the following command from the root directory of the project:

node main.js

Output:

  • Now open your browser and go to http://localhost:8080/id1, you will see the following output when id1 is passed as a query parameter.

  • Now go to http://localhost:8080/id2, you will see the following output when id2 is passed as a query parameter.

My Personal Notes arrow_drop_up
Recommended Articles
Page :