CODEWITHSUNDEEP
htmlexpresspug
Mosho
Mosho

Reputation: 7078

Express.js and Jade - linking CSS

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.

I use:

link(href='../../dist/css/bootstrap.min.css', rel='stylesheet')

which is technically where it is, but when I try looking at the request in chrome's tools I see:

Request URL:http://localhost:1248/dist/css/bootstrap.min.css

Does this mean I need a new route for it? Or is there something in the express UI I should use?

index.jade: (translated from bootstrap's example)

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')

The server:

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'));

Upvotes: 0

Views: 1836

Answers (2)

Mosho
Mosho

Reputation: 7078

Solved this by removing:

app.get("*", function(request, response) {
      response.end("404!");
    });

Not sure why though. The thing about having all these libraries is that it makes debugging quite the guesswork.

Upvotes: 0

Jack Shultz
Jack Shultz

Reputation: 2081

Can you try referencing CSS under your public directory?

your server is making public your root directory

app.use(express.static(path.join(__dirname, 'public')));

Files and directories under public do not require routes. If dist is outside of public there is no way to make it visible to your browser regardless to the path you are using. Otherwise use dist as your public directory.

so

link(href='/css/bootstrap.min.css', rel='stylesheet')

server

app.use(express.static(path.join(__dirname, 'dist')));

Upvotes: 1

Related Questions