Simplifying Web Development with HTML Templates and EJS

Introduction:

Web development often involves creating reusable components and incorporating dynamic data into HTML pages. One powerful way to achieve this is by using HTML templates with the EJS templating language. In this blog post, we will explore how to set up EJS, leverage its features to embed dynamic data and execute code, and enhance code organization using layouts.

Step 1: Install EJS

To get started with EJS, begin by installing it in your project directory. Open your terminal and run the following command:

npm install ejs

This will install the EJS package and make it available for use in your project.

Step 2: Configure EJS with Express

To use EJS as the view engine in your Express application, configure it within the scope of your initialized Express function. Add the following line to your code:

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

This sets EJS as the view engine and enables you to use EJS templates.

Step 3: Create a "Views" Folder

Organize your HTML templates by creating a folder called "views" at the root of your project. This folder will hold all your EJS templates. Make sure to store your HTML pages inside this folder for easy access.

Step 4: Embed Dynamic Data in HTML

EJS allows you to include dynamic data in your HTML templates. To display dynamic content, use EJS tags. For example, to display a username, you can use the following code snippet in your HTML template:

<h2><%= username %></h2>

The <%= username %> part will be replaced with the actual value of the username variable.

Step 5: Render HTML Pages

To render HTML pages using EJS templates, utilize the res.render function. Specify the filename (without the file extension) and provide a JavaScript object containing the value of the variables to be used in the template. Here's an example:

res.render('index', {username: 'Suman Sahoo'});

This code renders the "index.ejs" template and passes the value 'Suman Sahoo' to the username variable.

Step 6: Code Execution in HTML

EJS allows you to execute JavaScript code within your HTML templates. Enclose the desired lines of code with <% and %> tags. For instance, consider the following code snippet:

<% if (user) { %>
    <h2><%= user.name %></h2>
<% } %>

In this example, the code inside the <% %> tags checks if a user exists and, if so, displays their name.

Step 7: Using Layouts

To eliminate repetitive views such as headers and footers, you can implement layouts. By including layouts, you can have consistent elements across multiple pages. To do this, add the following code around the main part or body of your HTML template:

<%- include("header") -%>
<!-- Main content goes here -->
<%- include("footer") -%>

Here, the include function is used to include the "header.ejs" and "footer.ejs" templates within the main template.

Conclusion:

By using HTML templates with EJS, you can create reusable views, inject dynamic data, execute code, and enhance code organization through the use of layouts. This approach simplifies web development and promotes efficient and scalable code. Start leveraging the power of EJS today and experience the benefits it brings to your projects. Happy coding! 🚀