How to Render HTML Files in Node.js and Express

6 mins0
How to Render HTML Files in Node.js and Express

Basically, learning how to serve HTML in Node.js and Express is a staple for any up-and-coming web developer. Many start off by simply sending text strings to the browser, but real-world applications call for real web pages. This walkthrough takes you through serving HTML files to create a functional, visual web server. We will transform your basic backend logic into a visual experience for your users.

Why Serve Static HTML Files?

You may wonder why we do this, instead of using complex template engines. For certain use cases, serving raw HTML files works just fine. Consider a “Coming Soon” landing page, or a simple portfolio site.

These projects often do not need to process dynamic data. In such cases, serving a file directly brings benefits to performance and simplifies your project structure. This keeps your codebase clean and allows you to focus on designing your HTML page, without having to worry about any backend rendering logic.

Node.js Express Example to Render HTML Files

Let’s build a working example. We will create a simple server that sends an HTML page whenever a user visits the homepage. We need the Express framework and the native ‘path’ module to handle file paths correctly. To know more about path module checkout our guide on “Mastering the Node.js Path Module“.

Let’s start with creating new project you can use existing one. Open your terminal and enter below command:

mkdir my-html-server
cd my-html-server
npm init -y
npm install express
touch index.html
touch server.js

It will create new node.js application with express. Here, with touch command it will create two files index.html and server.js. If you want to serve multiple static HTML pages like for terms of use and privacy policy then you can wrap these HTML files into directory.

Open index.html file, which represents the web page we want to show the user.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node.js HTML Example</title>
</head>
<body>
    <h1>Welcome to My Node.js Server</h1>
    <p>This HTML file is served using Express.</p>
</body>
</html>

Let’s create server with express to render HTML file as output. We have already created this file into previous steps. Open server.js and modify as below:

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

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

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

The code above keeps things simple. We import the Express library to create our server application. We also import the path module. This module is crucial because it helps our application locate the index.html file regardless of the operating system you use like ubuntu or mac.

Inside the route handler, we use the res.sendFile() function. This function tells the browser, to show file as output to the user.

Conclusion

You now know the easiest way to render an HTML file in Node.js. The above technique is a great foundation for lightweight websites and serving static content. You can expand it by adding CSS files or images to make your pages look nicer. Begin experimenting with different HTML structures and build your own web server today.