Serving css and javascript files

Question

I am beginner with node. I am trying to serve a file. The hierarchy of my project looks like

app

  modules
  node_modules
  public
    css
      index.css
    html
      index.html
    javascript
  routes
     main.js

inside main.js

var express = require('express');
var app     = express();
var path    = require('path')
var port    = 8080;

app.use("/styles",  express.static(path.join(__dirname + '../public/css')));
app.use("/scripts", express.static(__dirname + '../public/javascript'));

app.get('/' , function( req , res ){
    res.sendFile(path.join(__dirname,'../public/html/index.html'))
})
app.listen(port)

i want to serve a file on / route. It works fine , but css and javascripts are not loaded - it throws error in browswer console

http://localhost:8080/css/index.css Failed to load resource: the server responded with a status of 404 (Not Found)

What is the right way to set path to css? I have trouble to find the righ solution.

Thanks!

your static css route is called "styles", not "css"; try http://localhost:8080/styles/index.css — Hamms
– Hamms, Commented Aug 29, 2016 at 19:52

dNitro · Accepted Answer · 2016-08-29 21:00:17Z

3

The problem is with your path definition. When you use path.join you should pass strings to it and this method will join them with platform specific separator as a delimiter, then normalizes the resulting path.

so your styles path should be:

app.use("/styles",  express.static(path.join(__dirname, 'public', 'css')));

and your styles will serve from:

http://localhost:8080/styles/index.css

Because you are using a virtual path prefix (here: /styles).

If you dont mind platform specific separator, i. e. know that your server will be a unix like environment and dont need a virtual path prefix then just use:

app.use(express.static(__dirname + '/public'));

and your styles will serve from css dir:

http://localhost:8080/css/index.css

edited Aug 29, 2016 at 21:00

answered Aug 29, 2016 at 20:16

dNitro

5,3953 gold badges24 silver badges46 bronze badges

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

8 Comments

peteb Over a year ago

The final style route won't be served from localhost:8080/index.css but rather localhost:8080/css/index.css

peteb Over a year ago

@Josh, make sure that you're not using relative paths within your HTML file when loading your css. ../css/index.css won't be a valid route however, /css/index.css is a valid route.

dNitro Over a year ago

@peteb, i checked just now and it serves from root: http://localhost:8080/index.css

peteb Over a year ago

@dNitro yes, that's true if you're going to make the static route /public/css instead of /public.

Josh Over a year ago

pastebin.com/4byK7Ukk this is my current code , hierarchy stays the same , i run it by node main.js , i rly do not know what would work

|

Nikita Namestnikov · Accepted Answer · 2016-08-29 20:17:14Z

1

Because you set another routes. Change your routes to static files. Use this:

app.use(express.static('../public'));

edited Aug 29, 2016 at 20:17

answered Aug 29, 2016 at 20:05

Nikita Namestnikov

3445 silver badges13 bronze badges

2 Comments

peteb Over a year ago

The relative path for ../public is unnecessary when using __dirname because that's precisely what __dirname provides. app.use(express.static(path.join(__dirname, 'public'); is the correct way to use path.join(). The + is counter to the reason why you'd use path.join().

Nikita Namestnikov Over a year ago

@peteb you are right, it's my mistake. I've fixed it

Collectives™ on Stack Overflow

Serving css and javascript files

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related