How to Pass/Access Node.js Variable to an HTML file/template ?

When building web applications with Node.js, it’s often necessary to pass server-side variables to the client-side for rendering dynamic content. This can be achieved using various techniques and templating engines. This article will guide you through different methods to pass and access Node.js variables in HTML files or templates.

Approach

We will be using template engines to access the node js variables in html file. Templating engines enable you to embed Node.js variables directly within your HTML. Popular templating engines include EJS, Pug, and Handlebars. Each has its syntax and way of handling data.

Pug

Pug is a template engine that can be used to inject dynamic data into an HTML page. Its function is to convert the provided data into HTML content and serve it as a static page. Pug's syntax resembles that of traditional HTML but is a lot cleaner and prioritizes indentation and spacing for controlling the flow of logic. 

Installation Steps

Step 1: We can create a new project with Node Package Manager by using the following command.

npm init

Step 2: Install the required project dependencies i.e express and pug modules using the following command.

npm install express pug --save

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "pug": "^3.0.3"
  }

<!-- index.pug -->

doctype html
html(lang="en")
  head
    title= 'Node.js Template'
  body
    h1 My name is #{name}
    p I am #{age} years old

// index.js 

const express = require('express');

// Initialize App
const app = express();

// Assign route
app.use('/', (req, res, next) => {
  res.render('index.pug', { name: 'John Doe', age: 21 });
});

// Start server
app.listen(5000, () => {
  console.log('App listening on port 5000');
});

Explanation: Behind the scenes, the above pub code along with the provided data is translated into an HTML page and then served via the Node.js application.

Step to Run Application: Run the application using the following command from the root directory of the project

node index.js

Output: Now open your browser and go to http://localhost:5000/, you will see the following output: