Working with template systems - EJS

Working with Template Systems - EJS

In this tutorial, we will explore how to work with EJS, a templating system for Node.js. EJS, or Embedded JavaScript, is a simple and powerful tool for rendering HTML with dynamic content. In this lesson, we will cover the basics of installing and configuring EJS to set up dynamic views in your Node.js application.

1. What is EJS?

EJS (Embedded JavaScript) is a templating mechanism that allows you to dynamically generate HTML content within Node.js. By using EJS, we can create templates of HTML that the server will render and deliver to the user. It’s an easy and effective way to handle server-side rendering, especially when compared to other options. In this tutorial, we will learn how to install EJS, configure it within our Node.js server, and create a basic layout.

2. Installing EJS

To get started, let's install EJS using npm. Follow these steps:

# Install EJS and save it to the production dependencies
npm install ejs --save

If you encounter any issues, ensure that the command is correct and that you include all necessary letters.

3. Configuring EJS in Express

After installing EJS, we need to configure it in our server code so that Express knows to use EJS as the templating engine. In the main server file (e.g., server.js), add the following line after setting up your public folder:

// Set EJS as the templating engine for the app
app.set('view engine', 'ejs');

This line informs Express to use EJS for rendering views.

4. Creating the Views Folder

For EJS to function properly, you need to create a directory for your view templates. By default, Express will look for the folder named views within your root directory:

project-folder/
  views/
    layout/
      empty.ejs

Inside the views folder, we can create subdirectories, such as layout, where we store our layout files. In this tutorial, we will create an empty layout to understand how to pass data between the server and the view.

5. Using Layouts and Variables

To demonstrate how to pass variables into the EJS view, follow these steps:

Create an EJS Layout File: Create a file named empty.ejs in the views/layout folder.
Add an HTML Structure: The layout file should contain a simple HTML skeleton, with placeholder tags for dynamic content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <div><%= body %></div>
</body>
</html>

Pass Variables from the Server: In our server.js, let’s pass some dynamic content to this view. Instead of using res.send(), use res.render() to render the EJS file and pass in the necessary data:

app.get('/register', (req, res) => {
    res.render('layout/empty', {
        title: 'Register',
        body: 'Welcome to the registration page!'
    });
});

Here, we are using the render() function to pass two variables, title and body, which will be used in the empty.ejs template.

6. Testing the Setup

After you have made these changes, you can run the server:

node server.js

Then, navigate to http://localhost:3001/register in your browser. You should see the HTML page dynamically populated with the title "Register" and a body message.

7. More Complex Layouts

You can also create more complex layouts that handle overlays and contain additional HTML elements. For example, create another layout named overlay.ejs and include more styling or JavaScript, just like you would for a React component. Note that with EJS, we’re dealing directly with HTML, not JSX, so remember to use class instead of className.

Comments on Current Trends and Updates (as of 2024):

ES Modules: The code in this tutorial was written in 2016, when CommonJS modules (require()) were standard. If you are working with a newer version of Node.js (version 14+), consider using ES modules (import and export) instead.
Template Engines vs. Client-side Rendering: Today, front-end frameworks like React, Vue, and Angular dominate for rendering. EJS still has its use cases, particularly for projects focused on server-side rendering and SEO, but consider the context of your application when choosing it.

Summary

In this tutorial, we covered the basics of using EJS for templating with Node.js. We learned how to install EJS, configure Express to use it, create layouts, and render content dynamically from the server. In the next video, we’ll move further into rendering React components on the server side and how to configure server-side rendering effectively.

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!

Setting up the server

Learn how to set up a server with Express.js, including routes and body parser integration for full-stack development.