Unable to load js and css files in node.js

Question

This is html page.I'm calling this page from node.js server i.e, app.js.Here I'm unable to load socket.io.js,bootstrap.js,bootstrap.css pages.

My index.html:

<html>
<script type="text/javascript" src="/javascripts/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type ="text/javascript" src="/javascripts/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.css" />


<div id="progressbar">
</div>

<script>
  var socket = io('http://localhost:8085');
  socket.on('connect', function(){});
  socket.on('message', function(data){
    $('#progressbar').progressbar({
    maximum: 100,
    step: JSON.parse(data).percent
    });
  });
  socket.on('disconnect', function(){});
</script>
</html>

My app.js code :

var app = express ();
var http = require('http').Server(app);
var io = require('socket.io')(http);
http.listen(8085, function(){
    console.log('listening on *:8085');
});

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

app.get('/', function (req, res) {
 res.sendfile(__dirname + '/index.html');
//res.send('Hello World!');

});

In firebug,I'm facing this

Can you post your app.js, the part where you include express.static? — Vsevolod Goloviznin
– Vsevolod Goloviznin, Commented Nov 17, 2015 at 9:53
Maybe also the folder structure where your app is running from — Starscream1984
– Starscream1984, Commented Nov 17, 2015 at 9:54
Make sure the path is correct. Can you see the file from localhost:8085/javascripts/socket.io.js ? — augustine
– augustine, Commented Nov 17, 2015 at 10:07

Andrius · Accepted Answer · 2015-11-17 12:20:29Z

2

You have set up incorrect paths for static files.

In your case, you'll need to use this:

app.use('/javascripts', express.static(__dirname + '/javascripts'));
app.use('/stylesheets', express.static(__dirname + '/stylesheets'));

Now, whatever files are in javascripts and stylesheets folders will load as static files.

Your current method of using static files:

app.use(express.static(path.join(__dirname, 'public')));

This will load everything that's beneath public folder as static files, so you would need to move the javascripts and stylesheets folders there if you want that to work.

answered Nov 17, 2015 at 12:20

Andrius

5,94922 silver badges28 bronze badges

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

5 Comments

Andrius Over a year ago

Which of the options did you try?

dev333 Over a year ago

I tried by changing to the above said code .It did not worked for me.Actually at this path,I'm getting the file localhost:8085/javascripts/socket.js

dev333 Over a year ago

so in index.html,I changed like this,<script src="localhost:8085/javascripts/socket.io.js"></script> <script src="code.jquery.com/jquery-1.10.2.js"></script> <script src="localhost:8085/javascripts/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="localhost:8085/stylesheets/bootstrap.css" />

Andrius Over a year ago

Create a very simple project example with this problem and put it on GitHub, I'll check it out.

Andrius Over a year ago

Sorry, host it somewhere so I'm hopefully not the only one looking.

Subham · Accepted Answer · 2015-11-17 13:47:40Z

0

change your view engine to html and modify the code like below :

app.set('views', path.join(__dirname, 'public'));
app.set('view engine', 'html');

and change the sendfile method :

res.sendFile(path.join(__dirname, '../YOUR_FOLDER_NAME/public', 'index.html'));

EDITED::

change the index.html file:

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/test.css" />

edited Nov 17, 2015 at 13:47

answered Nov 17, 2015 at 12:16

Subham

1,4654 gold badges17 silver badges36 bronze badges

1 Comment

Subham Over a year ago

check the edited answer. you don't need to put the socket.io.js in javascript folder manually.just add the script and remove '/' before stylesheets and javascripts in script and link file .

kenpeter · Accepted Answer · 2015-11-18 13:42:29Z

This is the app.js. (based on @Andrius' solution) I was able to make it running on http://localhost:8085. index.html stays the same.

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');

var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
http.listen(8085, function(){
    console.log('listening on *:8085');
});

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
//app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

//test
app.use('/javascripts', express.static(__dirname + '/javascripts'));
app.use('/stylesheets', express.static(__dirname + '/stylesheets'));

app.use(express.static(path.join(__dirname, 'public')));

//app.use('/', routes);
//app.use('/users', users);

app.get('/', function (req, res) {
 res.sendfile(__dirname + '/index.html');
//res.send('Hello World!');

});

Collectives™ on Stack Overflow

Unable to load js and css files in node.js

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related