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
– Canilho, Commented Oct 23, 2016 at 20:44

ratracegrad · Accepted Answer · 2016-10-23 20:52:48Z

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, 2016 at 20:52

ratracegrad

844 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:06:43Z

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, 2017 at 12:06

CommunityBot

11 silver badge

answered Oct 23, 2016 at 21:03

skistaddy

2,2203 gold badges23 silver badges42 bronze badges

Comments

Donald Wu · Accepted Answer · 2016-10-24 05:28:08Z

0

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

answered Oct 24, 2016 at 5:28

Donald Wu

7167 silver badges21 bronze badges

Collectives™ on Stack Overflow

node.js server and .html file

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related