CODEWITHSUNDEEP
node.jsexpresshandlebars.js
supermario
supermario

Reputation: 2755

How to change handlebars extension for express?

I am new to node.js and I'd like to use handlebars template engine but with a shorten extension hbs.

Here is the original code (source):

var handlebars = require('express3-handlebars')
.create({ defaultLayout: 'main' });
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');

It worked fine with templates with handlebars extension, but I changed it to:

var handlebars = require('express3-handlebars')
.create({ defaultLayout: 'main' });
app.engine('hbs', handlebars.engine);
app.set('view engine', 'hbs');

And change all the template extentions to hbs. However, now I get this error:

Error: ENOENT: no such file or directory, open '/path/to/node/myproject/views/layouts/main.handlebars'
   at Error (native)

I also tried 

var handlebars = require('express3-handlebars')
.create({ defaultLayout: 'main' , extname : '.hbs'});
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');

as per answer here,

but I results in:

Error: Failed to lookup view "500" in views directory "/path/to/myproject/views"
   at EventEmitter.render (/path/to/myproject/node_modules/express/lib/application.js:579:17)
   at ServerResponse.render (/path/to/myproject/node_modules/express/lib/response.js:961:7)
   at /path/to/myproject/app.js:96:6
   at Layer.handle_error (/path/to/myproject/node_modules/express/lib/router/layer.js:71:5)
   at trim_prefix (/path/to/myproject/node_modules/express/lib/router/index.js:310:13)
   at /path/to/myproject/node_modules/express/lib/router/index.js:280:7
   at Function.process_params (/path/to/myproject/node_modules/express/lib/router/index.js:330:12)
   at next (/path/to/myproject/node_modules/express/lib/router/index.js:271:10)
   at Layer.handle_error (/path/to/myproject/node_modules/express/lib/router/layer.js:67:12)
   at trim_prefix (/path/to/myproject/node_modules/express/lib/router/index.js:310:13)

I tried other things too but none worked so wondering how can I fix this?

Upvotes: 12

Views: 7009

Answers (4)

Guzter
Guzter

Reputation: 1

There is nothing wrong with your code, you just need to create a folder within the views folder and name it to layouts, and then move your defaultLayout = main.hbs to it .

If you've got : Error : The partial header could no be found . Go create another file within the views folder again and name it to partials and then put all your partials there __Like the header file and so on ... .

Upvotes: 0

nipun-kavishka
nipun-kavishka

Reputation: 922

'express3-handlebars' package is deprecated now(2020). So you can try this out

const handlebarOptions = {
    viewEngine: {
      extName: '.hbs',
      partialsDir: 'views',//your path, views is a folder inside the source folder
      layoutsDir: 'views',
      defaultLayout: ''//set this one empty and provide your template below,
    },
    viewPath: 'views',
    extName: '.hbs',
  };


mailTransport.use('compile', hbs(handlebarOptions));

const mailOptions = {
        from: '"Spammy Corp." <[email protected]>',
        to: '[email protected]',
        template: 'index',//this is the template of your hbs file
  };

Upvotes: 0

supermario
supermario

Reputation: 2755

This did the trick:

exphbs = require('express3-handlebars'),
app.engine('hbs', exphbs({defaultLayout: 'main', extname: '.hbs'}));
app.set('view engine', 'hbs');

Upvotes: 15

G&#246;kay G&#252;rcan
G&#246;kay G&#252;rcan

Reputation: 1092

You can use express-hbs instead of express3-handlebars.

Simply, you can do:

var hbs = require('express-hbs');
/*
...
*/
app.engine('hbs', hbs.express4({
  partialsDir   : __dirname +'/views/partials',
  defaultLayout : __dirname +'/views/layouts/default',
  extname       : '.hbs',
  layoutsDir    : __dirname +'/views/layouts',
}));

app.set('view engine', 'hbs');
app.set('views', __dirname + '/views');

Upvotes: 2

Related Questions