I have the following Express 4 view engine setup:
var handlebars = require('express-handlebars').create({
layoutsDir: path.join(__dirname, "views/layouts"),
partialsDir: path.join(__dirname, "views/partials"),
defaultLayout: 'layout',
extname: 'hbs'
});
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, "views"));
I have the following file structure:
/views
error.hbs
index.hbs
/partials
menu.hbs
/layouts
layout.hbs
And finally in my route: res.render('index');
And visiting my site, it loads only my index.hbs template. It does not use my layout.hbs. I don't get any errors or anything. It just doesn't use the layout even though layout is set as my default layout in the handlebars config.
Next I tried to change my code to this:
res.render('index', {layout: 'layout'});
Now I get the error:
Error: ENOENT: no such file or directory, open '/.../views/layout.hbs'
So it's like it's not finding my layoutsDir... What am I missing here?
Next I changed it to this:
res.render('index', {layout: 'layouts/layout'});
Okay so that worked. My layout is now loaded. But then I added in a partial to my layout:
{{> menu }}
Now I get: /.../views/index.hbs: The partial menu could not be found
So what is going on here? How come Handlebars isn't recognizing my layoutsDir or partialsDir? It's just not seeing them at all or something. And how come defaultLayout wasn't being used? I had to specify the layout.
According to the API documentation for express-handlebars if you are changing the file extension from the default .handlebars then when you set the view engine, all occurrences of handlebars should be replaced with the new extension you wish to use.
So your express setup will need to be updated to:
app.engine('hbs', handlebars.engine);
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, "views"));
Note: the documentation uses a period before the extension e.g. .hbs but it seems to work without this.
Full code:
var path = require('path');
var express = require('express');
var app = express();
var http = require('http').Server(app);
var handlebars = require('express-handlebars').create({
layoutsDir: path.join(__dirname, "views/layouts"),
partialsDir: path.join(__dirname, "views/partials"),
defaultLayout: 'layout',
extname: 'hbs'
});
app.engine('hbs', handlebars.engine);
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, "views"));
app.get('/', function(req, res){
res.render('index');
});
http.listen(3000, function(){
console.log("Server running");
});
In the new handlebars in your use partials you dont have to include its directory in server.js
The partials are included in "express-handlebars"
The first line in view engine setup is responsible for the above
Take note of these.
const hbs = require('hbs');
const expressHbs = require('express-handlebars');
//view engine setup
app.engine('.hbs', expressHbs({ defaultLayout: 'layout', extname: '.hbs' }));
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, '../views'));
app.use(express.static(path.join(__dirname, '../public')));
Try to use wildcard on your Dependencies to make sure you match the latest version
"dependencies": {
"express": "*",
"express-handlebars": "^3.0.0",
"hbs": "*"
},
Related
My views folder structure
view
-->layouts
---->main.hbs
-->partials
---->header.hbs
---->footer.hbs
-->pages
---->user
------>includes
-------->list.hbs
---->index.hbs
I can import partials files like header and footer in main.hbs
but have no idea about including list.hbs into pages/user/index.hbs.
This is my handlebars configuration
const path = require('path');
const exphbs = require('express-handlebars');
app.set('views', path.join(__dirname, '../views'));
app.set('view engine', 'hbs');
app.engine(
'hbs',
exphbs.engine({
extname: 'hbs',
layoutsDir: path.join(__dirname, '../views', 'layouts'),
partialsDir: path.join(__dirname, '../views', 'partials'),
defaultLayout: 'main'
}),
);
Handlebars template's filename extension
Hi,
my templates files got the extension .handlebars and I want to change it to .hbs
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
app.engine('handlebars', exphbs({defaultLayout: 'index'}));
app.set('view engine', 'handlebars');
when changing handlebars to hbs and renaming the files, errors appear. The files are not found anymore.
What is missing?
Try setting the following properties
const exphbs = require('express-handlebars');
const handlebars = exphbs.create({
// layoutsDir: path.join(__dirname, 'app/views/layouts'),
// partialsDir: path.join(__dirname, 'app/views/partials'),
defaultLayout: 'index',
extname: 'hbs'
});
app.engine('hbs', handlebars.engine);
app.set('view engine', '.hbs');
Change your code something like this:
`
const express = require('express');
var app = express();
const hbs = require('express-handlebars');
app.set('views', path.join(__dirname, 'views'));
app.engine('hbs', hbs({extname : 'hbs', defaultLayout: 'index', layoutsDir: __dirname+'/views/layouts'}));
app.set('view engine', 'hbs');
Change your file's extentions from
.hanlebars
to
.hbs and put your index.hbs file inside path/to/project/views/layouts and rest of the .hbs file should remain in path/to/project/views/.
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?
This did the trick:
exphbs = require('express3-handlebars'),
app.engine('hbs', exphbs({defaultLayout: 'main', extname: '.hbs'}));
app.set('view engine', 'hbs');
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');
'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." <ad.timely#gmail.com>',
to: 'nipunkavishka#gmail.com',
template: 'index',//this is the template of your hbs file
};
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 ... .
I've got a pretty basic expressjs application with the / route loading a view located in views/main/. However, I'm getting the following error:
Error: Failed to lookup view "main/index" in views directory "/Users/n0pe/Sync/src/proj/views/"
Here's my structure (omitting the unimportant):
/proj
/views
/main
index.hbs
app.js
And here's my app.js (the important parts):
var express = require('express');
var app = express();
app.set('views', __dirname+'/views/');
app.set('view engine', 'handlebars');
And here's the controller:
router.get('/', function(req, res, next) {
res.render('main/index', {title: 'test'});
});
What's missing from this pretty basic setup?
I tested it in local and everything works. Just one mistake
from app.set('view engine', 'handlebars'); to app.set('view engine', 'hbs');
my example
var express = require('express'),
app = express();
app.engine('html', require('hbs').__express);
app.set('views', __dirname+'/views/');
app.set('view engine', 'hbs');
app.get('/', function(req, res) {
res.render('main/index',{title :"page index"});
});
app.listen(3000);
I changed two things and it worked for me.
First
app.set('views', [path.join(__dirname, 'views'),path.join(__dirname, 'views/main')]);
I passed an array to the app.set and added the subdirectory
Second
res.render('../main/index', {title :"page index"}, function(err, html) {
console.log(err);
});
I changed the directory path to relatively navigate from the parent directory.
Using the ../ makes it work somehow. Also, once you add the directory to the app.set, you can call index directly e.g., res.render('index',...
Change your set views. it should be
app.set('views', path.join(__dirname, 'views'));
I think you need to change the file extension of the views from hbs to handlebars
How would I go about using .html extensions on my view files instead of .ejs when using Parse.com's Express.js?
I changed the EJS delimiters to <? and ?> because I'm used to them from PHP. That worked fine, but I can't seem to change the file extension for my view files:
I've tried the following:
var express = require('express');
var ejs = require('ejs');
var app = express();
ejs.open = '<?';
ejs.close = '?>';
app.set('view engine', 'ejs');
app.engine('.html', ejs.renderFile);
app.set('views', 'cloud/views'); app.use(express.bodyParser());
app.get('/', function(req, res) {
res.render('Test', { message: 'Hello Express!' });
});
app.listen();
And I get an internal server error.
I've also tried eliminating this line with the same result:
app.set('view engine', 'ejs');
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);
So I did app.set to html and app.engine to html and it was working for me.
this way works too:
app.set('view engine', 'html');
app.engine('html',require('ejs').renderFile);
someone knows any problem using this way?