angry_kiwi angry_kiwi - 5 months ago 21
Node.js 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.

Answer

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