How To Render HTML Page In Express

In this tutorial, you’ll learn how to render HTML page in express web application. I’ll start with creating a simple web app using express framework from very scratch.

Getting Started With Node Project

Let’s start by create a project directory for our node web app. Create a folder called render_html. Navigate to the project directory and initialize the Node project by entering the required details.

mkdir render_html
cd render_html
npm init

Once the project has been created and initialized you’ll be having a package.json file inside the project directory.

{
  "name": "render_html",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Creating An Express Web App

Once you have the project initialized it’s time to create the express web app. I’ll start by installing the express module.

// install express
npm install --save express

Once you have express installed, create a file called app.js. This will be the application root file.

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

app.get('/', (req, res) => res.send('Welcome To Code Handbook!'))

app.listen(port, () => console.log(`App listening on port ${port}!`))

Save the above changes and from the project directory run the express project.

// run the web app
node app.js

Point your browser to http://localhost:3000/ and you’ll have the application running.

Render HTML Page In Express

Let’s create a new route to render an HTML page. Inside app.js file add the following code:

/*
* Route to render HTML Page
*/
app.get('/renderHTML', (req, res) => {
    // render HTML code will be here
})

You’ll be making use of the sendFile method to render HTML page in express. Let’s create a file called index.html inside the render_html project directory.

        Welcome to Code Handbook

Modify the /renderHTML route as shown to render HTML file index.html.

/* app.js file
/*
* Route to render HTML Page
*/
app.get('/renderHTML', (req, res) => {
    res.sendFile('index.html', {
        root: path.join(__dirname, './')
    })
})

sendFile method takes the file name as parameter with the application root path. __dirname gives the current path of the running script. Here is how the app.js file looks :

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

/*
* Default route for the web app
*/
app.get('/', (req, res) => res.send('Welcome To Code Handbook!'))

/*
* Route to render HTML Page
*/
app.get('/renderHTML', (req, res) => {
    res.sendFile('index.html', {
        root: path.join(__dirname, './')
    })
})

app.listen(port, () => console.log(`App listening on port ${port}!`))

Save the above changes and restart the application. Point your browser to http://localhost:3000/renderHTML and you will have the route render HTML file.

Wrapping It Up

In this tutorial, I showed how you can render HTML page in express web application. Rendering an HTML page is one of the basic things when creating a web application and express framework makes it quite easier.

Do let us know your thoughts, suggestions or any corrections in the comments below.