How to send an HTML File in Node.js?

Node.js is used to create projects such as APIs, microservices, servers, and even web applications. In a web application, we have to send the HTML file so that the user can interact with the application. We can send different HTML files on different routing requests such as sending a file when the user requests the home route “/”, or sending a contact form when the user requests the “/contact” route.

There are many modules that can be used for sending HTML files, like HTTP, etc. But we will use the express module which is beginner friendly and we already covered an article on NodeJS Installation, Setup, and Creating a Hello World Application in NodeJS where we use express to send a message as a response to the client.

Express Module

For using an express module it is required to install it using NPM. For more about NPM check.

Syntax:

npm i express

Create an application to send an HTML file using Node.js

Functionality: A simple Node.js Web App that sends an HTML file for the home page containing an h1 tag with the message “Home” in response to the client.

Approach: We use the “sendFile” method of the response object to send an HTML file to the client when the request for the home(“/”) route.

Implementation: Let’s see the step-by-step implementation to create the final application.

Step 1: Create a new folder & open it on code Editor.

Step 2: Create a file “aap.js” inside that folder.

Step 3: Create another file “index.html” which will send as a response to the client.

Step 4: Open the terminal & type the below command. This initializes the Node Packages Manager, by which we can install any Node.js framework.

npm init -y

Output:

Step 5: Inside the terminal, type the below command to install express as a module in the project.

npm i express

Output:

Step 6: Open the “app.js” file and import the express module using the below statement.

const express = require('express');

Step 7: Create a constant “app” and set it to “express()”, which means we are creating an instance of an express module, by which we can call any of the express functions.

const app = express();

Step 8: Then write the following code

app.get('/', (req, res) => {
    
});

Here, we use the express get method, which defines what happens when the client requests for the “/” route, after that we separate it using a comma and pass a callback function.

Inside the callback function, write res.sendFile(), res means response, the response object is used to send different types of data to the client, and the sendFile() is a method of response object by which we send the HTML file as a response.

app.get('/', (req, res) => {
    res.sendFile();
});

Inside the sendFile method, type the file location that you want to send as a response.

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

If you are wondering why we use __dirname, you can check out NodeJs Globals where we have explained many global objects including __dirname.

Step 9: After that, create a port in order to test our application on browsers, for this, we will use the express method “listen”, by using our “app” instance and pass a port as an argument which is used to open the application in the browser.

app.listen(3000);

Step 10: Now, open any web browser and type the following, inside the search bar, this opens the Node.js application we set to port 3000.

http://localhost:3000/

Complete Code:

const express = require('express');

const app = express();

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

app.listen(3000);

Output:

Summary

Sending an HTML is important when creating a web application, for this, we can use the express module to create a server and use the response object method sendFile() to send a file as a response. We can send multiple files on different routing requests. We hope this tutorial helps you to send an HTML using Node.js.