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

Question

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>

I don't see where you are including any css files in your html either by the way — Chris L
– Chris L, Commented Oct 18, 2015 at 18:46
I had used <style> tags just to make it work. But initially plan was to use css tags but it didnt work at all. anyways Thanks buddy . — Amrit Sohal
– Amrit Sohal, Commented Oct 18, 2015 at 19:50

Chris L · Accepted Answer · 2015-10-18 18:40:32Z

1

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.

edited Oct 18, 2015 at 18:40

answered Oct 18, 2015 at 18:31

Chris L

1,0611 gold badge8 silver badges21 bronze badges

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

3 Comments

Amrit Sohal Over a year ago

Thanks alot chris :) but i ran into new problem now :(

Chris L Over a year ago

Thats ok Amrit. 1st, narrow down the problem. 2. Try to reproduce the behavior in an isolated environment. 3. If isolated, post your fiddle, code, and expected behavior here. 4. If works as expected in isolated environment, examine other aspects of your code which may be causing the undesired behavior (configs, middleware, etc.). If all else fails, post another question. This place has sped up my learning substantially....

Amrit Sohal Over a year ago

I have been trying this from long time but today I am nearly done but this little problem are making me frustrated.

Avijit Gupta · Accepted Answer · 2015-10-18 18:34:52Z

0

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

answered Oct 18, 2015 at 18:34

Avijit Gupta

5,7863 gold badges24 silver badges36 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related