Express.JS: A Beginner’s Guide. Are you tired of serving the same static HTML pages to all your users? It’s time to level up your Node.js applications by rendering dynamic content. This guide will show you exactly how to master EJS with Express, one of the most popular and intuitive combinations for building server-rendered web pages.
By the end of this tutorial, you’ll be able to set up EJS, pass data from your server to your views, and build a functional, dynamic blog page from scratch. Let’s get started!
What is a Template Engine in Express.JS?
Think of a template engine as a tool that lets you create a “master” HTML file (a template) with special placeholders. Your server can then replace these placeholders with actual data before sending the final HTML page to the user. This allows you to create reusable components like headers and footers and display user-specific information, like a username or a list of blog posts.
EJS, which stands for Embedded JavaScript, is a simple templating language that lets you generate HTML markup with plain JavaScript. If you know JavaScript and HTML, you’ll feel right at home with EJS.
Setting Up EJS with Express.JS
Integrating EJS into an existing Express project is incredibly straightforward. Here’s a step-by-step breakdown.
Step 1: Initialize Your Express.js Project
First, make sure you have a basic Express server ready. If you don’t, you can set one up quickly.
Create a project folder, run `npm init -y`, install Express with `npm install express`, and create a server file like `app.js`.
Step 2: Install EJS
Next, install the EJS package from npm. Open your terminal in the project directory and run the following command:
npm install ejsStep 3: Configure the View Engine
Now, you need to tell Express to use EJS as its view engine. Add these two lines to your `app.js` file, preferably before you define any routes.
// Set the view engine to EJS
app.set('view engine', 'ejs');
// Optional: Specify the views directory (default is 'views')
app.set('views', 'views');This configuration tells Express that whenever you render a view, it should look for `.ejs` files inside a folder named `views` in your project’s root directory.
Rendering Dynamic Content in Express.JS
This is where the magic happens! Let’s see how to pass data from your Express.JS server to your EJS templates.
Passing Data from Your Server in Express.JS
In your Express route handler, you use the `res.render()` method instead of `res.send()` or `res.json()`. The first argument is the name of the view file (without the `.ejs` extension), and the second is an object containing the data you want to pass.
app.get('/', (req, res) => {
res.render('home', {
pageTitle: 'Welcome to My Blog!',
user: 'Alex'
});
});Using EJS Tags in Your View
Inside your EJS files (e.g., `views/home.ejs`), you can use special tags to embed JavaScript and output the data you passed.
<%= ... %>: Outputs the value into the HTML (escaped to prevent XSS attacks). This is the most common tag.<%- ... %>: Outputs the unescaped value. Use with caution, only with trusted data.<% ... %>: A scriptlet tag for control flow, like loops or conditionals. It doesn’t output anything.
Here’s how you would use the data from the previous step in `views/home.ejs`:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title><%= pageTitle %></title>
</head>
<body>
<h1><%= pageTitle %></h1>
<p>Hello, <%= user %>!</p>
</body>
</html>
Building a Simple Blog Page in Express.JS: A Practical Example
Let’s build a page that displays a list of blog posts. This demonstrates how to use loops to render dynamic content.
1. The Express Route:
Pass an array of post objects to a `blog.ejs` view.
app.get('/blog', (req, res) => {
const posts = [
{ title: 'Understanding EJS', author: 'Jane Doe' },
{ title: 'Express Middleware Basics', author: 'John Smith' },
{ title: 'REST APIs with Node.js', author: 'Jane Doe' }
];
res.render('blog', {
pageTitle: 'Our Blog',
posts: posts
});
});
2. The EJS View (`views/blog.ejs`):
Use a `forEach` loop to iterate over the `posts` array and display each one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title><%= pageTitle %></title>
</head>
<body>
<h1><%= pageTitle %></h1>
<div class="posts-container">
<% if (posts && posts.length > 0) { %>
<% posts.forEach(post => { %>
<div class="post">
<h2><%= post.title %></h2>
<p>By: <%= post.author %></p>
</div>
<% }) %>
<% } else { %>
<p>No posts available.</p>
<% } %>
</div>
</body>
</html>
Conclusion
You now have the foundational skills to use EJS with Express to build powerful, server-rendered applications. You’ve learned how to set up the view engine, pass data from your server to your templates, and use JavaScript logic directly in your HTML to render dynamic lists. This is a crucial step in moving beyond static websites into the world of full-fledged web applications.
What will you build first? Share your ideas or questions in the comments below!
Frequently Asked Questions (FAQ)
What is EJS used for?
EJS is primarily used to create dynamic HTML pages on the server side. It allows developers to embed JavaScript variables, loops, and conditional logic directly into an HTML template, which is then processed by the server and sent to the client as a plain HTML file.
Read More: ExpressJS Request & Response Handling: Powerful Guide 2025
Read More: ExpressJS: Powerful Guide to Middleware and Routing 2025
Is EJS better than Pug or Handlebars?
“Better” is subjective and depends on your preference. EJS is popular because its syntax is essentially plain HTML with special tags, making it very easy for those familiar with HTML to learn. Pug uses an indentation-based syntax that results in less code but has a steeper learning curve. Handlebars is known for its logic-less approach, which enforces a stricter separation of concerns.
Can I use plain HTML in an EJS file?
Absolutely! Any valid HTML code is also valid EJS code. This is one of the biggest advantages of EJS, as you can take any existing static HTML file, rename it with a `.ejs` extension, and start adding dynamic elements without changing the original markup.
External Resources: For more advanced features and documentation, visit the official EJS website.
