node.js server and .html file

Question

I started to work with node.js two days ago. I made my http server with node.js and I have a page which I made few month ago for some test purposes, but when I host my page on my computer it it works but without javascript files which are included in html page, like jQuery and some graph lib.

I tried to debug it with IE debugger, but I cannot solve that.

Funny thing is that when I open same page from my disk, just double clicking on .html file, it runs fine without any errors!

My question is what I supposed to do to make work? Did I miss something with node.js?

I have one html5 canvas element on page, and maybe that is a problem

This is my index.html

<html xmlns="http://www.w3.org/1999/xhtml">


 <head>
 <title>Hello Dialog</title>

<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="cache-control" content="max-age=0">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
<meta http-equiv="pragma" content="no-cache">


<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="RGraph.line.js"></script>
<script type="text/javascript" src="RGraph.common.core.js"></script>
<script type="text/javascript" src="RGraph.drawing.background.js"></script>


<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>


<script type="text/javascript" src="./js/jquery-ui-1.9.2.custom.min.js">        </script>



<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="temperature(1).json"></script>

 </head>
 <body style="font-size: 10px;">

 <button id="btn_hello">Say Hello</button>
 <button id="btn_hello1">LUKA</button>
 <button id="btn_hello2">ANJA</button>
 <button id="btn_hello3">MARKO</button>

 <div id="dlg_hello">Hello World!</div>
 <canvas id="graph" width="600" height="500"></canvas>

<script>

var data = [];
var limit;
var Temp = [];
var TimeStamp = [];

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}




readTextFile("temperature(1).json", function(text){
     data = JSON.parse(text);

    for(var i =0; i<Object.keys(data).length; i++)
    {       
        //alert(parseFloat(data[i].TimeStamp));
        TimeStamp[i] = data[i].TimeStamp;
        Temp[i] = parseFloat(data[i].Value);

    }

    DrawGraph(Temp, TimeStamp);

});

function DrawGraph(data, timestamp)
{
  var line = new RGraph.Line({
        id: 'graph',
        data: data,
        options: {
            labels: timestamp,
            gutterLeft: 55,
            gutterRight: 35,
            gutterBottom: 35,
            gutterTop: 35,
            title: 'A basic line chart',
            backgroundGridColor: '#aaa',
            backgroundGridDashed: true,
            textAccessible: true,
            scaleZerostart: true,
            labelsOffsety: 5
        }
    }).draw();
}

</script>
 </body>
</html>

and this is server.js in node.js

var http = require("http");
var fs = require("fs");
var windows1250 = require("windows-1250");

var ht = fs.readFileSync('./index.html',"utf-8");

http.createServer(function (req, res) {

        res.writeHead(200, {'Content-Type': 'text/html','Content-Length':ht.length});
        res.write(ht);
        res.end();
        console.log(req.url);


    }).listen(8888, function () {console.log("server is listening on port 8888");});

It seems that your resources files are not sent by the server. You are only sending the index Html, not the other files (js scripts and css ) — Canilho, Oct 23 '16 at 20:44

score 1 · Answer 1 · answered Oct 23 '16 at 20:52

1

The server does not know where to find your javascript files. You might want to look into using express.js. This provides the capability to use the express.static command.

answered Oct 23 '16 at 20:52

ratracegrad

84
4

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

You are not hosting the files. The server doesn't know where to look for the JavaScript files, so it simply doesn't include them.

Look into using serve-static or a better solution to vanilla HTTP servers, express.
There is another similar answer here.

edited May 23 '17 at 12:06

Community

1
1

answered Oct 23 '16 at 21:03

baranskistad

2,176
1
21
42

score 0 · Answer 3 · answered Oct 24 '16 at 05:28

I remember in nodejs, you can read html like this:

var fs = require('fs');

fs.readFile('/path/html', 'utf8', function (err, data) {
  if (err) {
    console.log(err);
  } else {
    res.send(data);
  }
});

if you want a better location path of the file, you can use

var path = require('path');
path.join(__dirname, '/path/html');

Then it will be like this:

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

var file = path.join(__dirname, '/path/html');

fs.readFile(file, 'utf8', function (err, data) {
  if (err) {
    console.log(err);
  } else {
    res.send(data);
  }
});

node.js server and .html file

3 Answers3