How to design layout page in express js?

Question

I need to create static layout page in express js using handlebars. Layout will have header (contains username and company logo) and footer (contains copyright info). Hence the layout page should be common for all the pages in the route and only its body content should get change dynamically. I have tried with rendering header and footer as partial view but it displays only in index page and it is not appearing in further pages. Please suggest me to design layout page for express js application

Answer 1

You can easily do it. Just prepare your layout.hbs file and then put {{{body}}} where you want all other parts to be added. Alternatively (I prefer this way) you can use a bit extended version of handlebars with some extras.

You have to download module express-handlebars and require it in your server, then you will need to modify your template engine's config like this:

var expressHbs = require('express-handlebars');
app.engine('.hbs', expressHbs({defaultLayout: 'layout', extname: '.hbs'}));
app.set('view engine', '.hbs');

And then just create folders "layouts" and "partials" inside your view folder. And create your "layout.hbs" inside layouts folder. Now your app will run from layout page. Then just put all the partials together to your layout by using this syntax {{> partialName}}. All other partials you put in your partials folder