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?

Ebrahim Fadae · Accepted Answer · 2020-06-04 15:05:10Z

2

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.

edited Jun 4, 2020 at 15:05

answered Jun 4, 2020 at 6:10

Ebrahim Fadae

613 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Crinse Over a year ago

So this didn't resolve the issue. It's still loading the "test.js" file as an HTML. And Im still getting the syntax error. I've copied your code directly, as well as provided and exact Path to the 'if' statement.

Ebrahim Fadae Over a year ago

@Crinse I changed .path to .url. It should work now.

slebetman · Accepted Answer · 2020-06-04 06:10:11Z

0

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);
}

answered Jun 4, 2020 at 6:10

slebetman

115k19 gold badges147 silver badges180 bronze badges

Comments

Didier68 · Accepted Answer · 2020-06-04 06:56:59Z

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 !

Collectives™ on Stack Overflow

NodeJS Not loading External javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related