Configuring EJS as a view engine
Configuring EJS as a view engine in an Express.js application involves setting up your Express app to use EJS for rendering HTML templates. This setup allows you to serve dynamic content using EJS templates, integrating server-side data into your HTML views.
Steps to Configure EJS as a View Engine
Install EJS
First, you need to install EJS and Express if you haven’t already.
npm install express ejs
Set Up Your Express Application
Create your Express application and configure EJS as the view engine. Here’s a basic setup:
app.js
:const express = require('express'); const path = require('path'); const app = express(); // Set EJS as the view engine app.set('view engine', 'ejs'); // Specify the directory where EJS templates are located app.set('views', path.join(__dirname, 'views')); // Define a route app.get('/', (req, res) => { res.render('index', { title: 'Home Page' }); }); // Start the server app.listen(3000, () => { console.log('Server running on http://localhost:3000'); });
Explanation:
app.set('view engine', 'ejs')
: Configures Express to use EJS as the templating engine for rendering views.app.set('views', path.join(__dirname, 'views'))
: Specifies the directory where your EJS templates are located. By default, Express looks for views in theviews
directory within your project root.
Create EJS Templates
Create EJS templates in the
views
directory. For instance, create a template namedindex.ejs
:views/index.ejs
:<!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>Welcome to <%= title %></h1> </body> </html>
In this example:
<%= title %>
is used to render thetitle
variable passed from the server.
Rendering Templates
In your route handlers, use
res.render()
to render the EJS templates with dynamic data.Example Route Handler:
app.get('/about', (req, res) => { res.render('about', { title: 'About Us' }); });
In this case:
- When a request is made to
/about
, theabout.ejs
template is rendered with the title set to "About Us".
- When a request is made to
Directory Structure
Ensure your project directory structure aligns with the default setup. A common structure is:
project-root/ ├── views/ │ ├── index.ejs │ ├── about.ejs ├── app.js ├── package.json
views/
: Contains EJS templates.app.js
: Main application file where EJS is configured as the view engine.
Optional Configuration
1. Customizing View Directory
If you want to use a different directory for your EJS templates, you can change the path in app.set('views', ...)
. For example:
app.set('views', path.join(__dirname, 'templates'));
This configures Express to look for EJS templates in the templates
directory.
2. Using Layouts
For more complex applications, you might want to use layout templates (a common header/footer across multiple pages). While EJS doesn’t provide built-in layout support, you can use libraries like express-ejs-layouts
.
Installation:
npm install express-ejs-layouts
Usage:
app.js
:
const expressEjsLayouts = require('express-ejs-layouts');
app.use(expressEjsLayouts);
app.set('layout', 'layout'); // Specify the layout file, e.g., layout.ejs in views directory
views/layout.ejs
:
<!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>
<%- body %> <!-- Content of the rendered view will be injected here -->
</body>
</html>
views/index.ejs
:
<h1>Welcome to <%= title %></h1>
Summary
- Install EJS and Express.
- Configure EJS as the view engine using
app.set('view engine', 'ejs')
. - Set the views directory where EJS templates are located.
- Render EJS templates in route handlers using
res.render()
. - Use optional configurations for custom directories and layout support as needed.
This setup enables you to build dynamic web pages by integrating server-side logic with HTML templates efficiently.