I've got a weird issue which I can't seem to figure out with expressjs. I've specified a public folder for all static files such as js, css and images. I'm using app.use(express.static(__dirname + '/public')); to specify the folder. This works perfectly except for one case.
Inside the public folder, I've got 3 folders called js, css and images. Within one of my css files, I'm doing background-image: url(/images/bg.png) no-repeat; but this url is not resolving and the image is not showing on the page.
However, if I do something like img(src='/images/bg.png') from within one of my views, the image shows. I'm assuming that this has to do with the fact that I'm linking from a static file and node/express are ignoring all routes(?) from within the static files.
How would one go about linking to images in css files located inside a static folder in express?
Your CSS urls are relitive to the STYLESHEET so the url you have is looking for the path /css/images/bg.png you want to have the url be ../images/bg.png
Related
I created a way to upload files using Multer in my files then display their information to my frontend. My challenge is opening the uploaded PDF as when I click the link to open it says that it cannot get.
You need to specify your static files in Express.
Use app.use(express.static('public')) to specify that your static files are located on public folder.
And for get a file you don't need to add public in the url, for example:
http://localhost:3000/pdf/mypdf.pdf
See this documentation
I'm doing a node project where I expose my public folder like:
app.use(express.static(path.join(__dirname, '/public')))
So now, all my public files are accessible through localhost:8080/*
I have also created a folder called "views" where I save private views, javascript and css files associated with them. They are private views so I don't want any user to access them.
As I have html linked with my css files and javascript, when the browser try to GET them, it says "not found" because they are not in the public folder.
I'm sending the html as sendFile in the express route.
Is there any way to put all files in the public folder and then protect them for not being accessible to public users? Or is there any alternative to sendFile, so the file is rendered locally and it doesn't need to request the css and javascript files
Thank you in advance
Views are technically private. Because they are rendered server-side, and not directly accessible by the visitors.
But you generally don't want stuff like Javascript, CSS nor views to be private. They will be seen anyway by the user. The only reason to have things like Node.js views private is the fact that they need be rendered by Node.js prior sending them to the user.
If you have private files, you might want to do same.
Otherwise, simply place them on the /public folder. You should not be hiding any secrets inside your JS / CSS code.
Edit (following comment):
You have a couple ways to do that.
Either you build a unique response that contains all necessary HTML / views - CSS - JS.
render('view.ejs', { css: 'body { color: blue }' })
You will need render that variable into your view, just like you might already be doing with your other views.
You might also want to read it from a file:
fs.readFile(`${__dirname}/css/style.css`, (error, styles) => { ... }
Or you handle each file request separately:
Node.js - external JS and CSS files (just using node.js not express)
(if you use Node.js views simply render these one instead of HTML files)
Actually , I am beginner in nodejs field . So want to know where to place(folder name) what file (like html file , css file , js file other files).
What is the correct folder structure(formating) of the nodejs web application.
ie...
public folder is for (html , css , image etc)
I am confused. Can you help. And want to know what is the need of this type of folder convention.Is it is a standard or any other reason. ?
You can create to folder in your main project.
lib - this will hold all the server related logic.
public - this will have the client side related files. here you can create the sub folders named as : html, css and js. At the time of execution this folder you can serve as static files.
main
---lib
---public
--------html
--------css
--------js
server.js
config.json
i have set the static web directory for use in my nodejs app:
app.use express.static(process.cwd(), 'www')
This brings up all the static files like css, images etc, when im in the root it works
http://localhost:8124/
however if i go to somewhere like /tags, it deosnt bring up the static files:
http://localhost:8124/tags/
i get 404 error on the console because its trying to access the www folder
with
/tags/www/ ....
im not sure how to solve this problem, thanks
It looks like you're referring to static assets, without leading /, this results in appending relative asset address to the current URL. Instead refer to your static assets with leading /
eg. /www/style.css rather than www/style.css
I'm using node.js+express for serving static files (CSS+JS). At this time static dir is configured as
app.use(express.static(__dirname + '/static'));
In main templeate layout.jade I load static files as
link(href='css/bootstrap.css', rel='stylesheet')
Everything works fine with pages like /hello, /write, /:user. But when I get pages like /bob/505b6833d3835d3705000001/edit, static files cannot be found. Firebug shows Node generates the same path for static, but styles are not applied for the page. Why? Thanks in advance!
You should be using link with pre-slash.
link(href='/css/bootstrap.css', rel='stylesheet')
This should take care of it.