How to pass/access node.js variable to an html file/template ? - GeeksforGeeks

07 Apr, 2021
The following approach covers how to pass/access node.js variable to an HTML file/template. We will build a basic Node.js application that will let you show dynamic content on an HTML page, i.e. your name and age. For adding the name and age values to our HTML template, we’ll be using the pug package. 
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. 
Creating NodeJS Application And Installing Module:
Step 1: We can create a new project with Node Package Manager by using the following command.npm init
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
Step 2: Install the required project dependencies i.e express and pug modules using the following command.
npm install express pug --save
By default, all HTML templates are stored in the views folder in a project. We’ll create the template file index.pug using the same structure.
Project Directory: Our project directory will look like this.
Project Structure
index.js
const express = require('express');  // Initialize Appconst app = express();  // Assign routeapp.use('/', (req, res, next) => {  res.render('index.pug', { name: 'John Doe', age: 21 });});  // Start serverapp.listen(5000, () => {  console.log('App listening on port 5000');});
Explanation: The above code it split into 3 sections:
Importing express and initializing its instanceCreating a route that will serve the HTML template and also pass data into it (name and age of a user).Starting the server.
Importing express and initializing its instance
Creating a route that will serve the HTML template and also pass data into it (name and age of a user).
Starting the server.
index.pug
doctype htmlhtml(lang="en")  head    title= 'Node.js Template'  body    h1 My name is #{name}    p I am #{age} years old
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 the application:
Run the index.js file using the following command.
node index.js
Output: Now open your browser and go to http://localhost:5000/, you will see the following output:
Visual Representation of index.pug template
NodeJS-Questions
Picked
Node.js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Node.js Export Module
How to connect Node.js with React.js ?
Mongoose find() Function
Difference between dependencies, devDependencies and peerDependencies
Mongoose Populate() Method
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?