So the problem is that node.js doesn't send my javascript files correctly. I can find them in the html code, but they are not executed by the browser. Those js files don't even appear in the firebug's NET panel when I reload the page.
I am using Express with Jade.
Any ideas how to fix this issue? Or what's causing it?
Make sure you have express.static set properly in app.configure.
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
// Also, make sure you have the most updated versions of express and node.js. Both change often.
Related
When using Express version 4.15.2, the following (apparently commonly encountered) error appeared in the browser--- 500 Error: Failed to lookup view "index" at Function.app.render. I've read the solutions offered to several such victims, but my __dirname value is indeed pointing to the correct views folder, and the correct path for 'views' is indeed constructed in the app.js file which I'm using in the Windows command line (i.e., >node app.js). The only thing I notice that seems strange is that the 'index' file present in the views folder is named 'index.jade'. I'm using pug instead of jade. In fact, hasn't use of Jade been discontinued? Could this be the problem? Should there be a '.pug' extension now for windows, or no extension at all on the index file?
Per your request to see the configuration (although, it's pretty standard, and I didn't change anything but the 'jade', to 'pug'), the following is the only configuration I see in app.js. (And changing the view engine from 'jade' to 'pug' got rid of the error of not finding 'jade'.)
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' === app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', routes.index);
app.get('/users', user.list);
Yes, indeed, all I had to do was to change the extension .jade to the extension .pug on both the index and the layout file, and that solved the problem. Thus, the problem wasn't __dirname; that was indeed correct. The problem was that it didn't like the .jade extension.
Thanks for the ideas anwyay.
Does setting this
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
always cause
res.render([path]);
to start in the views directory? In other words, is the views directory always implied for res.render() after setting up the view engine.
Yes, that will make render look in 'views'
http://expressjs.com/4x/api.html#app.render
If you scroll down to application settings it will tell you the default setting for view is
process.cwd() + '/views'
How do you render an html file while keeping the templating engine as jade ?
app.set('view engine', 'jade'); is where i've set the templating engine as jade and I want to do something like
app.get('/world', function(req,res){
res.render('profile.html', );
To render the html file.
I'm programming in node.js using express.js.
Note: i've already require html using var html=require('html');
Edit:
I understand res.render need not be used as html is already rendered. res.send(profile.html); gives error of profile is undefined
You can render jade files (.jade) but not html files as the result will be the html. What do you mean by rendering the html file?
Replace your res.render('profile.html') by res.sendfile('[path_to_the_file]profile.html')
I think you can use consolidate and mustache templating engine
npm install consolidate mustache
var engines = require('consolidate');
app.engine('html', engines.mustache);
app.set('view engine', 'html');
if you want to test the .html files, the easiest way to do it is to temporarily change the engine and add consolidate and swig modules
npm install consolidate
npm install swig
cons = require('consolidate'),
app.engine('html', cons.swig);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');
Then you can simply render like this:
app.get('/', function(req, res){
res.render("index");
});
I have read around about this a lot and it seems like its an issue that confuses a lot people. I am doing a project with express and I dont want to you any tempting engines, I am using backbone with underscore and thats enough for me. I want to write plain HTML and render them..
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set("view options", {layout: false});
app.use(express.static(__dirname + '/views'));
app.set('views', __dirname + '/views');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use( express.cookieParser() );
app.use(express.session({ secret: 'topsecret' } ));
app.use(passport.initialize());
app.use(passport.session());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
});
this is what I have so far.. I am having a hard time to understand how express knows to render the index.html file as my home page even though I have this:
app.get('/', function(req, res){
console.log("Heyyyyyy");
});
I would expect nothing to be rendered and "Heyyyy" to be printed but express renders the index.html and doesnt print "Heyyyy"
Express evaluates middleware in the order in which they are configured.
You have a static file handler before your app.router.
Take the index.html file out of the __dirname + '/views' directory.
You also have a static file handler at the bottom of your middleware stack. Static file handlers should be at the top of your middleware stack. When they're at the bottom of your middleware stack each request unnecessarily processes all of the stack. For example, you don't need to run express.bodyParser() when serving static files.
Im using ejs as template engine with default layout off, but i activate it on demand via {layout:True}, i have two urls '/' and '/session/new' the css and js are show OK in the former but in the second one they would adress to 'http://localhost/sessions/public/stylesheets/my.css'
i tried using *stylesheet_link_tag* as seen here (http://railwayjs.com/), but i guess its only for railwayjs, is there anything im missing,
im thinking of a workaround of addind a depth variable to precede the link and that would be filled with '/..' depending on the route
here is my configure
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('view options', {layout: false});
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});