+ 2

Doubt related to ejs

Where will the following ejs file would be looking for the css file ?( css file is in public/css directory of the main project folder and ejs file is in views/pages directory ) <head> <link rel="stylesheet" href="./css/input_type.css"> <title></title> What I think is that it is looking for css directory in the same pages folder where it doesn't exists but actually this is not the case as everything works fine when i run the app, And here is the code for serving these files ,which I believe these two lines app.use(express.static('public')) and res.render('pages/input_type') are doing something which I don't understand at all ,any help is appreciated , var express=require('express'); const ejs=require('ejs'); var app=express(); app.use(express.static('public')); app.set('view engine','ejs'); app.listen('8080',(err)=>{ if(err){throw err}; console.log("listening on port 8080"); }) app.get('/',(req,res)=>{ res.render('pages/input_type'); });

node express ejs

24th Oct 2020, 1:03 PM

Abhay

7 Answers

+ 2

Well, express.static("public") means that express will serve all static files from "public" folder. The css href="./css/input_type.css" will be resolved to "public/css/input_type.css" BY express, which is why you got no problems. Secondly, ejs (embedded-js) is a view templating engine, so res.render will look for "pages/input_type" in specified folder, however I wonder where did you specified "views" folder (maybe it is default action)

24th Oct 2020, 1:14 PM

777

+ 1

Abhay it is common thing for files to be anywhere, bcoz from my exp. I know that server is responsible for sending every file that isn't present on client's PC or globally. The process: First, the url seeks for package.json / package-lock.json file in your directory, and it says "node server.js" (or similar) which means to start node server, which then listens for request from a port. Now, when your ejs file loads on the clients PC, then it sends another req to load css, js, etc linked files. Then, as you've specified express.static("public"), so express will look for static files in public dir, and your css file is there, done!

24th Oct 2020, 1:57 PM

777

+ 1

The relative path of any static file relative to ejs/html file doesn't matter at all, it can be anywhere as far as the path relative to server.js is valid and working. Btw, where are you making up ur server? globally or locally (unrelated to doubt)

24th Oct 2020, 2:42 PM

777

@vrintle Ty for your response ,views folder is in project folder as well with other folders and files like json pkg ,public and node_modul ,I have to create that views folder I see that it is resolved to public/css but how does ejs file know where is public folder when it is residing in views/pages shudn't the correct path be .../public/css to tell ejs where the css file is instead of ./css or is that path handled by express?

24th Oct 2020, 1:18 PM

Abhay

Not clear enough ,the thing is I don't understand what is actually happening when ejs file is in other directory having stylesheet with a path ./css and the stylesheet itself is in other directory ,is it changing the css file path inside ejs file to public/css as you already said which was set to ./css ,for now I will assume it is and won't work at all if this isn't what is actually happening ,ty very much for your answer Edit: it should actually be changing the file path to .../public/css unless express places the ejs file into public folder at the time of rendering

24th Oct 2020, 1:42 PM

Abhay

@vrintle ok but this is very confusing for me I have a project directory as follow views pages file.ejs public css file.css js file.js And ejs file has stylesheet link ./css So when ejs file loaded at the client side , and it looks to load css file at path ./css what does that path means for the server ? Where is the server looking for the file according to that path ? Or when the ejs and public folder assets are sent to the client side and since they all lie at same directory level now ./css path works fine as it should as you mentioned !

24th Oct 2020, 2:29 PM

Abhay

@vrintle locally and as you said "relative path of any static file relative to ejs/html file doesn't matters" it does ,if I change the css path in ejs file to ./file.css instead of ./css/file.css it won't work ,so far what I have understood from all your explanations and according to my understanding is that express serves static files css/file.css from public folder and ejs as response ,and when they are loaded by browser they all lie at same directory level and so ./css/file.css path in ejs works correct me if I am wrong if all I said makes sense! and ty for taking out time to clear up my doubts !

24th Oct 2020, 4:04 PM

Abhay