ericf / express-handlebars

A Handlebars view engine for Express which doesn't suck.
BSD 3-Clause "New" or "Revised" License
2.32k stars 382 forks source link

Issue with rendering partials #198

Open Pau1fitz opened 7 years ago

Pau1fitz commented 7 years ago

I am trying to use this library express-handlebars and make use of partials but I am getting the following error message

The partial header could not be found.

My app.js code looks like as follows.

var express = require('express');
var exphbs  = require('express-handlebars');

var app = express();

app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'hbs');

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

app.listen(3000);

This is all working and the express app is running on localhost:3000.

My folder structure is as follows:

|_app.js
|_views_
        |_home.hbs
        |_layouts_
                  |_main.hbs
        |_partials_
                   |_header.hbs

main.hbs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example App</title>
</head>
<body>

    {{{body}}}

</body>
</html>

header.hbs

<nav>
  <a href="/">Home</a>
  <a href="/contact">Contact</a>
</nav>

home.hbs

{{> header}}

<h1>Hey world!</h1>

Everything works as expected until I try and introduce header.hbs as a partial.

I have also tried this

Following further investigation I have also tried this:

// Create `ExpressHandlebars` instance with a default layout.
var hbs = exphbs.create({
    // Uses multiple partials dirs, templates in "shared/templates/" are shared
    // with the client-side of the app (see below).
    partialsDir: [
        'views/partials/'
    ]
});

// Register `hbs` as our view engine using its bound `engine()` function.
app.engine('hbs', hbs.engine);
app.set('view engine', 'hbs');
benjipott commented 7 years ago

Hi, you can set : extname: '.hbs',

// Create `ExpressHandlebars` instance with a default layout.
var hbs = exphbs.create({
    extname: '.hbs',
    partialsDir: [
        'views/partials/'
    ]
});