CODEWITHSUNDEEP
expresslayoutejs
kaizenCoder
kaizenCoder

Reputation: 2229

Why does express-ejs-layout fails to render layout.ejs?

In the configuration below, the contents of home.ejs does not appear to get plugged into the <%- body %> of the layout.ejs page. Hitting the default route / returns the contents of the home.ejs with none of the structure or styling in layout.ejs.

I couldn't find any useful information to troubleshoot how express-ejs-layouts work. Any thoughts on why this might be?

App structure:

.
├── app
├── main.js
├── node_modules
├── package.json
└── public
    ├── css
    │   └── style.css
    ├── js
    │   └── app.js
    └── views
        ├── layout.ejs
        └── pages
            ├── events.ejs
            ├── home.ejs
            └── test.ejs

Configuration snippet:

// file: app/server.js

// template engine
app.set('view engine', 'ejs');
app.use(expressLayouts);

// set views directory
app.set('views', __dirname + '/../public/views');

app.use(express.static(__dirname + '/../public'));

Route:

//file: app/controllers/mainController.js

exports.home = function(req,res){
    res.render('pages/home');
}

EJS files:

layout.js (snippet)

    <!--file: public/views/layout.ejs -->
...
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <link rel="stylesheet" href="../css/style.css">

        ...

            <main id="site-main">
                <div class="container">
                    <%- body %>
                </div>
            </main>
...

home.ejs

<!--file: public/views/pages/home.ejs -->
    This is the home page

EDIT 1:

My example above didn't clearly highlight that i was declaring my route as app.use('/',router) before use.app(expressLayouts). Swapping it around fixed the problem.

Upvotes: 2

Views: 2569

Answers (2)

Tharindu Thisarasinghe
Tharindu Thisarasinghe

Reputation: 3998

Set layout declaration just before the route declaration

Like this.. 

    //set the layouts
    app.set('view engine', 'ejs');
    app.use(expressLayouts);

    //set the routes
    app.use(require('./app/routes'));

Upvotes: 3

Michael Troger
Michael Troger

Reputation: 3497

I just set up a simple Express server using your file structure. If I request the home page from the client, I receive:

<main id="site-main">
    <div class="container">
        This is the home page
    </div>
</main>

This is what you want, right? The content of the home.ejs is included in the layout.ejs.

I wonder why it's not working for you. The simplified server.js I used (note no special routing file):

var express = require('express');
var expressLayouts = require('express-ejs-layouts');

var app = express();

app.set('view engine', 'ejs');
app.use(expressLayouts);

app.set('views', __dirname + '/../public/views');
app.use(express.static(__dirname + '/../public'));

app.get('/', function(req, res) {
   res.render('pages/home');
});

app.listen(3000);

My dependencies in package.json:

{
  "ejs": "^2.5.2",
  "express": "^4.14.0",
  "express-ejs-layouts": "^2.2.0"
}

Tell me if that works for you, then we can research what's the problem with your configuration.

EDIT: Turned out that the OP put his route declaration app.use('/',router); before app.use(expressLayouts); That's why the layout.ejs was not considered for rendering.

Upvotes: 4

Related Questions