NodeJS and Express : CSS not loading

Question

I have created my own server and router files to serve my html pages. The page renders, but my problem is, it renders without css styling.

I'm using express.static to serve my /public files, which in theory should serve the css file - or so I thought. I have done a Google search of my problem and looked at the links on the first couple of pages but I still cannot fix my problem. Can anyone sport my mistake?

My directory is:

NODEJS
- node_modules
- public
  - css
    - style.css
  - js
- router
  - main.js
- views
  - my html files

My server code is:

var express = require('express');
var app = express();
var fs = require('fs');
var url = require('url');
var path = require('path');
var http = require('http');
var router = express.Router();

var bodyParser = require('body-parser');
app.use(bodyParser());

app.use(express.static(__dirname + "/public", {maxAge: 3456700000})); 
require('./router/main')(app);   
app.engine('html', require('ejs').renderFile);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

var server = app.listen(3000, function () {

  var host = server.address().address
  var port = server.address().port

  console.log('Example app listening at http://%s:%s', host, port);

});

My Router code is:

var url = require('url');

module.exports = function (app) {

    app.get('/', function (req, res) {
        res.render('../views/default.html');
        console.log("Home page displayed");
    });

// Some more get requests for different pages

};

My html code is:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Index</title>
<link rel="stylesheet" type="text/css"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">       
</head>

[error fixed: code needed re-arranging and chrome browser needed updating to most recent version]

Place the static route before the other routes (right after bodyParser) — adeneo
– adeneo, Commented Feb 24, 2015 at 10:57
@adeneo Thanks for the reply. I've changed this now, but still it is not displaying correctly. — hturner
– hturner, Commented Feb 24, 2015 at 11:00
I just recreated the entire project, exactly as you've layed it out, and it works just fine for me — adeneo
– adeneo, Commented Feb 24, 2015 at 11:16

Yogesh Khatri · Accepted Answer · 2015-02-24 10:47:34Z

4

the css path looks wrong it should be /css/style.css instead of portalstyle.css, like this

<link rel="stylesheet" type="text/css" href="/css/style.css">

answered Feb 24, 2015 at 10:47

Yogesh Khatri

1,2109 silver badges11 bronze badges

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

2 Comments

hturner Over a year ago

Thanks for the quick reply. I didn't notice this but have now changed it and I'm still having the same problem - code also updated to include this

Yogesh Khatri Over a year ago

ok, it is still portalstyle.css instead of style.css, and can you tell what is error you are getting for that css request (404 or something else). and also is there any error in express logs. Use morgan module for express or something else to print your request logs

Collectives™ on Stack Overflow

NodeJS and Express : CSS not loading

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related