EJS Node.JS Express - css path issue when url with more than 1 parameter

Question

First sorry for my poor english !

Well, I am developping a web application using NodeJS / Express and EJS as template engine.

I am currently facing an issue.

Here is my folder hierarchy

App folder/
|___ server.js /
|___ node_modules /
|___ required /
     |___ bootstrap /
     |___ css /
     |___ font-awesome /
     |___ images /
|___ views /
     |___ default.ejs
     |___ home.ejs
     |___ mission.ejs
     |___ mission /
          |___ create.ejs
          |___ delete.ejs

Here is my server.js configuration:

// Setup le serveur http
var app = express();

var code = 4567;
////// CONFIGURATION
// Définit le chemin relatif pour tous les fichiers utilisés dans l'app
app.use(express.static(__dirname));
console.log(__dirname + "");
app.set('views',__dirname + '/views');


app.get('/:app', function(req, res) {

  if (req.session.logged == false) {
    res.render('login.ejs');
  }else{

    if(api.page_exist(req.params.app)){
      res.render('default.ejs', {app:req.params.app});
    }else{

      /*console.log("La page demandée n'existe pas"); */
      res.redirect('/home');
    }

  }

});

app.get('/:app/:action', function(req,res){

  if(api.page_folder_exist(req.params.app,req.params.action)){

    console.log(__dirname);
    res.render('default.ejs', {app:req.params.app, action:req.params.action});


  }else{

      res.redirect('/');
  }

});

Basically, I have two routes : /:app/ I load the value into the template default.ejs and I include app.ejs where app can be "home", "mission"... etc... This route is working well

The other route is : /:app/:action where :app defines the folder for example the folder mission and action defines the action for example create. Using the URL /mission/create includes the template /mission/create.ejs in default.ejs and display it.

It's working but I have an issue about the path to load the css. By using this route, the browser try to get : http://localhost:8333/mission/required/font-awesome-4.5.0/css/font-awesome.min.css instead of http://localhost:8333/required/font-awesome-4.5.0/css/font-awesome.min.css like in the first route.

Here is how I link my css files :

<link href="required/css/normalize.css" rel="stylesheet">
<link href="required/css/common.css" rel="stylesheet">
<link href="required/css/style.css" rel="stylesheet">

Do you have any idea ? I assume it is about my route configuration but I can't find the solution.

Answer 1

In html page(jade/ejs/html) remove 2 dots in path ../public while including the css and javactipts

ex:
Wrong:
<link href="../public/css/style.css" rel="stylesheet">
<link href="public/css/style.css" rel="stylesheet">

Right:
<link href="/public/css/style.css" rel="stylesheet">

Answer 2

Looks like you might want to try this.

Express looks up the files in the order in which you set the static directories with the express.static middleware function.

To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static function, specify a mount path for the static directory, as shown below:

app.use('/required', express.static('required'));

this should probably replace this in your code

// Définit le chemin relatif pour tous les fichiers utilisés dans l'app
app.use(express.static(__dirname));

Now, you can load the files that are in the public directory from the /static path prefix.

For example:

http://localhost:8333/required/bootstrap/somefile.css
http://localhost:8333/required/css/somefile.css
http://localhost:8333/required/font-awesome/somefile.css

More Info on this here