[node.js] Node.js - EJS - including a partial

I am trying to use Embedded Javascript renderer for node: https://github.com/visionmedia/ejs

I would like to know how I can include another view file (partial) inside a .ejs view file.

This question is related to node.js ejs

The answer is


_x000D_
_x000D_
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">_x000D_
_x000D_
 <form method="post" class="mt-3">_x000D_
        <div class="form-group col-md-4">_x000D_
          <input type="text" class="form-control form-control-lg" id="plantName" name="plantName" placeholder="plantName">_x000D_
        </div>_x000D_
        <div class="form-group col-md-4">_x000D_
          <input type="text" class="form-control form-control-lg" id="price" name="price" placeholder="price">_x000D_
        </div>_x000D_
        <div class="form-group col-md-4">_x000D_
            <input type="text" class="form-control form-control-lg" id="harvestTime" name="harvestTime" placeholder="time to harvest">_x000D_
          </div>_x000D_
        <button type="submit" class="btn btn-primary btn-lg col-md-4">Submit</button>_x000D_
      </form>_x000D_
_x000D_
<form method="post">_x000D_
        <table class="table table-striped table-responsive-md">_x000D_
            <thead>_x000D_
            <tr>_x000D_
                <th scope="col">Id</th>_x000D_
                <th scope="col">FarmName</th>_x000D_
                <th scope="col">Player Name</th>_x000D_
                <th scope="col">Birthday Date</th>_x000D_
                <th scope="col">Money</th>_x000D_
                <th scope="col">Day Played</th>_x000D_
                <th scope="col">Actions</th>_x000D_
            </tr>_x000D_
            </thead>_x000D_
            <tbody>_x000D_
            <%for (let i = 0; i < farms.length; i++) {%>_x000D_
                 <tr>_x000D_
                    <td><%= farms[i]['id'] %></td>_x000D_
                    <td><%= farms[i]['farmName'] %></td>_x000D_
                    <td><%= farms[i]['playerName'] %></td>_x000D_
                    <td><%= farms[i]['birthDayDate'] %></td>_x000D_
                    <td><%= farms[i]['money'] %></td>_x000D_
                    <td><%= farms[i]['dayPlayed'] %></td>_x000D_
                    <td><a href="<%=`/farms/${farms[i]['id']}`%>">Look at Farm</a></td>_x000D_
                </tr>_x000D_
            <%}%>_x000D_
        </table>_x000D_
    </form>
_x000D_
_x000D_
_x000D_


app.js add

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

add your partial file(ejs) in views/partials

in index.ejs

<%- include('partials/header.ejs') %>

EJS by itself currently does not allow view partials. Express does.


In oficial documentation https://github.com/mde/ejs#includes show that includes works like that:

<%- include('../partials/head') %>

Works with Express 4.x :

The Correct way to include partials in the template according to this you should use:

<%- include('partials/youFileName.ejs') %>.

You are using:

<% include partials/yourFileName.ejs %>

which is deprecated.


Express 3.x no longer support partial. According to the post ejs 'partial is not defined', you can use "include" keyword in EJS to replace the removed partial functionality.


In Express 4.x I used the following to load ejs:

  var path = require('path');

  // Set the default templating engine to ejs
  app.set('view engine', 'ejs');
  app.set('views', path.join(__dirname, 'views'));

  // The views/index.ejs exists in the app directory
  app.get('/hello', function (req, res) {
    res.render('index', {title: 'title'});
  });

Then you just need two files to make it work - views/index.ejs:

<%- include partials/navigation.ejs %>

And the views/partials/navigation.ejs:

<ul><li class="active">...</li>...</ul>

You can also tell Express to use ejs for html templates:

var path = require('path');
var EJS  = require('ejs');

app.engine('html', EJS.renderFile);

// Set the default templating engine to ejs
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// The views/index.html exists in the app directory
app.get('/hello', function (req, res) {
  res.render('index.html', {title: 'title'});
});

Finally you can also use the ejs layout module:

var EJSLayout = require('express-ejs-layouts');
app.use(EJSLayout);

This will use the views/layout.ejs as your layout.


As of Express 4.x

app.js

// above is all your node requires

// view engine setup
app.set('views', path.join(__dirname, 'views')); <-- ./views has all your .ejs files
app.set('view engine', 'ejs');

error.ejs

<!-- because ejs knows your root directory for views, you can navigate to the ./base directory and select the header.ejs file and include it -->

<% include ./base/header %> 
<h1> Other mark up here </h1>
<% include ./base/footer %>