Trying to get this to work with Express

I saw there was another closed issue about this but it didn’t really help me. I have a frontend framework that’s currently using this plugin with gulp to compile my templates into HTML but now I’m looking to move to an express server and for the server to serve the templates as responses instead.

Here’s a simplified version of what I’m working with:

Directories:

- app.js
- build
- src
    - layouts
        - main.hbs
        - generic.hbs
    - partials
        - header.hbs
    - pages
        - index.hbs
    - styles
    - scripts
    - images

app.js

let express = require("express");
let exphbs = require("express-handlebars");
let layouts = require("handlebars-layouts");

let app = express();

let hbs = exphbs.create({
	extname: ".hbs",
	layoutsDir: "src/layouts/",
	defaultLayout: "main",
	partialsDir: ["src/partials/"]
});

var handlebars = hbs.handlebars;

handlebars.registerHelper(layouts(handlebars));

app.engine(".hbs", hbs.engine);
app.set("view engine", ".hbs");
app.set("views", "src/");

app.get("/", function (req, res) {
	res.render("pages/index");
});

app.listen(3000, function(){
	console.log("Now listening on port 3000");
});

index.hbs

{{#extend "generic"}}
	{{#content "content"}}
		Hello world
	{{/content}}
{{/extend}}

generic.hbs

{{#extend "main"}}
	{{#content "body"}}
		<div class="padded-h-xl padded-v-md">
			{{#block "content"}}{{/block}}
		</div>
	{{/content}}
{{/extend}}

And the error I get:

Error: Missing partial: 'generic'

No idea if I’m going about this the right way or not. I tried searching for “express-handlebars” and “handlebars-layouts” to try and find some code examples of them both being used together but couldn’t find anything useful.

Any ideas?

[Jazcash]

Got it working with handlebars-wax. Cheers. Here’s my code for future reference:

let express = require("express");
let handlebars = require("handlebars");
let layouts = require("handlebars-layouts");
let handlebarsWax = require('handlebars-wax');

let app = express();

var wax = handlebarsWax(handlebars)
	.partials('src/partials/**/*.{hbs,js}')
	.partials('src/layouts/**/*.{hbs,js}')
	.helpers(layouts);

app.engine("hbs", wax.engine);
app.set("view engine", "hbs");
app.set("views", "src/");

app.get("/", function (req, res) {
	res.render("pages/index");
});

app.listen(3000, function(){
	console.log("Now listening on port 3000");
});

[shannonmoeller]

Got it working with handlebars-wax.

Yay!

Please note that the layout helpers expect the partials to be registered directly, you can’t use express-handlebars’ dynamic partial loading.

^^^ from #20