Uncategorized

What is EJS? Render HTML page using NodeJS Express Framework

Express Framework EJS render HTML page

In the previous tutorial, we have discussed routing and seen how routing works in Nodejs Express framework and we have also introduced parameter routing. Now in this Nodejs tutorial, We will look at  What is EJS, Its template and why we use it. We will see how we can render an HTML page using res.render().

What is EJS?

E in EJS is for Embedded, Ejs is simple and effective template engine for JavaScript. EJS is the simple template which allows developers to create the HTML page with plain JavaScript. Ejs provide fast compilation and rendering and include both server and browser support.

Now let’s get started with the new express application and create the new basic express application from scratch. If you don’t know how to create the Express application you can see our previous NodeJs tutorials. So go ahead and install express in your project directory. Now open up your server JavaScript file and include express into your application.

 

var express = require('express');

var app = express();


app.listen(3000, function() {

console.log('Hey there from the server')

})

 

Here we have defined our application and set it port 3000 and then create a route for your application and creating route we will render the EJs file. Now let’s go ahead and create the ejs file with the simple plain HTML code for EJS file:

 

<h1>This is Home Page!</h1>

</br>

<h2>Our First EJS Page</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

 

Here is the code for our EJS file, make sure you always put EJS file inside views folder in your project directory folder.

How To Install EJS?

Now we need to install Ejs, to do that we need to open the terminal and write the following command:

Npm install ejs -- save

And to route, the application write the following code in your server JavaScript file.

 

app.get('/', function(req, res) {

res.render("index.ejs");

});

 

So, now we have a file with EJS format, in which we have written plain HTML and then we are sending back that file to our user and then it will be rendered in the browser. Now let’s run the application and see how the site would look like:

 

What is EJS? Render HTML Page using EJS Express nodejs

 

Now if we want to create another EJS page, in that page we will write a simple code which will welcome user. Here is the code of users.ejs file:

 

<h1>Hey User, Welcome to Our site&lt;/h1>

So when we go to URL (http://localhost:3000/user) it will print the following output.

EJS tutorial: How to create HTML page using EJS and Express Node js Framework

Now if we want username like “Hey danny, Welcome to Our site” instead of user-written on the page then we use <%= %> and inside of this, we will pass the username. This is how we can do that:

This is the code of our EJS file:

<h1>Hey <%= username %>, Welcome to Our site</h1>

Whatever we will put inside these brackets, it will be treated as JavaScript code. Now we will define another route in our server file. Here is the code below:

 

app.get('/:users', function(req, res) {
var users = req.params.users;

res.render("userval.ejs", {username: users});

});

 

So, whatever the name we will put in the URL it will display as a site content like below:

 

how ro render EJS HTML page Using Express nodejs framework

 

So, EJS is embedded JavaScript file which enables the developer to create dynamic HTML that we can change depending on the data that we provide.

Conclusion:

In this NodeJs tutorial, we have seen that how we can create the simple dynamic application using EJS template and learned that how we can render simple EJS HTML page.

Most Popular

To Top