CODEWITHSUNDEEP
javascriptnode.jsurlexpressejs
Deliencourt Bryan
Deliencourt Bryan

Reputation: 43

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

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.

Upvotes: 4

Views: 7255

Answers (2)

Tamilselvan K
Tamilselvan K

Reputation: 1221

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">

Upvotes: 7

khollenbeck
khollenbeck

Reputation: 16157

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

Upvotes: 5

Related Questions