How to serve a static HTML file in Node.js
Node.js is the server-side JavaScript environment used to run web applications outside the client's browser. It is widely used to create the server-side for web applications and I/O-intensive applications.
What is a static HTML file?
Static refers to something that is still. Therefore, a static HTML file is a simple document that displays the same content on the webpage for all users. The content of the static file is not dynamically customizable.
Required installations
In this example, we will use VS Code IDE on the Ubuntu environment to serve a simple static HTML file. We need to make the following installations to run the code.
Node.js environment
Visual Studio Code IDE
Express.js framework
Simple steps to serve a static HTML file
Step 1: Create an empty folder on VS Code and open it in the terminal. Then create a node.js project and install express framework in it.
To create a node.js project run the following command:
npm i nodemon
To install express framework run the following command:
npm install express
Step 2: Create a public folder inside the node.js folder and add an html file to it. Add the html code, that is to be served, in the created file.
<!DOCTYPE html><head></head><body><div><h1>Hello! this is home page</h1><h3>Serving static HTML file using Node.js</h3></div></body></html>
Step 3: Create index.js file in the node.js folder and import the required modules into it.
const express = require('express');const path = require('path');const app = express();
Step 4: Set up the middleware for serving static files in index.js.
app.use(express.static(path.join(__dirname, 'public')));
app.use()to mount middleware functions.express.static()to serve the static file present in the directory passed as a parameter.path.join()to join the path segments and form a complete directory path.
Step 5: Create a get request to fetch the specified file from the public directory.
app.get('/', async(req, res) => {res.sendFile(path.join(__dirname, 'public', 'home.html'));});
app.get()to define a route for handling the GET request.async(req , res)to access the incoming request and send a response to the client in an asynchronous manner.res.sendFile()to send the specified file i.e. home.html to the client as a response.
Step 6: Start the server through app.listen() and listen for the connection request on the specified port i.e. 8080.
app.listen(8080, () => {console.log("Server successfully running on port 8080");});
Step 7: Finally run the project by giving the start command in the terminal.
node index.js
Step 8: Wait for the terminal to respond. The message specified in the app.listen() function will appear on the console in case of a successful connection. The error message will appear on the console in case of failure.
Step 9: Open the localhost server on port 8080 to see the static content of the specified html file being served successfully.
Code
This is the complete code for the explained steps. It serves the static content of the home.html file inside the public directory by using the node.js environment.
<!DOCTYPE html>
<head>
</head>
<body>
<div>
<h1>Hello! this is home page</h1>
<h3>Serving static HTML file using Node.js</h3>
</div>
</body>
</html>Summary
You can serve any kind of data from a static HTML file if you give the correct directory path in the get request and ensure that the server side is connected successfully before the request is processed.
Test your understanding
What is the key function to serve the static file?
express.static()
path.join()
Common query
My application does not run on port 8080 and shows the following error:
Error: listen EADDRINUSE: address already in use :::8080
What should I do?
Free Resources