Javascript not rendering in jade

Question

I am unable to call my script.js file from inside jade though javascript renders perfectly fine if inserted inline. This is my first attempt, so the js file is simply an alert:

alert("javascript works");

I'm inclined to believe that I am improperly calling the script. Currently layout.jade looks like:

doctype 5
html
  head
    title= "LeafPress - Hot off the Presses"
    link(rel='stylesheet', href='/stylesheets/style.css')
  block scripts
    script(type='text/javascript', src='/javascripts/script.js')
  body
    block content

I've tried a number of permutations of the script path (../public/javascripts/script.js; /public/javascripts/script.js; public/javascripts/script.js; javascripts/script.js; script.js), as well as trying placing the script directly in the root and 'views' dir.

app.js:

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes/index')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

var app = express();

app.configure(function(){
  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(express.cookieParser('your secret here'));
  app.use(express.session());
  app.use(app.router);
  app.use(require('stylus').middleware(__dirname + '/public'));
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

app.get('/', routes.index);
app.get('/permalink', routes.permalink);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

index.js:

/*
 * GET home page.
 */

exports.index = function(req, res){
  res.render('index', { title: 'Express' });
};

exports.permalink = function(req, res) {
  res.render('permalink', { title: 'Comments page' });
};

My relevant file hierarchy looks like:

- public
  - javascripts
    - script.js
- views
  - index.jade
  - layout.jade
- routes
  - index.js

app.js

This seemed relevant, but didn't fix the problem: static javascript not rendering in jade (with express/node.js)

What do the script tags in the rendered HTML look like? Also what does the network tab of your web inspector say? Are the scripts being requested? If so, whats is your node server responding with? — Alex Wayne
– Alex Wayne, Commented Dec 7, 2012 at 0:42

Peter Lyons · Accepted Answer · 2012-12-07 05:33:37Z

2

Try removing this line entirely app.use(app.router);. Manually changing the location of the router in the express middleware stack is usually going to yield undesired behavior. Don't do it unless you are truly certain you know exactly why you are doing it and what you expect to happen. What the express logger's output for the notorious cannot GET /javascripts/script.js, which will point directly at middleware/routing misconfiguration.

I'm guessing your markdown syntax is your question is just busted, but make sure the script.js file is inside the javascripts directory, not a sibling of it.

answered Dec 7, 2012 at 5:33

Peter Lyons

147k32 gold badges285 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Henry Marshall Over a year ago

Thanks, that got everything working correctly. Fixed the hierarchy syntax.

Collectives™ on Stack Overflow

Javascript not rendering in jade

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related