Can not get CSS file

Question

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.

Is this directory also in this structure on your webserver where you are running you code ? — mas-designs, Nov 15 '12 at 10:40
You are running your code on a server or ? and the structure of your directories, is it the same at the webserver ? — mas-designs, Nov 15 '12 at 10:43
Is your server handling the `static css` file and outputting the `home`? what happens when you visit the css file directly? — red-X, Nov 15 '12 at 11:05

score 134 · Accepted Answer · answered Nov 15 '12 at 11:10

134

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

answered Nov 15 '12 at 11:10

tolgaio

3,206
1
19
18

1

Will this work with `body-parser` module? And can I use multiple `express.static` paths? For example one for public (.html files) and one for styles (.css files)? – Loizos Vasileiou Jun 20 '20 at 19:49
we can use `path.resolve` as well `app.use(express.static(path.resolve(__dirname, "public")));` – Neeraj Tangariya Sep 12 '22 at 06:15

score 5 · Answer 2 · answered Feb 06 '21 at 06:46

In one of my apps, I have these relevant files in this file structure:

/
index.js
  /public
    /stylesheets
      main.css
  /views
    /partials
      header.ejs

The index.js includes app.use(express.static(path.join(__dirname, '/public'))); Note the /public.

The header.ejs partial includes <link rel='stylesheet' type='text/css' href='/stylesheets/main.css' /> Note the lack of public, it’s implied by the middleware.

In your example, your current directory for static files doesn’t match where you are keeping static files.

score 1 · Answer 3 · edited Nov 15 '12 at 14:19

1

Try this:

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

This might solve the problem.

edited Nov 15 '12 at 14:19

nalply

26,770
15
78
101

answered Nov 15 '12 at 11:07

Rakesh Narayanan

189
6

5

why downvote? this solved my problem. should use `/css/style.css` instead of `css/style.css` – doğukan Jun 18 '19 at 11:36
1

@dgknca This doesn't answer the actual question, it answers a different question. See the file tree given. – clota974 Feb 28 '20 at 23:59
The express.js framework handles the HTTP requests, so it should know where the static files for the Web app are located. By default there is no such folder. Use `express.static`. Read about it here: https://expressjs.com/en/starter/static-files.html – Svetlin Nakov Feb 17 '21 at 19:48
1

This worked, thansk – Ayush Kapri Apr 15 '22 at 10:53
Hey mate sorry for judging, this answer worked. upvoting this answer. – Pavan Kumar V May 19 '22 at 04:05

Can not get CSS file

3 Answers3

Linked