title: Express.js and Jade - linking CSS
body: <p>I'm trying to create a web app using Express.js with some Bootstrap templates. I used jade2html and the page loads fine other than it has no styling.</p>
  
  <p>I use:</p>
  
  <pre><code>link(href='../../dist/css/bootstrap.min.css', rel='stylesheet')
  </code></pre>
  
  <p>which is technically where it is, but when I try looking at the request in chrome's tools I see:</p>
  
  <pre><code>Request URL:http://localhost:1248/dist/css/bootstrap.min.css
  </code></pre>
  
  <p>Does this mean I need a new route for it? Or is there something in the express UI I should use?</p>
  
  <p><strong>index.jade:</strong> (translated from bootstrap's example)</p>
  
  <pre><code>doctype html
  html(lang='en')
  head
      meta(charset='utf-8')
      meta(http-equiv='X-UA-Compatible', content='IE=edge')
      meta(name='viewport', content='width=device-width, initial-scale=1')
      meta(name='description', content='')
      meta(name='author', content='')
      link(rel='shortcut icon', href='')
      title Starter Template for Bootstrap
      //
         Bootstrap core CSS 
      link(href='../../dist/css/bootstrap.min.css', rel='stylesheet')
      //
         Custom styles for this template 
      //link(href='starter-template.css', rel='stylesheet')
      //
         Just for debugging purposes. Don't actually copy this line! 
      //if lt IE 9
        script(src='../../assets/js/ie8-responsive-file-warning.js')
      //
         HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries 
      //if lt IE 9
        script(src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js')
        script(src='https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js')
    body
      .navbar.navbar-inverse.navbar-fixed-top(role='navigation')
        .container
          .navbar-header
            button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
              span.sr-only Toggle navigation
              span.icon-bar
              span.icon-bar
              span.icon-bar
            a.navbar-brand(href='#') Project name
          .collapse.navbar-collapse
            ul.nav.navbar-nav
              li.active
                a(href='#') Home
              li
                a(href='#about') About
              li
                a(href='#contact') Contact
          //
            /.nav-collapse 
      .container
        .starter-template
          h1 Bootstrap starter template
          p.lead
            | Use this document as a way to quickly start any new project.
            br
            | All you get is this text and a mostly barebones HTML document.
      //
         /.container 
      //
         Bootstrap core JavaScript
            ================================================== 
      //
         Placed at the end of the document so the pages load faster 
      script(src='https://code.jquery.com/jquery-1.10.2.min.js')
      script(src='../../dist/js/bootstrap.min.js')
  </code></pre>
  
  <p><strong>The server:</strong></p>
  
  <pre><code>var compiler = require("../src/compiler"),
  
      fs       = require("fs"),
      graph = require("../src/graph-text").Graph,
      sys = require("sys"),  
      my_http = require("http"),
      XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest,
      express = require("express"),
      path = require('path');
  
  
      var app = express();
  
      app.configure(function(){
        app.set('port', process.env.PORT || 8080);
        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')));
      });
  
      app.configure('development', function(){
        app.use(express.errorHandler());
      });
  
      app.all("*", function(request, response, next) {
        response.writeHead(200, { "Content-Type": "text/plain" });
        next();
      });
  
      app.get("/", function(request, response) {
        response.render('index.jade');
      });
  
  
  
      app.get("*", function(request, response) {
        response.end("404!");
      });
  
      app.listen(app.get('port'));
      console.log("Express app started on port %d",app.get('port'));
  </code></pre>