How to Render HTML Content in Node.js using EJS

In Node.js there are many way to display HTML document like EJS, PUG, hbs and many more but in this tutorial I have choose EJS because Its very easy to learn and use means low learning curve. Suppose you are a beginner in node.js and you have received a project to do as soon as possible. In such situation we should take something which have low learning curve and can start early.

Now back to the topic and lets start today’s article. This is my second article on Node.js tutorial series, In this tutorial I am going to discuss about how to render an HTML document in node.js using EJS templating language, If you have ever learned about PHP it is very to its syntax. It is very easy to learn and work let’s check it out. First of all we will know little bit about EJS then will proceed to the main part this tutorial.

EJS HTML rendering in node.js

If you haven’t go through the previous article you should go through first this tutorial, create firstapp in node.js or you can also clone the project from github and get started instantly from here.

After cloning the repo we should run npm installation to install all the dependencies.

git clone https://github.com/sandeepkd/myfirstapp.git

What is EJS?

EJS is a JavaScript templating language where ‘E’ stands for Embedded. Its is based on Embedded structural language. I have used EJS on my many projects its never disappoints me on every end. Its very fast to render HTML, Easy to learn and of course easy to use. View directory gives a basic MVC structure to the project.

Some of basic tags of EJS

<%=dataVariable%> // Render a variable
<%- include('header'); %> // Include a file
<% if(condition) { // your statement here } // if statement %>

For more details you can go through there official site and learn more EJS.

After cloning the repo from the git hub you can run command npm install all dependencies will be installed. After the setup of the this project your project folder will look like below. You can definitely start from scratch again and I also recommend that you should start from the scratch. It will increase you fluency of node.js project development.

NodeJS Project Folder Structure

Install EJS using NPM

Now we will install EJS in the project using NPM package manager. To install EJS package we will just follow the below command and it will get installed via NPM package manager.

npm i ejs

After installing EJS now we have to setup the view engine. In EJS by the convention all the view templates will have to keep in the views directory. Therefore, Now we will have create a view folder in the root of the project.

Now inside the

Create a view directory
> views/index.ejs

<html>
    <head>
        <title><%=pageName%>
    </head>
    <body>
        

<%=message%>

</body> </html>

Render HTML using EJS

Here is the main part of this tutoril. If you see below code. We have import express.js first then created express app. After that we have import EJS. Now we have to assign the ejs to the app, we can say it integration of ejs and express app. This is the way we assign ejs as a view engine.

const express = require('express'); // import express
const app = express();  // create app method
const ejs = require('ejs');

app.set('view engine', 'ejs');

// this is a home route can be accessed from the browser
app.get('/',function(req, res){

  res.render('home', { pageName: 'Home', message:"Hello World!"});

});

// Post method can be accessed from api request
app.post('/',function(req, res){

    res.send("Hello World!");
  
});

module.exports = app; // export this module 

Output:- Now, Its time to run the app and see how the app will render the HTML document. Keep server.js file will be same Follow the node server.js. If you have followed well you should get the below output.

HTML Render using EJS

So, Whats Now?

Now, I would like to conclude this tutorial. I hope, am able to explain the topic in a easy way and you should now able to render HTML content using EJS in Node.js. If you are still facing any question please ask me in comment section. I will help out as much as possible.

Leave a Reply

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