CODEWITHSUNDEEP
node.jsexpresssassgruntjspug
user883807
user883807

Reputation:

expressjs 4 serving CSS file with HTML in it instead of the expected CSS

Express 4 is serving a style.css file but not the one that grunt-sass is compiling which is public/stylesheets/style.css. What is stranger is that the style.css file that is being served contains the compressed HTML code that is being generated from the app/views/index.jade file. Any ideas what is happening here?

My Project Info & Files

my app/views/index.jade 

doctype html

html
  head
    link(href="/favicon.ico", rel="shortcut icon", type="image/x-icon")
    link(rel="stylesheet", href="/public/stylesheets/style.css")
  body
    h1 Hello World
    script(src='http://localhost:35729/livereload.js')

my scss/style.scss

h1 { color : red; }

my public/stylesheets/style.css that is generated upon running grunt. so this is proof that my scss/style,scss is being compiled properly

h1{color:red;}

my server.js

var express = require('express'),
    path = require('path');

var env = process.env.NODE_ENV = process.env.NODE_ENV || 'development';

var app = express();

app.set('views', path.join(__dirname, '/app/views'));
app.set('view engine', 'jade');
app.use(express.static(__dirname + '/public'));

// make sure to coordinate client side and server side routes
app.get('*', function(req, res) {
  res.render('index');
});

var port = 3030;
app.listen(port);
console.log('Listening on port ' + port + '...');

my Gruntfile.js 

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'), 

    sass: {
      options: {
        includePaths: ['public/vendor/foundation/scss']
      },
      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: {
          'public/stylesheets/style.css' : 'scss/style.scss'
        }
      }
    },

    watch: {
      source: {
        files: ['scss/**/*.scss', 'Gruntfile.js'],
        tasks: ['sass'],
        options: {
          livereload: true
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['sass','watch']);
}

my package.json

{ "name": "my-project", "private": true, "scripts": { "start": "nodemon server.js" }, "dependencies": { "jade": "", "mongodb": "", "monk": "*", "less": "^1.7.0", "express": "^4.1.2" }, "devDependencies": { "grunt": "^0.4.4", "grunt-sass": "^0.12.1", "grunt-contrib-watch": "^0.6.1", "node-sass": "^0.8.6" } }

my project tree

.
├── app
│   └── views
│       └── index.jade
├── bower.json
├── class3s.js
├── Gruntfile.js
├── node_modules
│   ├── express
│   ├── grunt
│   ├── grunt-contrib-watch
│   ├── grunt-sass
│   ├── jade
│   ├── mongodb
│   ├── monk
│   ├── node-sass
│   └── npm-debug.log
├── old-server.js
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   ├── stylesheets
│   └── vendor
├── README.md
├── routes
│   ├── index.js
│   └── user.js
├── scss
│   ├── _settings.scss
│   └── style.scss
└── server.js

the style.css that chromium shows me in Developer Tools

enter image description here

Here it is in full:

<!DOCTYPE html><html><head><link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"><link rel="stylesheet" href="/public/stylesheets/style.css"></head><body><h1>Hello World</h1><script src="http://localhost:35729/livereload.js"></script></body></html>

Upvotes: 0

Views: 1303

Answers (1)

mscdex
mscdex

Reputation: 106736

Try changing:

link(rel="stylesheet", href="/public/stylesheets/style.css")

to:

link(rel="stylesheet", href="/stylesheets/style.css")

When you do express.static(__dirname + '/public'), you're setting __dirname + '/public' as the location of the root web path (/). So a request for /stylesheets/style.css will be looked up on the file system as __dirname + '/public/stylesheets/style.css'.

Without the above change, the static middleware looks up __dirname + '/public/public/stylesheets/style.css' and fails, so it continues on to the next middleware or route, which is how your index.jade is getting rendered for the css.

Upvotes: 1

Related Questions