I am facing difficulty in establishing a connection between my front-end and back-end using node.js. As a result, the website only displays the HTML code without linking to the CSS or image files.
Here is the folder structure:
root
-src
•picture
○jpg/png file
•css
○css file
•html
○html file
-ws_src
•this file.js
•package.json
const express = require("express");
const path = require("path");
const http = require("http");
const fs = require("fs");
const app = express();
app.use(express.static(path.join(__dirname, '../src/css')));
app.use(express.static(path.join(__dirname, '../src/picture')));
const myQ1Server = http.createServer((req, res) => {
const userPath = req.url;
if (userPath === "/") {
fs.readFile("../src/html/HtmlMainpage.html", function (err, data) {
console.log("Request at: " + userPath);
res.statusCode = 200;
res.setHeader("Content-Type", "text/html;charset=utf-8");
res.write(data);
res.end();
});
}
else if (userPath === "/HtmlAboutuspage.html")
{
fs.readFile("../src/html/HtmlAboutuspage.html", function (err, data) {
console.log("Request at: " + userPath);
res.statusCode = 200;
res.setHeader("Content-Type", "text/html;charset=utf-8");
res.write(data);
res.end();
});
}
else {
console.log("Request at: " + userPath);
res.statusCode = 404;
res.setHeader("Content-Type", "text/plain");
res.write("404 file not found!");
res.end();
}
});
console.log("Listening on port 3030");
myQ1Server.listen(3030);