CODEWITHSUNDEEP
javascripthtmlnode.js
Amrit Sohal
Amrit Sohal

Reputation: 77

Cannot access content of html in by using node js server,

I made a html webpage that has .css, images and javescript files attached to it. However when I run my node server by using below command:

app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); });

it does open my webpage on localhost but gives error that it could not find attached files such as stylesheets images and scripts. If I just run my index.html pages it works fine. where is error?

what I did was ran my index.html and server.js separately and it did work. but whenever I tried to publish index.html page through node server it does not work.

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var fs = require('fs');

server.listen(8080, function() {
  console.log("wagwan")
});


app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});


io.on('connection', function(socket) {
  socket.on('turnon', function(data) {
    console.log(data.turnon);

    //serialPort.write("on");

  });

  socket.on('turnoff', function(data) {
    console.log(data.turnoff);
    // serialPort.write("off");
  });
});
        .background {

          background-repeat: no-repeat;

          /* custom background-position */

          background-position: 50% 50%;

          /* ie8- graceful degradation */

          background-position: 50% 50%\9 !important;

        }

        /* fullscreen setup */

        html,

        body {

          /* give this to all tags from html to .fullscreen */

          height: 100%;

        }

        .fullscreen,

        .content-a {

          width: 100%;

          min-height: 100%;

        }

        .not-fullscreen,

        .not-fullscreen .content-a,

        .fullscreen.not-overflow,

        .fullscreen.not-overflow .content-a {

          height: 100%;

          overflow: hidden;

        }

        /* content centering styles */

        .content-a {

          display: table;

        }

        .content-b {

          display: table-cell;

          position: relative;

          vertical-align: middle;

          text-align: center;

          color: #2d2bde;

          font-size: 35px;

          font-family: 'Arial Rounded MT';

        }

        /* visual styles */

        body {

          margin: 0;

          font-family: sans-serif;

          font-size: 28px;

          line-height: 100px;

          color: #ffffff;

          text-align: center;

        }

        section {

          background: #9ed100;

        }

        .not-fullscreen {

          height: 50%;

        }

        button,

        .button,

        input[type="reset"],

        input[type="submit"],

        input[type="button"] {

          background: none;

          background-color: #199cd8;

          background-clip: border-box;

          border: 1px solid transparent;

          border-radius: 4px;

          color: #fff;

          outline: none;

          font-size: 12px;

          font-weight: 400;

          letter-spacing: 1px;

          padding: 0 20px;

          text-transform: uppercase;

          line-height: 40px;

          display: inline-block;

          zoom: 1;

          *display: inline;

          box-shadow: none;

          text-shadow: none;

        }

        .top {

          background-color: #199cd8;

          height: 68px;

          padding-top: 20px;

          line-height: 50px;

          overflow: hidden;

        }

        .banner {

          padding: 1px 16px;

        }

        .w3-wide {

          font-family: "Segoe UI", Arial, sans-serif !important;

          letter-spacing: 4px;

        }

        .w3-right {

          float: right !important;

        }

        .sitelogo {

          margin: 0;

          margin-right: 20px;

          width: 60px;

          height: 60px;

          border: none;

        }
<!DOCTYPE HTML>

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

<head>

  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <meta charset="utf-8">
  <meta name="description" content="Web to serial Arduino">
  <title>Web to serial Arduino</title>

  <script src="socket.io/node_modules/socket.io-client/socket.io.js"></script>

  <script>
    //var socket = io.connect('http://localhost:8080');
    var socket = io('http://localhost:8080', {
      'transports': ['websocket', 'polling']
    });
  </script>
</head>

<body>
  <div class="banner top">
    <a href="index.html">
      <img src="Drawing.png" alt="logo" class="sitelogo">
    </a>
    <div class="w3-right toptext w3-wide">An Arduino project for robotic Arm</div>
  </div>
  <div class="fullscreen background" style="background-image:url('http://cdns.nocamels.com/wp-content/uploads/2013/10/bigstock-Business-technologies-today-43292197.jpg');" data-img-width="1600" data-img-height="1064">
    <div class="content-a">
      <div class="content-b">
        <br>WELCOME TO Arduino "A simple function to test node.js"
        <br>
        <div class="button" onclick="socket.emit('turnon', { turnon:'on'});">
          Turn On
        </div> <span style="color: #ffffff;"><a class="button primary-button" onclick="socket.emit('turnoff', {turnoff:'off'});">Turn off</a>&nbsp;</span>
        <br>
        <div class="button" onclick="console.log('connected');">
          connect
        </div> <span style="color: #ffffff;"><a class="button primary-button" onclick="console.log('reset');">Reset</a>&nbsp;</span>
      </div>
    </div>
  </div>

</body>

</html>

Upvotes: 1

Views: 2536

Answers (2)

Chris L
Chris L

Reputation: 1061

What you are trying to do is serve your "static" files. Javascript, CSS, etc are called static files.

Your route:

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

is sending your index.html file but your node.js server (express app) is not serving your static files.

something like this:

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

or

app.use(express.static(__dirname + '/public'));

should solve the problem for you.

"Serving files, such as images, CSS, JavaScript and other static files is accomplished with the help of a built-in middleware in Express - express.static.

Pass the name of the directory, which is to be marked as the location of static assets, to the express.static middleware to start serving the files directly. For example, if you keep your images, CSS, and JavaScript files in a directory named public, you can do this:"

http://expressjs.com/starter/static-files.html

Also, you appear to be using socket. I would recommend you learn express and node a little better before going into socket. Simplify your code, narrow it down to the specifics, and understand how it works. Socket is cool, but unnecessary for a lot of projects.

Upvotes: 1

Avijit Gupta
Avijit Gupta

Reputation: 5756

You well have to specify the path for serving static files in express, like this: 

app.use('/socket.io', express.static('socket.io'));

Also replace socket.io with /socket.io in your HTML

Upvotes: 0

Related Questions