How to send different HTML files based on query parameters in Node.js ?

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.