express-handlebars
express-handlebars copied to clipboard
Issue with rendering partials
trafficstars
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');
Hi, you can set : extname: '.hbs',
// Create `ExpressHandlebars` instance with a default layout.
var hbs = exphbs.create({
extname: '.hbs',
partialsDir: [
'views/partials/'
]
});