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

  1. Install EJS

    First, you need to install EJS and Express if you haven’t already.

    npm install express ejs
  2. 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 the views directory within your project root.
  3. Create EJS Templates

    Create EJS templates in the views directory. For instance, create a template named index.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 the title variable passed from the server.
  4. 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, the about.ejs template is rendered with the title set to "About Us".
  5. 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.