Why does Express.js not render CSS if the path contains two '/'

Question

So when I try to send a static page with 1 '/' in the path, for example:

app.get('/', (req, res) => {
    res.render('home.ejs')
})

It works perfectly fine and renders all the necesery css that is linked to the HTML page via the <link> attribute: <link rel="stylesheet" href="style.css">

The HTML and CSS files are in the same directory and the server.js file is in the previous directory:

The server file is linked to the views directory via the:

app.use(express.static(__dirname + '/views'));
app.set('views', path.join(__dirname, 'views'));

But when I add another '/' in the path the css just won't render:

app.get('/projects/mcpaint', (req, res) => {
    res.render('mcpaint.ejs')
})

I've tried including the css in the html using the <style> tag and in that case the css is actually rendered.

Does anybody know how to fix that? Thanks, any help is appreciated!

You have probably the link to the css wrong... Hard to tell without the HTML head — Akxe
– Akxe, Commented Mar 31, 2022 at 20:30
Can you check the Developer Tools console in your browser and see what the error messages are indicating? They will probably show you what path you are trying to load and it will probably give you some clues as to why this is happening. — Kostas Minaidis
– Kostas Minaidis, Commented Mar 31, 2022 at 20:31
IT says GET http://localhost:3000/projects/style.css net::ERR_ABORTED 404 (Not Found) — GttMone
– GttMone, Commented Mar 31, 2022 at 21:03

AKX · Accepted Answer · 2022-03-31 20:30:48Z

2

Since you're not showing your template, all I can do is refer to my crystal ball, which says you're doing something like

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

which is relative to whatever the URL of the view is; in other words, it'd request /projects/public/style.css if you're viewing /projects/projectx. Instead, you'd want

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

to make it absolute to the server root.

answered Mar 31, 2022 at 20:30

AKX

171k16 gold badges146 silver badges228 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

GttMone Over a year ago

I wasn't clear, sorry. The CSS and HTML files are in the same directory. <link rel="stylesheet" href="style.css">. The server code is in the previous directory and has nothing to do with directories, its the URL/server path that is breaking stuff

Ruan Mendes Over a year ago

@GttMone Instead of trying to add code to comments, please improve your question. Show the HTML that you are using to render it instead of saying things like "I've tried including the css in the html using the <style> tag and in that case the css is actually rendered." Please read stackoverflow.com/help/minimal-reproducible-example

AKX Over a year ago

So make that /style.css and you're good.

GttMone Over a year ago

I edited the question i hope is more clear

AKX Over a year ago

The location of the files on disk doesn't matter, if your server serves them from the root. Did you try /style.css in your link tag?

|

Collectives™ on Stack Overflow

Why does Express.js not render CSS if the path contains two '/'

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related