In this Node.js tutorial, we will cover how to use HTML templates in our Node.js application. HTML templates allow us to create dynamic web pages by embedding variables and logic into our HTML files.
Step 1: Install the necessary dependencies
First, we need to install the necessary dependencies to work with HTML templates in Node.js. We will be using the popular templating engine called EJS. To install EJS, run the following command in your terminal:
npm install ejsStep 2: Create a new HTML template file
Next, we need to create a new HTML template file that we will use in our Node.js application. Create a new file called template.ejs and add the following code:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= message %></h1>
</body>
</html>In this template file, we have added two variables: title and message. These variables will be replaced with actual values in our Node.js application.
Step 3: Create a new Node.js file
Now, let’s create a new Node.js file called index.js and add the following code:
const express = require('express');
const ejs = require('ejs');
const app = express();
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
res.render('template', { title: 'Node.js Tutorial', message: 'Hello World' });
});
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});In this Node.js file, we are setting the view engine to EJS and defining a route that renders the template.ejs file with the provided data. When we visit the root URL, we will see the rendered HTML template with the variables replaced.
Step 4: Start the server
To start the Node.js server, run the following command in your terminal:
node index.jsYou should see a message that the server is running on http://localhost:3000. Open your browser and navigate to this URL to see the rendered HTML template with the variables replaced.
That’s it! You have now successfully used HTML templates in your Node.js application. You can create more complex templates by adding more variables, logic, and HTML elements to your template files. EJS is a powerful templating engine that allows you to create dynamic web pages easily in Node.js.
Man I have learnt alot from this playlist 😊❤
😇
Thank you very much. The most important feature of this course is that the prerequisites are told in order , this makes the course very understandable.
Why {{name}} ?, I tried with {name} also and it works, is there any difference ?
so exciting, thank you very much
How creep style of context passing at raw. But great tutorials Vishwas Bro.
thanks teacher 34
Vishwas 🤗🤗🤗
This is the best or if i'm not mistaken, one of the best JS channels on YouTube. Well done Vishwas, so much respect for you!❤
Man keep it up. You are one of the best teacher available online.
Yes, very simple and doesn't actually work, String.Prototype.replace will replace only one occurance of the pattern string. There is now .replaceAll but still I would recommend using template engine library, ie. handlebars
Hi Vishwas, thank you for all the efforts you're putting in with your content.
I do have one request though, can you please make a series on Frontend system design for which we frontend folks don't have enough resources which goes beyond interviews and to build resilient, performant,maintainable frontend systems , would love to learn from you even if it's a paid course, Thank you.