ExpressHow-ToBeginner · 3 min read

How to Use EJS with Express: Simple Setup and Example

To use ejs with express, first install ejs via npm, then set it as the view engine in your Express app using app.set('view engine', 'ejs'). You can then create .ejs files in a views folder and render them with res.render('filename').

📐

Syntax

To use EJS with Express, you need to set the view engine and render EJS templates.

app.set('view engine', 'ejs'): Tells Express to use EJS for rendering views.
res.render('templateName', data): Renders the EJS template named templateName.ejs and passes optional data to it.
views/ folder: Place your EJS files here by default.

javascript

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

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

app.get('/', (req, res) => {
  res.render('index', { title: 'Home Page' });
});

💻

Example

This example shows a simple Express app using EJS to render a homepage with a dynamic title.

javascript

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

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

app.get('/', (req, res) => {
  res.render('index', { title: 'Welcome to My Site' });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

// views/index.ejs file content:
// <!DOCTYPE html>
// <html lang="en">
// <head>
//   <meta charset="UTF-8">
//   <meta name="viewport" content="width=device-width, initial-scale=1.0">
//   <title><%= title %></title>
// </head>
// <body>
//   <h1><%= title %></h1>
//   <p>This page is rendered using EJS template engine.</p>
// </body>
// </html>

Output

Server running on http://localhost:3000 When visiting http://localhost:3000, the browser shows a page with the title and heading 'Welcome to My Site' and a paragraph 'This page is rendered using EJS template engine.'

⚠️

Common Pitfalls

Common mistakes when using EJS with Express include:

Not installing ejs package with npm install ejs.
Forgetting to set the view engine with app.set('view engine', 'ejs').
Placing EJS files outside the default views folder without configuring app.set('views', 'your-folder').
Using res.sendFile instead of res.render to render templates.

Example of wrong and right usage:

javascript

// Wrong: Sending EJS file as static file
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/views/index.ejs'); // This sends raw EJS code, not rendered HTML
});

// Right: Rendering EJS template
app.get('/', (req, res) => {
  res.render('index', { title: 'Correct Usage' });
});

📊

Quick Reference

Command	Description
npm install ejs	Installs EJS package
app.set('view engine', 'ejs')	Sets EJS as the template engine
res.render('template', data)	Renders EJS template with optional data
views/	Default folder for EJS template files

✅

Key Takeaways

Install EJS with npm and set it as Express view engine using app.set('view engine', 'ejs').

Place your EJS files in the views folder and render them with res.render('filename').

Always use res.render to process EJS templates, not res.sendFile.

Pass data as an object to res.render to use dynamic content in templates.

Configure the views folder if you want to store templates outside the default location.