Loading javascript file in node?

Question

I'm configuring a very basic server with node(without express). I have a html file which has a link to javascript file. Right now I'm able to load only the html file and not the js resource to it. how to load the js file?

server.js

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

var scriptFile = path.join(__dirname), '/script.js')

http.createServer(function(req, res) {
 if (req.url === '/') {
   fs.readFile('./index.html', function(err, data) {
     if (err){
      throw err;
     }
     res.writeHead(200, {"Content-Type": 'text/html'});
     res.write(data); 
     fs.readFileSync(path.normalize(scriptFile)) //throws error here. script file when html page is loaded. 
//i'm trying to load the script.js when html file is loaded
     res.end();
     return;
   });
  }
}).listen(3000);

html:

<body>
 <h1> Hi </h1>
 <script src="script.js">
</body>

David · Accepted Answer · 2019-05-24T04:30:22.220

When your browser requests index.html it will read through the HTML and find that it references your script file in the <script> tag. When the browser sees these it makes an additional request to the server. So, to serve up other files, you just have to handle requests for those routes. I modified your example to demonstrate this:

server.js

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

http.createServer(function(req, res) {
    if (req.url === '/') {
        fs.readFile('./index.html', function(err, data) {
            if (err){
                throw err;
            }
            res.writeHead(200, { 'Content-Type': 'text/html' });
            res.write(data); 
            res.end();
            return;
        });
    } else if (req.url === '/script.js') {
        fs.readFile('./script.js', function (err, data) {
            if (err) { throw err; }
            res.writeHead(200, { 'Content-Type': 'text/javascript' });
            res.write(data);
            res.end();
            return;
        });
    }
}).listen(3000);

index.html

<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1> Hi </h1>
        <!-- Your browser will see this and then make an additional HTTP GET request for /script.js -->
        <script src="script.js"></script>
    </body>
</html>

You can verify this behavior using Chrome Developer tools.

Open developer tools by choosing the three-dot menu in the upper right-hand corner, and choosing More Tools -> Developer Tools.
Go to the network tab.
Navigate to localhost:3000 (or just refresh your page).

You'll see that two requests are made. The first is for index.html and then the second will be for the script referenced in the script tag.

I am just starting out with Node and this has so far been the most direct solution I found Thanks for sharing it! — Jero Dungog, Jul 17 '21 at 21:23

score 2 · Answer 2 · answered May 24 '19 at 04:46

The response for route /script should be handled differently as pointed out by @David moreover consider utilising Node.js streams for robustness

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

http.createServer(function (req, res) {

  if (req.url === '/') {
    fs.createReadStream('index.html').pipe(res);
    return;
  }

  if (req.url === '/script.js') {
    fs.createReadStream('script.js').pipe(res);
    return;
  }

}).listen(3000);

Additionally, it declutters the source code!

Loading javascript file in node?

2 Answers2

Linked