Node.js - EJS - including a partial

Question

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.

Biskra

The partial system is actually a part of ExpressJS, I believe. Are you using the Express framework? – Cajuput

No, I am not using that.. I probably have to go down that route if it's not possible with just a templating engine. – Biskra

Answer 1

With Express 3.0:

<%- include myview.ejs %>

the path is relative from the caller who includes the file, not from the views directory set with app.set("views", "path/to/views").

EJS v1 includes
EJS v2 includes

(Update: the newest syntax for ejs v3.0.1 is <%- include('myview.ejs') %>)

Arbogast

this should be the correct answer since the developer of ejs / express updated the code. – Dispermous

In ejs2 I hade code like that looked like this and worked. <% include myview.ejs %> In ejs3 it need to look like this <%- include('myview.ejs') %> Guess the number of hours it took for me to realise I had to add the dash in the beginning? (Just adding this comment in case someone else in the same situation reads it.) – Bartholomeo

<%- include('partials/footer') %> works as well – Bakemeier

The correct link now should be: github.com/mde/ejs#includes – Stringer

Answer 2

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.

Alar

Answer 3

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.

Amide

i got missing ) error, i have to put it like <%- include ('partials/navbar.ejs') %> – Doily

Answer 4

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 %>

Trilobite

Answer 5

app.js add

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

add your partial file(ejs) in views/partials

in index.ejs

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

Rousing

Answer 6

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.

Chinookan

Check out ejs-locals for expresss 3 support. – Pollitt

Answer 7

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

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

Visitation

Answer 8

Also

<%- include('partials/header.ejs',{paramName: paramValue}) %>

Psych

Answer 9

    <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">

 <form method="post" class="mt-3">
        <div class="form-group col-md-4">
          <input type="text" class="form-control form-control-lg" id="plantName" name="plantName" placeholder="plantName">
        </div>
        <div class="form-group col-md-4">
          <input type="text" class="form-control form-control-lg" id="price" name="price" placeholder="price">
        </div>
        <div class="form-group col-md-4">
            <input type="text" class="form-control form-control-lg" id="harvestTime" name="harvestTime" placeholder="time to harvest">
          </div>
        <button type="submit" class="btn btn-primary btn-lg col-md-4">Submit</button>
      </form>

<form method="post">
        <table class="table table-striped table-responsive-md">
            <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">FarmName</th>
                <th scope="col">Player Name</th>
                <th scope="col">Birthday Date</th>
                <th scope="col">Money</th>
                <th scope="col">Day Played</th>
                <th scope="col">Actions</th>
            </tr>
            </thead>
            <tbody>
            <%for (let i = 0; i < farms.length; i++) {%>
                 <tr>
                    <td><%= farms[i]['id'] %></td>
                    <td><%= farms[i]['farmName'] %></td>
                    <td><%= farms[i]['playerName'] %></td>
                    <td><%= farms[i]['birthDayDate'] %></td>
                    <td><%= farms[i]['money'] %></td>
                    <td><%= farms[i]['dayPlayed'] %></td>
                    <td><a href="<%=`/farms/${farms[i]['id']}`%>">Look at Farm</a></td>
                </tr>
            <%}%>
        </table>
    </form>

Promote

Welcome to Stack Overflow, Enividu Indonesia. Please, consider adding more details on your answer instead of only the code. – Instigate

Answer 10

For including ejs file you must use:

<%- include("file-name") %>

Note: NO need to use .ejs in file name.

Sirup

Answer 11

Nothing to Worry It's Very Simple Only Follow the Below Step

1. <%- include("partials/header") -%> //for header.ejs
2. This EJS Body Content
3. <%=abt%>
4. <%-include("partials/footer") -%> //for footer.ejs

Wickner

Answer 12

// app.ejs

• <%- include('header'); -%> //for file header.ejs
• <%- include('footer'); -%> // for file footer.ejs
• app.post("/", function(req, res) { res.render("header") });
• app.post("/", function(req, res) { res.render("footer") });

Bah

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Spinet

Answer 13

For including ejs file you must use:

<%- include("relative path of ejs ") -%>

Chimp

Answer 14

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

Biskra

Outdated info. New version supports it as per comment by @pkyeck – Dispermous