How do i include multiple libraries on my local node.js server html page

Question

So i have a html page with some facial recognition libraries on it and it works fine. But when i put the html page on a node.js local server, all the pictures and javascript libraries are not included anymore. For every library include i get an: "Uncaught SyntaxError: Unexpected token <" error, on the first line of the html page.

I tried to include them from within the node.js file like this:

var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs') 
  , five = require("johnny-five"),
  led;


//iets met poort 80
app.listen(80);

// webserver handler 
function handler (req, res) {

  fs.readFile(__dirname + '/emotie.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

function handler (req, res) {

  fs.readFile(__dirname + '/js/emotionmodel.js',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading emotionmodel.js');
    }

    res.writeHead(200);
    res.end(data);
  });
}

function handler (req, res) {

  fs.readFile(__dirname + '/js/emotion_classifier.js',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading emotionClassifier.js');
    }

    res.writeHead(200);
    res.end(data);
  });
}

But it still doesnt work, and the filepath is right for sure.

Does this help? - https://stackoverflow.com/a/39501952/101022 — timborden, Jun 06 '17 at 13:32

rsp · Answer 1 · 2017-06-07T15:10:40.333

The error that you get is when your browser expects client-side JavaScript and gets HTML instead.

First of all, you have two functions named handler and only one of them is actually used. You should consider using a linter to help you detect problems like that.

Also, you are trying to write separate handlers to serve all of the individual files separately - what you should do instead is to put all of your static content (HTML, JS and everything else that you want to serve) into one directory and serve all of the files in there.

If you put everything in a directory called public then you could use something like this using Express:

var path = require('path');
var express = require('express');
var app = express();

var dir = path.join(__dirname, 'public');

app.use(express.static(dir));

app.listen(3000, function () {
  console.log('Listening on http://localhost:3000/');
});

If you don't want to use Express then see this answer for more options of serving files:

How to serve an image using nodejs

What I also noticed is that you listen directly on port 80 which usually means that you run the Node app as root. Consider running it as an unprivileged user and use a reverse proxy to listen on port 80 and pass the traffic to your app that listens on some other port.

Thanks for your anwser. I tried your method with Express but I get: localhost/ Failed to load resource: the server responded with a status of 404 (Not Found) I tried some other methods too but cant seem to figure it out still — Rlour94, Jun 08 '17 at 18:58
So i have my user folder wich is the root folder for node. And in that folder is my node js file which contains your code with Express. Also in that root folder i have a "public" named folder that contains images, js, and 1 HTML file with the html for my application. Am i doing something wrong still? — Rlour94, Jun 09 '17 at 13:06

How do i include multiple libraries on my local node.js server html page

1 Answers1