Why can't Jade find my resources?

Question

My jade template can't find the bootstrap assets. It throws the following 404s. (/loadMedia is the route called that loads the layout.jade, which is successful.)

What am I doing wrong?

GET /loadMedia 200 19ms - 572
GET /assets/js/jquery-1.8.3.min.js 404 2ms
GET /assets/css/bootstrap.min.css 404 2ms
GET /assets/js/bootstrap-dropdown.js 404 1ms
GET /assets/js/bootstrap.min.js 404 2ms
GET /assets/js/bootstrap.js 404 3ms

App.configure:

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views/templates');
  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(__dirname, 'public'));
});

My folder structure:

.
├── README.md
├── app.js
├── node_modules
│   ├── express
│   ├── jade
│   └── mongodb
├── package.json
├── routes
└── views
    ├── assets
    │   ├── css
    │   │   ├── bootstrap-responsive.css
    │   │   ├── bootstrap-responsive.min.css
    │   │   ├── bootstrap.css
    │   │   └── bootstrap.min.css
    │   ├── img
    │   └── js
    │       ├── bootstrap-dropdown.js
    │       ├── bootstrap.js
    │       ├── bootstrap.min.js
    │       └── jquery-1.8.3.min.js
    └── templates
        ├── layout.jade
        └── loadMedia.jade

Here is my layout.jade:

!!! 5
html
    head
    script(type="text/javascript", src="../assets/js/jquery-1.8.3.min.js")
    script(type='text/javascript', src='../assets/js/bootstrap.js')
    script(type='text/javascript', src='../assets/js/bootstrap.min.js')
    script(type='text/javascript', src='../assets/js/bootstrap-dropdown.js')
    link(rel='stylesheet', type='text/css', href='../assets/css/bootstrap.min.css')
    style
        body
        {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
        }
        .search-query
        {
        margin-top: 5px;
        margin-right: 2px;
        }

Answer 1

Put your assets folder in the public folder and remove the leading "../" from the script src reference.

If you don't have a "public" folder, please create one, since you already refer to it in your config. create it in the root of the application, the same location where you have views and routes.

Not sure if you have that line setup properly, try changing to this.

app.use(express.static(__dirname + '/public'));

Then you have to change your script reference as well.

 script(type="text/javascript", src="../assets/js/jquery-1.8.3.min.js")

should be

 script(type="text/javascript", src="assets/js/jquery-1.8.3.min.js")