Can not get CSS file

Question

Can not get CSS file

My directory set up is like this :

app.js
vews
  home.html
  css
    style.css

My home file is like this :

<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

</body>
</html>

My app is like this :

var io   = require('socket.io'),
    url  = require('url'),
    sys  = require('sys'),
    express = require('express'),
    http=require('http');

var app = express();
var server = http.createServer(app);
var socket = io.listen(server);

app.engine('.html', require('ejs').__express);
app.set('views', __dirname + '/views');
app.set('view engine', 'html');

app.get('/', function(req, res){
    res.render('home');
});

app.listen(4000);
sys.puts('server running ' + 'now ' + Date.now());

The problem is when i run the app, css file can not be loaded.

node.js
express

Answer 1

Since .css files are static files you have to serve them to the clients. However, you do not serve static files as a express middleware. Add the following middleware to your express app and move the css folder under the public directory (you should create a public directory)

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

So your final directory structure should look like this

app.js
views
  home.html
public
  css
    style.css

And do not forget to require path module

 var path = require('path')

Answer 2

By using this:

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

Also making a folder inside your project called public and placing all of your front end files inside it managed to fix my issue.

This loaded all of my java script etc too.

Note: non of the front end had to be changed at all for this to work.

Answer 3

Try this:

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

This might solve the problem.