javascript not loading in HTML file - nodejs + http

Question

Disclaimer: I am new to node.js so I assume there is a very basic answer to this question.

I am using node.js on Windows, with http module to generate a static page with content generate from a js file.

Server file (server.js):

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

fs.readFile('./index.html', function (err, html) {
    if (err) {
        throw err;
    }
    http.createServer(function(request, response) {
        response.writeHeader(200, {"Content-Type": "text/html"});
        response.write(html);
        response.end();
    }).listen(8080);
});

HTML file (index.html):

<!DOCTYPE html>
<html>

<body>

<div id="div1">
  <p id="p1">This is a static paragraph.</p>
</div>

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

</body>
</html>

JS file (start.js)

var para = document.createElement("p");
var node = document.createTextNode("This text is loaded from a js file.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);

When I load index.html directly, I get the following output:

This is a static paragraph.

This text is loaded from a js file.

^^ this is my desired output.

Problem: However, when I use node.js and run server.js, the start.js content does not load. I get:

This is a static paragraph.

Any help would be appreciated.

FYI, my folder structure

/
- node_modules
-- http
-- fs
- index.html
- server.js
- start.js

dRoyson · Accepted Answer · 2018-10-01 05:43:10Z

2

Every request url that you get for a file needs to be handled by the node server. I would suggest using Express.js as this would ease in handling the different url paths and files can be served directly. But in case you want a pure node.js based implementation, check below code.

To serve a file from the server you will have to modify your server.js to something like this:

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

http.createServer(function(request, response) {
    if(request.url=='/'){
        fs.readFile('./index.html', function (err, html) {
             if (err) {
                  res.send(500,{error: err});
             }
             response.writeHeader(200, {"Content-Type": "text/html"});
             response.write(html);
             response.end();
        });
    } else if(request.url=='/start.js'){
        fs.readFile('./start.js', function (err, jsFile) {
             if (err) {
                  res.send(500,{error: err});
             }
             response.writeHeader(200, {"Content-Type": "text/javascript"});
             response.write(jsFile);
             response.end();
        });
    }

}).listen(8080);

Hope this helps :)

edited Oct 1, 2018 at 5:43

answered Oct 1, 2018 at 5:32

dRoyson

1,5173 gold badges14 silver badges25 bronze badges

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

3 Comments

Wronski Over a year ago

I tried this, and the page is now endlessly loading. I suspect this is due to the fact the server cannot find /start.js. I am going to investigate a bit further.

dRoyson Over a year ago

@Wronski try debugging to find what is the url you get while doing a fetch for start.js, I might have missed something. Feel free to suggest an edit if you get it.

Wronski Over a year ago

your code was correct. I had another .js file that was causing the endless loading. Once I removed reference to that file, the code loaded showing: This is a static paragraph. This text is loaded from a js file.

AndrewSteinheiser · Accepted Answer · 2018-10-01 05:32:33Z

1

Your logic for appending child nodes seems okay.

I think you should try changing your src="start.js" to src="./start.js" or src="/start.js" just to make sure that you're referencing the path properly. Add a console.log() statement in your start.js to make sure that it is being loaded.

EDIT: Make sure you are hosting your file on your server. You could add something like express or connect to help.

To use connect, run npm install --save connect in your project directory.

var connect = require('connect'),
directory = '/path/to/Folder'; // probably just '/' for all your files

connect()
  .use(connect.static(directory))
  .listen(80);

console.log('Listening on port 80.');

Refer to their docs for full instructions and more examples using http.

edited Oct 1, 2018 at 5:32

answered Oct 1, 2018 at 5:10

AndrewSteinheiser

5005 silver badges18 bronze badges

4 Comments

Wronski Over a year ago

I tried those alternatives and the path is properly referenced, however the file is not loading since console.log() doesn't make any logs. I believe the issue is related to what @BharathRao mentioned i.e. "file is not on the server"

AndrewSteinheiser Over a year ago

Yes, that must the issue then. I edited my post with another method you could try.

Wronski Over a year ago

I tried your solution with express following instructions on expressjs.com/en/starter/static-files.html i.e. putting start.js in a /public folder and it worked! Thank you.

AndrewSteinheiser Over a year ago

Glad you got it working! express is usually my go-to as well ;)

BharathRao · Accepted Answer · 2018-10-01 05:13:47Z

1

I think it's not able to find the js, Before you reference the js, ensure it is on the server and you can load it from the server, like this: 'http://127.0.0.1:8000/start.js'. All of our static files, such as img, css, js should be put on server, only then it will be referrenced.

answered Oct 1, 2018 at 5:13

BharathRao

2,1261 gold badge23 silver badges31 bronze badges

2 Comments

Wronski Over a year ago

I suspect the file is not "on the server" because when I load localhost:8080/start.js I get the following error start.js:1 Uncaught SyntaxError: Unexpected token in the chrome console. How do I add a file to the server?

guyot Over a year ago

If start.js is throwing an error at line 1 then it is on the server, you just have a syntax error at line 1. What is your line 1 of that file? Double and triple check it for possible errors.

Grigore Vieru · Accepted Answer · 2022-03-27 19:22:25Z

0

You app not seeing your javascript file. Best solution is to use express.

create public folder(if you don't have it).
Put your javascript file into public folder.

Import express.

set static folder.
In your .html file write path to .js file like you are in public folder, ex: "/public-subfolder-if-is/yourFile.js"

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

app.use(express.static("public"));

answered Mar 27, 2022 at 19:22

Grigore Vieru

213 bronze badges

Collectives™ on Stack Overflow

javascript not loading in HTML file - nodejs + http

4 Answers 4

3 Comments

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related