( NodeJS ) Http server does not load JS/CSS files from folder

Question

Good day ,

I've got a small problem with my NodeJS http server. The server doesn't load the CSS/JS files from folder , only from url and i don't know why. I would appreciate if someone could take some time and give me some tips on what went wrong.

Here is the Server Code :

var http = require("http");
var gs = require("querystring");
var url = require("url");
var fs = require("fs");

var server = http.createServer(function (request, response, err) {

//HTML
if (request.url === "/") {
    sendFileContent(response, "HTML/Login.html", "text/html");
    console.log("Requested URL : " + request.url + "\n");
}
else if (request.url === "/main") {
    sendFileContent(response, "HTML/Main_Home.html", "text/html");
    console.log("Requested URL : " + request.url + "\n");
}
// JS / CSS / Other formats
else if (/^\/[a-zA-Z0-9\/]*.js$/.test(request.url.toString(1))) {
    sendFileContent(response, request.url.toString().substring(1), "text/javascript");
}
else if (/^\/[a-zA-Z0-9\/]*.css$/.test(request.url.toString())) 
{        
    sendFileContent(response, request.url.toString().substring(1), "text/css");
}
else if (/^\/[a-zA-Z0-9\/]*.json$/.test(request.url.toString())) 
{
    sendFileContent(response, request.url.toString().substring(1), "application/json");
}
else if (/^\/[a-zA-Z0-9\/]*.ts$/.test(request.url.toString())) 
{
    sendFileContent(response, request.url.toString().substring(1), "text/javascript");
}
else if (/^\/[a-zA-Z0-9\/]*.png$/.test(request.url.toString())) 
{
    sendFileContent(response, request.url.toString().substring(1), "image/png");
}
else if (/^\/[a-zA-Z0-9\/]*.jpg$/.test(request.url.toString())) 
{
    sendFileContent(response, request.url.toString().substring(1), "image/jpeg");
}
else 
{
    console.log("Requested URL : " + request.url + "\n");
    response.end();
}
});

server.listen(1337, function () 
{ 
  require("console-stamp")(console, '[HH:MM:ss]');
  console.log("HTTP Server runs on port : 1337");

});

console.log("Server ready....");

And here is the Send file content function :

function sendFileContent(response, fileName, contentType){
fs.readFile(fileName, function (err, data) { 
    if (err) {
        response.writeHead(404);
        response.end("Not Found!");
    }
    else {
        response.writeHead(200, { "Content-Type": contentType });
        response.end(data);
    }

});
};

And this is how i call the files in html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="../materialize/css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="../CSS/App.css" />
<title></title>
<script type="text/javascript" src="../jquery/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="../materialize/js/materialize.min.js">      </script>
<script type="text/javascript" src="../Javascript/Main_App.js"></script>

Thank you for your time !

did you attempt browsing directly to one of said files? likely cause is due to incorrect path. — Kevin B, Mar 21 '17 at 15:14

score 1 · Accepted Answer · edited May 23 '17 at 11:54

You are trying to implement your own static files server and there so many problems in your implementation even besides those that you're asking about that I think that you need to rethink your approach.

To serve static files it is much easier to use a working solution like express.static - but read below for solutions without Express if you really need it. Example with express.static:

var path = require('path');
var express = require('express');
var app = express();

var dir = path.join(__dirname, 'public');

app.use(express.static(dir));

app.listen(3000, function () {
    console.log('Listening on http://localhost:3000/');
});

See this answer for more options using connect, express, http and net:

How to serve an image using nodejs

In that answer there are examples of doing what you're trying to do here using express.static, Express without express.static, using connect, using http and using net and even the version that uses raw TCP sockets is not as complicated as your code here. You may want to take a look at it and base your code on these examples.

( NodeJS ) Http server does not load JS/CSS files from folder

1 Answers1