NodeJS Not loading External javascript

Question

I am new to NodeJS and cannot seem to figure out why I am running into this issue...

I have an HTML file that is using an External javascript(JS) file to manage a table I created. I have the JS file included in the head of the HTML file and all files share the same directory:

<script type="text/javascript" src="test.js"></script>

When I open the HTML file with my browser directly... It works properly. Now I am trying to deploy it on a NodeJS server but am running into some issue.

This is the server:

var fs = require('fs');
var http = require('http');

http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});

var file = fs.createReadStream('index.V1.0.html');
file.pipe(response);
}).listen(8080);
console.log('listening on port 8080...');

The server loads the HTML just fine but fails to access the external JS script. I get an error in the inspector:

SyntaxError: Unexpected token '<'

Using the inspector to look at the source for the page... it shows the contents of my JS file to be the HTML that makes up the web page. I am lost on this one... so any tips would help.

---------UPDATE----------

So I followed the advice from y'all that commented, and i'm running into the same issue. I understand the theory behind loading the JS script as part of the server configuration.... but when adding this into my server, I still get the JS file loaded as a HTML.

var fs = require('fs');
var http = require('http');

http.createServer(function(request, response) {

    if(request.path === "/Users/christophermartone/Desktop/Programing/resturauntApp/driver.js") {
        var file = fs.createReadStream('driver.js');
        file.pipe(response);
        console.log("Made it to JS");
        response.writeHead(200, {'Content-Type': 'text/javascript'});
    } else {
        var file = fs.createReadStream('index.V1.0.html');
        console.log("Made it to HTML");
        file.pipe(response);
        response.writeHead(200, {'Content-Type': 'text/html'});
    }
}).listen(8080);

I added the console.log for testing, and it never makes it to the "Made it to JS." I get two "Made it to HTML" logs when loading the server.

Any other suggestions?

Answer 1

Your test.js file is also requested from your local server. the browser doesn't access to your file system to load js file.

In order to load your external js you must create a read stream just like that one you wrote for your index.html

var fs = require('fs');
var http = require('http');

http.createServer(function(request, response) {
    if(request.url === "/test.js") {
        var file = fs.createReadStream('test.js');
        file.pipe(response);
        response.writeHead(200, {'Content-Type': 'text/javascript'});
    } else {
        var file = fs.createReadStream('index.V1.0.html');
        file.pipe(response);
        response.writeHead(200, {'Content-Type': 'text/html'});
    }
}).listen(8080);

The cause of syntax error is that you are also providing a html file for test.js request from browser. And it's obvious that it throws an exception.

Answer 2

This is because when your page make a request for test.js the server answers with the content for index.V1.0.html . You need to detect what page the browser is requesting and respond correctly:

function(request, response) {
    response.writeHead(200, {'Content-Type': 'text/html'});
    let filename = 'index.V1.0.html';

    if (request.path === '/test.js') {
        filename = 'test.js';
    }

    var file = fs.createReadStream(filename);
    file.pipe(response);
}

Answer 3

where is your error?

On the Web Browser? Activate the debug session (by F12)

On the server? Start NodeJS in debug mode with:

node --inspect your_server_code.js   

It give you an "debugger key" like "... 127.0.0.1:9229/6ed07c20-f4ba-433a-aeb6-71c4a732d2e2 "

Then launche a new Chrome tab, and paste this URL (change the debugger key): chrome-devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws= 127.0.0.1:9229/6ed07c20-f4ba-433a-aeb6-71c4a732d2e2

So, you can debugger your Node server...

PS: @Ebrahim Hosseini is rigth, you are missing to send the test.js from Node to the browser... But it doesn't explain your error

PS 2: if you are new with NodeJS, install "Visual Studio Code": - it will help you to detect some errors, syntax coloring, and debug easily your server with a simple F5 !