I have javascript for a server below that has two html/pug pages. Each of these pages uses a specific gif and downloaded font. I have these included in both of their css pages, but I’m trying to figure out how to include them in the GET request so they can appear when I run the server in cmd.
The gif is in a folder called img, and the downloaded font is in a folder called fonts. I’m not sure if I’m writing the extensions correctly or something, but when I run the server, both the image and font aren’t appearing on my browser.
The font is called slkscr and the extension type is “TrueType font file” and the image is called sky1 and it’s extension type is a “GIF”.
Both of these appear fine if I were to go to the folder with the files in my directory and double click on the HTML file to open the page in my google browser, but they don’t show up if I try to run the server in cmd and type “localhost:3000” in the browser address. I was wondering if I could get some help as to why. I assumed the get requests would be similar to getting a javascript/css/html file.
Part I’m struggling with in Server.js:
}else if(request.url === "/img/sky1.gif"){
//read the img
fs.readFile("img/sky1.gif", function(err, data){
if(err){
send500(response);
return;
}
response.statusCode = 200;
response.setHeader("Content-Type", "image/gif");
response.write(data);
response.end();
});
}else if(request.url === "/fonts/slkscr.tff"){
//read the font
fs.readFile("fonts/slkscr.tff", function(err, data){
if(err){
send500(response);
return;
}
response.statusCode = 200;
response.setHeader("Content-Type", "font/tff");
response.write(data);
response.end();
});
Entire server.js file:
const http = require('http');
const fs = require("fs");
const pug = require("pug");
const express = require('express');
const app = express();
const renderMain = pug.compileFile('pages/main.pug');
const renderCreate = pug.compileFile('pages/create.pug');
//Helper function to send a 404 error
function send404(response){
response.statusCode = 404;
response.write("Unknown resource.");
response.end();
}
// Helper function to send 500 server error;
function send500(response){
response.statusCode = 500;
response.write("Server error.");
response.end();
}
const server = http.createServer(function (request, response) {
//console.log(request.method+" -> "+request.url); test about the income request
// handle the get request
if(request.method === "GET"){
if(request.url === "/" || request.url === "/main.pug"){
let data = renderMain("./pages/main.pug",{})
response.statusCode = 200;
response.end(data);
}else if(request.url === "/main.js"){
fs.readFile("main.js", function(err, data){
if(err){
send500(response);
return;
}
response.statusCode = 200;
response.setHeader("Content-Type", "application/javascript");
response.write(data);
response.end();
});
}else if(request.url === "/create.js"){
//read login.js file and send it back
fs.readFile("create.js", function(err, data){
if(err){
send500(response);
return;
}
response.statusCode = 200;
response.setHeader("Content-Type", "application/javascript");
response.write(data);
response.end();
});
}else if(request.url === "/main.css"){
//read css file
fs.readFile("main.css", function(err, data){
if(err){
send500(response);
return;
}
response.statusCode = 200;
response.setHeader("Content-Type", "text/css");
response.write(data);
response.end();
});
}else if(request.url === "/create.css"){
//read css file
fs.readFile("create.css", function(err, data){
if(err){
send500(response);
return;
}
response.statusCode = 200;
response.setHeader("Content-Type", "text/css");
response.write(data);
response.end();
});
}else if(request.url === "/img/sky1.gif"){
//read the img
fs.readFile("img/sky1.gif", function(err, data){
if(err){
send500(response);
return;
}
response.statusCode = 200;
response.setHeader("Content-Type", "image/gif");
response.write(data);
response.end();
});
}else if(request.url === "/fonts/slkscr.tff"){
//read the font
fs.readFile("fonts/slkscr.tff", function(err, data){
if(err){
send500(response);
return;
}
response.statusCode = 200;
response.setHeader("Content-Type", "font/tff");
response.write(data);
response.end();
});
}else{
send404(response);
return;
}
}
});
//Server listens on port 3000
server.listen(3000);
console.log('Server running at http://127.0.0.1:3000/');