render HTML page in express

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.

<html>

<head>

</head>

<body>
    <h3>
        Welcome to Code Handbook
    </h3>
</body>

</html>

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.

One thought on “How To Render HTML Page In Express

Leave a Reply

Your email address will not be published. Required fields are marked *