Currently, I am working on a web project using Node.js and Express. However, I am encountering an issue with my CSS not loading correctly when serving the static files. Despite trying to use express.static, it doesn't seem to be functioning as expected. Below is a brief overview of my folder layout and code snippets:
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const port = 3000;
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, '..', 'Public')));
app.post('/subscribe', (req, res) => {
const email = req.body.email;
fs.appendFile('subscribers.txt', email + '\n', (err) => {
if (err) throw err;
});
res.send('Thank you for subscribing!');
});
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '..', 'Public', 'Home', 'Home.html'));
});
app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});
<!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>Home</title>
<link rel="stylesheet" type="text/css" href="Home.css">
<script src="https://kit.fontawesome.com/3720a64a77.js" crossorigin="anonymous"></script>
</head>
{
"name": "email-subscription",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.20.2",
"express": "^4.18.2"
}
}
https://i.sstatic.net/rcTEL.jpg
Being new to coding, any help or advice would be greatly appreciated!