0
134
VisualizaçõesI have an css 404 error with my website but the css exsits
I have question with express
server.js
const express = require('express')
const app = express()
const port = 8080
app.use(express.static('public'))
app.use('/css', express.static(__dirname + 'public/css'))
app.use('/js', express.static(__dirname + 'public/js'))
app.use('/img', express.static(__dirname + 'public/img'))
app.set('views', './views')
app.set('view engine', 'ejs')
app.get('/signin', (req, res) => {
res.render('signin')
})
app.listen(port, () => {
console.log('server is listening to port: 8080')
})
app.use(function(req, res, next) {
res.status(404);
// respond with html page
if (req.accepts('html')) {
res.end('404 - Not Found');
return;
}
// respond with json
if (req.accepts('json')) {
res.json({ error: 'Not found' });
return;
}
});
File structure
public
css
signin.css
img
js
views
signin.ejs
server.js
signin.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../public/css/signin.css">
</head>
<body>
<h1>works</h1>
</body>
</html>
signin.css
body{
color: yellow;
}
and the error is
http://localhost:8080/public/css/signin.css [HTTP/1.1 404 Not Found 4ms]
Can someone help me? What is the error
1 Respostas
Responde à pergunta0
I can identify two issues.
First is that the code just concatenates __dirname + 'public/css'. The __dirname does not include a trailing slash, so if your path is /home/foo, you'll get a path like /home/foopublic/css. Use path.join() instead.
Second, the HTML appears to refer to the CSS file relative to the location of the HTML on your disk. As there is already a handler for the path /css set which serves files from the css directory on your disk, the correct path would be /css/signin.css instead of ../public/css/signin.css.
So, on the node.js side:
const path = require('path')
app.use('/css', express.static(path.join(__dirname, 'public/css')))
app.use('/js', express.static(path.join(__dirname, 'public/js')))
app.use('/img', express.static(path.join(__dirname, 'public/img')))
Although you don't really even need these, as there app.use(express.static('public')) middleware already serves the files and directories from the public directory.
And the HTML:
<link rel="stylesheet" href="/css/signin.css">