EJS: A Beginner's Guide to Templating in Node.js

EJS, which stands for Embedded JavaScript, is a popular templating engine for Node.js. It allows you to generate HTML dynamically by embedding JavaScript code within your HTML markup. EJS is a simple and easy-to-use templating engine that allows developers to create reusable HTML components and build dynamic web pages easily.

EJS is a powerful tool for web developers because it allows them to write dynamic templates with ease. In this article, we will explore the features of EJS and provide some code examples to help you get started with this powerful templating engine.

Features of EJS

EJS has several features that make it an excellent choice for web developers. Some of these features include:

Easy integration with Node.js: EJS is designed to work seamlessly with Node.js. It is easy to install and integrate with your Node.js project.
Simple syntax: EJS uses simple and intuitive syntax. It allows you to embed JavaScript code within your HTML markup using special tags.
Expressive templates: EJS allows you to write expressive templates that can be reused across multiple pages. This can help you save time and effort when building complex web applications.
Conditional statements: EJS supports conditional statements such as if/else statements and loops. This allows you to create dynamic templates that respond to user input.
Partials: EJS supports partials, which are reusable pieces of HTML code that can be included in multiple templates. This can help you maintain consistency across your web pages and reduce code duplication.

Code Examples

Let's take a look at some code examples to see how EJS works. In these examples, we will use Node.js and Express.js to create a simple web application that uses EJS for templating.

Example 1: Hello World!

In this example, we will create a simple web page that displays the message "Hello World!" using EJS.

First, we need to create a new Node.js project and install the necessary dependencies:

mkdir ejs-example
cd ejs-example
npm init -y
npm install express ejs --save

Next, we will create a new file called index.js and add the following code:

const express = require('express');
const app = express();

// Set the view engine to use EJS
app.set('view engine', 'ejs');

// Define a route that renders a template
app.get('/', (req, res) => {
  res.render('index', { message: 'Hello World!' });
});

// Start the server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

In this code, we are creating a new Express.js application and setting the view engine to use EJS. We are also defining a route that renders a template called index.ejs. This template will display the message "Hello World!" using the message variable that we passed to it.

Next, we need to create the index.ejs template. Create a new file called index.ejs in the views directory and add the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1><%= message %></h1>
  </body>
</html>

In this code, we are using the EJS syntax to embed the message variable within the HTML markup. The <%= %> tags are used to output the value of the message variable.

Now we can start the server by running node index.js and navigate to http://localhost:3000 in our web browser. We should see the message "Hello World"

Yaa.. That's what ejs does... :)