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
Related
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": "*"
},
so I was trying to follow a tutorial to use node.js as the front end of a wordpress site
This one http://www.1001.io/improve-wordpress-with-nodejs/
Here is the code from server.js
var frnt = require('frnt');
var fs = require("fs");
var path = require("path");
var express = require('express');
var app = express();
var doT = require('express-dot');
// Define where the public files are, in this example ./public
app.use(express.static(path.join(__dirname, 'public')));
// Make sure this is set before the frnt middleware, otherwise you won't
// be able to create custom routes.
app.use(app.router);
// Setup the frnt middleware with the link to the internal server
app.use(frnt.init({
proxyUrl: "http://localhost:8888/frnt-example/wordpress", // The link to your wordpress site
layout: false // We simplify this example by not using layouts
}));
// define rendering engine
app.set('views', path.join(__dirname, "views"));
app.set('view engine', 'html' );
app.engine('html', doT.__express );
// respond with "Hello World!" on the homepage
app.get('/', function (req, res) {
res.send('./views/index.html');
});
app.listen(8080); // listen to port 8080
It keeps outputting the following
./views/index.html
Rather than rendering the html?
I've never used frnt, but res.send sends a string so that's no big surprise.
Look at res.sendfile which sends the contents of a file.
I prefer to use ejs , it's sems like html just edit index.html to index.ejs
1- install ejs module npm install ejs
2- add this in app.js
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
and render the index.ejs by using
app.get('/', function (req, res) {
res.render('index'); // or res.render('index.ejs');
});
res.send() // it send just a string not file
Hope it usefull !
I'm stuck on it since Friday, please.. somebody help me!!!
I have this route in my app.js:
app.get('/', function(req, res) {
res.render('login', {
user: req.user
});
});
He is rendering the layout inside the views folder, which is inside the server folder.
I have this configuration in my app.js:
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
It's not working put:
app.set('views', __dirname + '../public');
Because it's searching like this:
"app/server../public"
and i need this:
"app/public"
Please, if someone know fix this, please help me!
Always use the path module to join paths.
var path = require('path');
var uri = path.join(__dirname, '../public');
I study the MEAN conceptions by this video course by Joe Eames.
This course interesting because teach how to use JADE templates as partials instead of HTML.
\bin
\node_modules
\public
\app
\main
someCntr.js
otherCntr.js
main.js
\server
\views
\partials
main.jade
featured-courses.jade
new-courses.jade
And all was going well until he moved this jade templates from \views\includes to \public\app\main and \public\app\courses in his Express 3.4. This trick does not work in my Express 4
his server.js file before
app.set('views', path.join(__dirname, '/server/views'));
app.set('view engine', 'jade');
app.get('/partials/:partialPath', function(req, res) {
res.render('partials/' + req.params.partialPath);
});
and after moving
app.set('views', path.join(__dirname, '/server/views'));
app.set('view engine', 'jade');
app.get('/partials/*', function(req, res) {
res.render('public/app/' + req.params);
});
You have to update jade to it's latest version:
http://expressjs.com/guide/migrating-4.html
I'm studying this course too, and I come to same problem...
The solution is to use req.params[0]. In server.js file the route to partials views like this:
insted of
app.get('/partials/*', function(req, res) {
res.render('public/app/' + req.params);
});
write:
app.get('/partials/*', function(req, res) {
res.render('../../public/app/' + req.params[0]);
});
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?