Nodejs HTTP Createserver - Unpredictable Javascript Execution While Serving From Html Files

When I serve an html file, having some javascript, from my nodejs web server I get different results, compared to when I include the same javascript from an external source. I have

Solution 1:

In a nutshell, your http server is not configured to send populate_header.js to the browser when the browser asks for it.

When you do this in your HTML file:

<script src="populate_header.js"></script>

You're telling the browser to send your web server a request for a resource named populate_header.js. But your web server does not have a request handler that looks at what file is being requested and serve that specific resource. Your web server always sends htmlfile.html no matter what resource is being requested. So, the browser asks for a script file and gets an HTML file (causing it to basically just ignore it). Thus, your Javascript in populate_header.js is never delivered to the browser and thus the script in it never runs.

When you include the script inline, the Javascript is delivered with the HTML and works just fine without requiring another route on your web server.

A node.js web server serves NO files at all by default. It only serves files that you create a route handler for. It is possible to create a single route that will serve lots of static files (when using the Express framework, express.static() does exactly that). But, by default, it does not serve any files.

As soon as you need more than one route handler, I would recommend using a very simple framework like ExpressJS because it will save you a lot of time and is very lightweight. But, if you were going to add a new route handler to your existing little web server, you could do so like this:

var http = require('http')
var fs = require('fs')
http.createServer(function (request, response) {
    if (request.method === "GET") {
        let fname;
        // Look at what resource was requested and match that up
        // with the appropriate file name
        // DO not accept any resource requested because that could open up
        // your server for people to request your actual server code files
        switch(request.url) {
            case "/":
                fname = "htmlfile.html";
                break;
            case "/populate_header.js":
                fname = "populate_header.js";
                break;
            default:
                break;
        }
        if (fname) {
            fs.readFile(fname, function(err, data) {
                if (err) {
                    response.writeHead(404);
                    response.end();
                } else {
                    response.writeHead(200, {'Content-Type': 'text'})
                    response.write(data)
                    response.end();
                }
            });
        } else {
            response.writeHead(404);
            response.end();
        }
    }
}).listen(8081)

Here, you can see you're looking at request.url to see what exactly was requested and then sending that resource. It's also looking a request.method to only respond to GET requests. And, it's sending 404 responses when some other file is sent.

---

This would all be a lot simpler using the ExpressJS framework.

const express = require('express');
const app = express();

// look for matching static resources in the static_files subdirectory
app.use(express.static("static_files"));

// send the htmlfile.html file when / is requested
app.get("/", function(req, res) {
   res.sendFile("static_files/htmlfile.html");
});

app.listen(8081);

Then, just locate all your static resources in a sub-directory below your main server directory named static_files and the Express framework will automatically look in that sub-directory for files that match the requested URL. This code adds one custom route for / that specifically sends the htmlfile.html file, and you can certainly customize that however you want.

---

For further discussion of how node.js servers don't send any files by default, see these other related answers:

Can't load local files when using NodeJS server

Resources not loading in express

ajax request gives a 404 with express server (chrome) loads successfully with firefox without a server?

How to get files above the server directory in Node.js