title: NodeJS and Express : CSS not loading
body: <p>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. </p>
  
  <p>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?</p>
  
  <p>My directory is:</p>
  
  <ul>
  <li>NODEJS 
  <ul>
  <li>node_modules </li>
  <li>public 
  <ul>
  <li>css 
  <ul>
  <li>style.css </li>
  </ul></li>
  <li>js </li>
  </ul></li>
  <li>router 
  <ul>
  <li>main.js </li>
  </ul></li>
  <li>views 
  <ul>
  <li>my html files</li>
  </ul></li>
  </ul></li>
  </ul>
  
  <hr>
  
  <p>My server code is:</p>
  
  <pre><code>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);
  
  });
  </code></pre>
  
  <hr>
  
  <p>My Router code is:</p>
  
  <pre><code>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
  
  };
  </code></pre>
  
  <hr>
  
  <p>My html  code is:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&gt;
  &lt;title&gt;Index&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css"  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="/css/style.css"&gt;       
  &lt;/head&gt; 
  </code></pre>
  
  <p>[error fixed: code needed re-arranging and chrome browser needed updating to most recent version]</p>