Skip to main content

Getting started with Ejs template engine

Getting started with Ejs template engine

 Hi. In this tutorial, I will show you how start using template engines in your node js/express js applications. Template engines are the easiest ways to get started with building your express js application.  I recommend you check out our video content and other useful resources on our YouTube channel and this blog respectively.

NB: Basic node js/express knowledge required for this tutorial

What is template engine?

In simple terms, a template engine is a package that renders data in HTML pages. It easily allows us to create and use static html page.

One particularity with template engines is their ability to inject data from the server into an html template and then send the final html page to the client side. In other words, a variable can be created in our server and then be inserted in an html template.

 We have several examples of template engines which are usable with node js and express js which include:

  1. Pug
  2. Handlebars 
  3. EJS
  4. Hogan etc

With simplicity in syntax and structure, template engines can be used as a quick tool to easily get started with a Node js application if you don’t want to do anything complex or involve other front-end frameworks like React JS or Vue JS.

In this tutorial, we will use discuss about EJS template engine.

Installation

To add EJS in your Express JS project, you must install the module in order to start using it. To install EJS module, navigate to your project directory from a command prompt window and type the command:

Getting started with Ejs template engine


After hitting enter, just wait for a while as npm downloads and installs it in your local machine. please take note this requires internet.

Usage

As example, we are going to setup a simple express app that renders a web page with variables using EJS.

To begin using EJS in our express app, we must import/call EJS and set view engine as EJS in our code. You will understand better when you see in code ☺.

Finally, at the route handler, you just render the file using the method re.render() which takes as parameter the EJS file name (without extension) and the variable.

EJS files have the extension .ejs and contains html which has portions of server variables written in EJS syntax. This EJS file is stored in a folder called views where express checks by default for rendering web pages.

Take note of the fact that, though express js has the ability to respond to a request by sending a file, it can not really inject a variable into the html template just like EJS did.

Enough of the talking, let’s do the coding ☺

Create a folder called views in your node js project directory. 

server.js

Getting started with Ejs template engine
  • Notice how a string value was assigned to variable title.
In the views folder, create an index.ejs file.

index.ejs

Getting started with Ejs template engine
  • Notice how I represented the variable in the HTML code.
  • EJS uses the syntax <%= … %> to represent variables in HTML code.

OUTPUT

Getting started with Ejs template engine

Thanks for coding with me.
Labels:

Comments

Post a Comment

Please do not enter any spam link in the comment box.

Popular posts from this blog

JavaScript Functions

  Hi there, and welcome to another exciting lesson on JavaScript. If this is your first time here, please do well to check out our previous lessons. In the previous lesson, we were discussing JavaScript math methods. It was very intuitive as we got to learn how to use the various math methods. To proceed, we shall be looking at JavaScript functions.  A function in JavaScript like in every other programming language could be defined as a block of code that is written to perform a particular task, and this function is usually invoked or called before it is being implemented. We have been talking about methods throughout the previous lessons right. Do you know that those methods are actually functions? Yes they are functions. You can now have an overview of the importance of functions in every programming language. How do we create a function in JS? To create a function, you follow the format function functionName(Argument) {//Block of code }. Some functions do have a return val...
Post a Comment
Read more

JavaScript Math Methods

Hello everyone, and welcome to another exciting JavaScript lesson. In the last lessons you have been seeing other methods being used in JS (for example, the string methods). We shall go further into exploring other methods. This time, it’s going to be math methods. Do not move an inch because it’s going to be a very exciting. Before we look at what a math method is, let’s have an overview of math objects. A math object in JavaScript is a static built-in object that includes properties and methods used in performing mathematical tasks. Talking about math properties, they have the syntax Math.property . Some examples are Math.E that returns Euler’s number, Math.PI that returns PI, Math.LN2 that returns the natural logarithm of 2, and many others. The various JavaScript methods contained in the math object, thus, make mathematical operations easier and reduce effort as well as time in math-oriented programming. Some JS methods include abs( ), ceil( ), cos( ), sqrt( ), pow( ), log( ) ...
Post a Comment
Read more

How to generate random numbers using NumP1

Hello. Welcome to another edition on this platform. For more better understanding, do checkout our YouTube channel to get the video tutorial. In this article of today, we are going to see how to generate random numbers using any of the following methods: Generating a random number Generating a random float and integer Generating random number arrays Generating random number from an array What is a random number? This is a number which cannot be predicted before its occurrence. This number might not different every time. Programmatically, they are two categories of random numbers:     Pseudo-Random numbers       True Random numbers. Just as programs which are written by programmers are a set of instructions, we must follow an algorithm to generate random numbers. Random numbers which are generated using an algorithm are called Pseudo-Random numbers. To generate a true random number, it is important to get the data from sources such as the keyboards, mou...
Post a Comment
Read more