Including css and js files on node.js + express + ejs

Question

I'm trying to use stylesheets and javascript files on my node.js project which uses express and ejs.

my structure:

public/
  -- css/
  -- js/
  -- images/

and my chat.ejs file:

<!DOCTYPE html>
<html lang="en">
<head>
    <% include ../partials/head %>
</head>
<body>

.. content ..

    <% include ../partials/footer %>

</body>
</html>

and in my partials/head.ejs there is code

<link href="public/css/custom.css" rel="stylesheet">

and it should load style file but it doesn't. Btw my main chat.js:

    var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));

// index page
app.get('/', function(req, res) {
    res.render('pages/chat');
});

app.listen(3000, function(){
    console.log('listening on *:3000');
});

so how to use it properly?

Jonathan Lonowski · Accepted Answer · 2015-07-12 15:46:07Z

2

The public folder won't actually be part of the URL paths available to the client:

<link href="/css/custom.css" rel="stylesheet">

The path you give to express.static() will be combined with the URL path to the effect of:

// GET /css/custom.css
(__dirname + '/public') + '/css/custom.css'

So, when requesting public/css/custom.css, express.static() will try to find:

// GET /public/css/custom.css
(__dirname + '/public') + '/public/css/custom.css'

Expecting the folder structure to instead be:

public/
  -- public/
      -- css/
      -- js/
      -- images/

edited Jul 12, 2015 at 15:46

answered Jul 12, 2015 at 15:40

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

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

Collectives™ on Stack Overflow

Including css and js files on node.js + express + ejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related