so I have a pretty common function for routing in my node project. But I’m dealing with a logic error I can’t wrap my head around. As you see I want to render my HTML server side but when I create and serve it to the browser, the image links were broken. so I fix it with this condition and now my images are showing.
else if (parsedURL.pathname.startsWith("/public/")) {
console.log("image");
let imagePath = __dirname + parsedURL.pathname;
fs.readFile(imagePath, (err, content) => {
if (err) {
res.writeHead(404);
res.end("Image not found!");
} else {
let mimeType = mimeTypes.lookup(imagePath);
res.writeHead(200, { "Content-Type": mimeType });
res.end(content);
}
});
but right now It seems like I can’t respond to the queries because whatever I do I can’t get inside the query block.
else if (parsedURL.query.id) {
console.log("id");
how can I fix this problem and refactor my code?
(excuse me for my bad English)
full code:
// Create A Server That Can send back ststic files
const http = require("http");
const url = require("url");
const fs = require("fs");
const mimeTypes = require("mime-types");
const { lookup } = require("dns");
const database = fs.readFileSync(`${__dirname}/database/movies.json`, "utf-8");
const cardTemplate = fs.readFileSync(
`${__dirname}/templates/movieCard.html`,
"utf-8"
);
const mainPageTemp = fs.readFileSync(
`${__dirname}/templates/mainPage.html`,
"utf-8"
);
// Creating our server
const server = http.createServer((req, res) => {
//////////////////////////////////////////////////////
// THIS IS A SERVER SIDE RENDERING SITE
//////////////////////////////////////////////////////
let parsedURL = url.parse(req.url, true);
// console.log(parsedURL.query.id);
if (parsedURL.pathname === "/" || parsedURL.pathname === "/main") {
console.log("main");
res.setHeader("X-Content-Type-Options", "nosniff");
res.writeHead(200, {
"Content-type": "text/html",
});
// 1. GET the 3 most recent posts from the database
const latestPosts = JSON.parse(database).slice(0, 3);
// 2. Get the card html template and generate 3 template ane save them inside a variable
const cardsHtml = latestPosts
.map((el) => {
return cardTemplateReplacor(cardTemplate, el, parsedURL);
})
.join("n");
// console.log(cardsHtml);
// 3. put them inside the mainpage.html template and send it to the enduser
const output = mainPageTemp.replace(/{%POSTS%}/g, cardsHtml);
res.end(output);
} else if (parsedURL.query.id) {
console.log("id");
} else if (parsedURL.pathname.startsWith("/public/")) {
console.log("image");
let imagePath = __dirname + parsedURL.pathname;
fs.readFile(imagePath, (err, content) => {
if (err) {
res.writeHead(404);
res.end("Image not found!");
} else {
let mimeType = mimeTypes.lookup(imagePath);
res.writeHead(200, { "Content-Type": mimeType });
res.end(content);
}
});
}
});
const cardTemplateReplacor = function (template, card, url) {
let imageLink = `/public/${card.cover}`;
let moviePageLink = `${url.pathname}?id=${card.id}`;
let output = template.replace(/{%IMAGELINK%}/g, imageLink);
output = output.replace(/{%MOVIENAME%}/g, card.title);
output = output.replace(/{%MOVIELINK%}/g, moviePageLink);
return output;
};
server.listen(8080, () => {
console.log("We are listening to request sended to the port 8080");
});
I will have a lot of images on my pages, so I need a way to route my images in all my HTML pages. I tried tweaking my conditions but I haven’t gotten any results so far.
