My issue is that the css file does not apply to localhost/about/{anyrandomtext} but it applies to localhost/{anyrandomtext}
I attempted to fix this using the following code snippets, but it did not work :
app.get('/about/*', (req, res) => {
res.render('404')
})
app.get('*', (req, res) => {
res.render('404')
})
I utilized
app.use('/public', express.static(staticFilePath))https://i.sstatic.net/Uuefu.png
header.hbs
**<link rel="stylesheet" href="public/css/styles.css">**
<title>Weather</title>
404.hbs
<!DOCTYPE html>
<html lang="en">
<head>
{{> header}}
</head>
<body>
<div class="container error_page">
<img src="../../public/images/404error.png" alt="">
<h1>Page could not be Found</h1>
<button type="button" class="btn">Go to Home</button>
</div>
</body>
</html>
Please review the provided code and offer assistance. Thank you.
const express = require('express')
const hbs = require('hbs')
const path = require('path')
const port = process.env.PORT || 8000
const app = express()
const staticFilePath = path.join(__dirname, '../public')
const viewsFilePath = path.join(__dirname, '../templates/views')
const partialPath = path.join(__dirname, '../templates/partials')
hbs.registerPartials(path.join(partialPath))
app.set('view engine', 'hbs')
app.set('views', viewsFilePath)
app.use('/public', express.static(staticFilePath))
app.get('/', (req, res) => {
res.render('index')
})
app.get('/about', (req, res) => {
res.render('about')
})
app.get('/weather', (req, res) => {
res.render('weather')
})
app.get('*', (req, res) => {
res.render('404')
})
app.listen(port, () => {
console.log(`Successfully connected at port ${port}`);
})