node.js (express) linking css/js

Question

I have problem with linking my css/js on my page. Linking on localhost:5000/books/1 not working but on the page localhost:5000/books/ working

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

bookRouter.route('/')
            .get(function(req,res){
    res.render('books',{title:"Tytuł", nav:[
                            {
                                Link: "/Books",
                                Text: "Books"
                            },{
                                Link: "/Authors",
                                Text: "Authors"
                            }],
                            books: books
                       });


});

bookRouter.route('/:id')
            .get(function(req,res){

        var id = req.params.id;
      res.render('bookView',{title:"Tytuł", nav:[
                            {
                                Link: "/Books",
                                Text: "Books"
                            },{
                                Link: "/Authors",
                                Text: "Authors"
                            }],
                            book: books[id]
                       });


});

app.use('/books',bookRouter);

Route work but not linking css/jss. It looking in http://localhost:5000/books/lib/bootstrap/dist/css/bootstrap.min.css

Please, post the code that routes `/books/:id`... – Ivan Seidel Jan 16 '16 at 21:20 — Ivan Seidel, Jan 16 '16 at 21:20

score 2 · Answer 1 · answered May 10 '17 at 12:15

I have the same problem with yours. The point is why it looks for CSS files(or js) from http://localhost:5000/books/lib/bootstrap/dist/css/bootstrap.min.css instead of from http://localhost:5000/lib/bootstrap/dist/css/bootstrap.min.css

try to add

<base href="/">

in your html files. Mines worked.

score 1 · Accepted Answer · edited May 23 '17 at 11:47

1

You probably addressed the css files like this:

<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">

Replace it by:

<link rel="stylesheet" type="text/css" href="/lib/bootstrap/dist/css/bootstrap.min.css">

Take a look at this question if you want to learn more about absolute and relative pathes.

edited May 23 '17 at 11:47

Community

1
1

answered Jan 16 '16 at 21:40

Aᴍɪʀ

7,623
3
38
52

why href="/books/ I don't have dir book ? Now it looking books/books/lib – wroe12 Jan 16 '16 at 21:43
public => css, lib, js – wroe12 Jan 16 '16 at 21:46
Yes I have this folder – wroe12 Jan 16 '16 at 21:47
where is it? Can you post the path to your `bootstrap.min.css`? – Aᴍɪʀ Jan 16 '16 at 21:47
1

If you don't start the path with `/`, it is going to be a relative path. It means whatever the url is, it is going to append it to the url. if you start it with `/`, it is going to be appended to your domain, not the url. so it would work for all urls. See [this answer](http://stackoverflow.com/questions/21306512/difference-between-relative-path-and-absolute-path-in-javascript/21306892#21306892). – Aᴍɪʀ Jan 16 '16 at 21:53

node.js (express) linking css/js

2 Answers2