ejs include doesn't work with subfolders

Question

I am using express and ejs to build a website:

"dependencies": {
 "ejs": "^2.5.2",
 "express": "^4.14.0",

in my app.js I have defined ejs as template engine and the root of views:

app.set('view engine', 'ejs'); // set view engine
app.set('views', 'app/views'); // set custom root for view engine

I then created my index.ejs file in which I included a partial from a subdirectory: index.ejs

  <head><% include ./partials/template/head %></head>

folder structure:

- views
  index.ejs
-- partials
-- -- template
      head.ejs

When a start the server, index is loaded without errors but without the head section. If I change the include (pointing to a wrong location) the server fails to start highlighting the problem, so ejs is able to locate the head.ejs. if I move head.ejs in the views directory the head is correctly loaded in the index.ejs. So... I am a bit puzzled, it seems that in the subdirectory the file read but not loaded into the include.

After searching for around I tried using express-partials but it has not helped much.

Any clue?

Cheers, Giovanni

Answer 1

just change your include statement like this

<%- include("./partials/template/head.ejs") %>

this worked for me.

Answer 2

With Express 4.0

<%- include header.ejs %>

this worked for me.

Answer 3

I've never used an EJS template in <head> section.

I use ejs and express-ejs-layouts packages together.

So if you want to create a top division which would be fixed and appears on every different page (maybe a navigation part), you might create a main layout ejs for your application.

When I render an EJS on a route by using res.render('index'), rendered EJS page (index.ejs in my case) replace with <%- body %> parts in the example below.

And I use a navbar.ejs file with <% include navbar %> line. And the navbar is shown on the top of the page at every page, fixedly.

Example

app.js - needed variables, settings and middleware
var express = require('express')
var expressLayouts = require('express-ejs-layouts') // to use EJS layout

var app = express()

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

app.use(expressLayouts) // EJS Layout.ejs

layout.ejs file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>

        <% include navbar %>

        <%- body %>

        <% include page_footer %>

    </body>
</html>

Answer 4

with express 4.0 using "ejs-mate module

In app.js

// Khởi tạo express
var express = require('express');
var app = express();
var engine = require('ejs-mate');

var port = process.env.PORT || 3000;

// Khởi tạo public, view engine...
app.use(express.static(__dirname + "/public"));

// Sử dụng đuôi html
var ejs = require("ejs");
app.set('view engine', 'ejs');
app.engine('ejs', engine);

// Cấu hình thư mục views
app.set("views", __dirname + '/views');

// Khởi tạo Web Server
var server = app.listen(port, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log("Example app listening at http://%s:%s", host, port);
});

app.get('/Admin', function (req, res) {
    res.render('./admin/layout.ejs');
});

In layout.ejs

<html>
<head>
<%-partial('./sub-folder/header')%>
</head>
<body>
<--  -->
<h1>
buiducanh.net
</h1>
<%-partial('./sub-folder/footer')%>
</body>
</html>

Answer 5

I believe the problem to be not related to subfolders. If you look at your code:

  <head><% include ./partials/template/head %></head>

We can see the include directive is used which will invoke the templating engine and return the html that you desire to render in your <head /> section of index.ejs.

However it doesn't get rendered simply because you forgot to include a "-", which tells it to actually print the contents into that section of html, you can also use a "=" which does the same thing only escaped.

So to fix you should edit your index.ejs as follows:

  <head><%- include ./partials/template/head %></head>

Notice the inclusion of the "-" following the "<%".

Hope this helps.