CODEWITHSUNDEEP
javascripthtmlcssnode.js
dev333
dev333

Reputation: 799

Unable to load js and css files in node.js

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 enter image description here

Upvotes: 1

Views: 2282

Answers (3)

kenpeter
kenpeter

Reputation: 8274

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!');

});

Upvotes: 0

Subham
Subham

Reputation: 1465

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" />

Upvotes: 0

Andrius
Andrius

Reputation: 5939

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.

Upvotes: 2

Related Questions