Node Express fail load css and js - express

Question

this is my folders:
/app
└── models
└── ...
└── node_module
└── ...
└── routes
└── ...
└── public
└── css
└── js
└── views
└── unites
└── new.js
└── show.js
└── edit.js
So, when I go on //mysiteweb/new my logs look like this:
GET /maitre-unites-new 304 4ms
GET /css/bootstrap.css 304 3ms
GET /js/bootstrap.js 304 2ms
But when I go on //mysiteweb/show my logs look like this:
GET /maitre-unites-show/52b46d81ddd1086615000001 304 2ms
GET /maitre-unites-show/css/bootstrap.css 404 2ms
GET /maitre-unites-show/js/bootstrap.js 404 1ms
GET /maitre-unites-show/images/unites/batiment1.jpeg 404 2ms
I don't understand why, my syntax is the same:
/*
* GET New unit.
*/
app.get('/maitre-unites-new', ensureAuthenticated, function (req, res){
Unites.find({}, function (err, unites) {
res.render('unites/new', {
unites: unites,
user : req.user,
title : ' Que voulez vous créer Maitre Du Jeu'
});
});
});
/*
* GET show unit.
*/
app.get('/maitre-unites-show/:id', ensureAuthenticated, function (req, res){
Unites.findById(req.params.id, function (err, unites) {
res.render('unites/show', {
unites: unites,
user : req.user,
title : ' Que voulez vous créer Maitre Du Jeu'
});
});
});
my views news.js:
<% layout('layout') -%>
<% script('js/bootstrap.js') -%>
<% stylesheet('css/bootstrap.css') -%>
<!-- Jumbotron -->
<div class="jumbotron">
<h1><%= title + ' ' %><code><%= user.username %></code></h1>
<p style="text-align:center;">Ho Créateur ! Inventez-nous comme toutes choses en cet univers.</p>
<p>
aide »
retour »
</p>
</div>
<div class="row">
<div class="col-md-12">
<h3>Créez une Unité:</h3>
<form method='post' action='/maitre-unites-new'>
<div>
<label>Nom:</label>
<input type="text" name="name"/><br/>
</div>
<div>
<label>Avatar:</label>
<input type="text" name="avatar"/><br/>
</div>
<div>
<label>Description:</label>
<textarea name="description" row="5" cols="50"></textarea>
</div>
<hr>
<%= unites.name %>
<h2>Inclure d'autres unités dans celle-ci:</h2>
<% if (unites && unites.length !=0) { %>
<div>
<% for (var index in unites) { %>
<input type="checkbox" name="<%= unites[index].unit %>" value="<%= unites[index]._id %>"> <%= unites[index].name %> |
<% } %>
</div>
<% } else { %>
<div>
no document exist
</div>
<% } %>
<hr>
<h2>Inclure cette unité dans d'autres unités:</h2>
<% if (unites && unites.length !=0) { %>
<div>
<% for (var index in unites) { %>
<input type="checkbox" name="<%= unites[index].unit %>" value="<%= unites[index]._id %>"> <%= unites[index].unit %> |
<% } %>
</div>
<% } else { %>
<div>
no document exist
</div>
<% } %>
<input type="submit" value="Save">
</form>
</div>
</div>
<!-- Site footer -->
<div class="footer">
<p>© Company 2013</p>
</div>
</div> <!-- /container -->
my views show.js:
<% layout('layout') -%>
<% script('js/bootstrap.js') -%>
<% stylesheet('css/bootstrap.css') -%>
<!-- Jumbotron -->
<div class="jumbotron">
<h1><%= title + ' ' %><code><%= user.username %></code></h1>
<p style="text-align:center;">Ho Créateur ! Inventez-nous comme toutes choses en cet univers.</p>
<p>
aide »
retour »
</p>
</div>
<div class="row">
<div class="col-md-12">
<%= unites.name %>
<img src="images/unites/<%= unites.avatar %>.jpeg">
<%= unites.description %>
</div>
</div>
<!-- Site footer -->
<div class="footer">
<p>© Company 2013</p>
</div>
</div> <!-- /container -->
This is my repo.git
Why I get this /maitre-unites-show/images.... and not /images... ?

Answer 1

Alright. The error is caused by the fact that your show route has extra path component /:id, and your routes in the views are relative, so they are searched from the current URL, which is different:
new -> /
show -> /maitre-unites-show/
All you need to do is to make your paths absolute in the view:
<% layout('layout') -%>
<% script('/js/bootstrap.js') -%>
<% stylesheet('/css/bootstrap.css') -%>