referencing custom javascript file in node.js web app

Question

I am learning node.js and am starting with the common chat app example. I got everything working fine but instead of doing all the javascript inline in the index.html file, I want to put it in it's own file called app.js. However, once I do this, I get 404 not found on the file. I'm trying to play around with the src path but can't get it to find the file. Is there a trick to referencing custom js/css files when it's a node app?

Index.html

<div id="chat"></div>
<form id="send-message">
    <input type="text" id="message" />
    <input type="submit" />
</form>


<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/app.js"></script>
<script>

</script>

server.js

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
var path = require('path');
app.use(express.static(path.join(__dirname, 'app.js')));
server.listen(process.env.port || 3000);

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

io.sockets.on('connection', function (socket) {

    socket.on('send message', function (message) {
        console.log(message);
        io.sockets.emit('new message', message);
    });
});

app.js

$(document).ready(function () {
    var socket = io.connect();
    var form = $('#send-message');
    var message = $('#message');
    var chat = $('#chat');

    form.submit(function (e) {
        e.preventDefault();
        socket.emit('send message', message.val());
        message.val('');
    });

    socket.on('new message', function (data) {
        chat.append(data + "<br />");
    });

});

I may get hung up on grasping the concept of node but I'm assuming I shouldn't have to do anything within the actual server.js itself since that is the server side code and I shouldn't be doing any dom manipulation within the server side. Adding the custom js file like you normally would with a standard web app doesn't seem to be the correct way here. I've noticed that in almost all of the tutorials/documentation i've seen/read, they are referencing libraries such as jquery and bootstrap by calling the cdn url rather than including those files as a module or in a local directory. Just based on this and the 404 errors I continue to get, I'm assuming there is a different way to include external js references to local files within the web app.

Fiddler output:

GET http://localhost:1337/app.js HTTP/1.1
Host: localhost:1337
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Accept: */*
Referer: http://localhost:1337/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8
Cookie: __utma=111872281.1352628776.1455330937.1455330937.1455330937.1; __utmz=111872281.1455330937.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)

peteb · Accepted Answer · 2016-07-10 22:54:33Z

2

You need to use express.static() in your server.js. You're not establishing static assets in your Express server so you can't serve files.

var express = require('express');
var app = express();
var path = require('path');
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

server.listen(process.env.port || 3000);

// The below works but isn't a good practice because it's not scalable
app.use('/app.js', express.static(path.join(__dirname, '/app.js')));

// You should create a public directory in your project folder and
// place all your static files there and the below app.use() will
// serve all files and sub-directories contained within it.
//app.use('public', express.static(path.join(__dirname, 'public')));

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

Typically you don't set a file as static like I did in the above snippet. You'd establish a static directory, such as public then within your public directory you can place your static assets(CSS, JS, HTML) that can be served.

edited Jul 10, 2016 at 22:54

answered Jul 10, 2016 at 22:40

peteb

19.6k9 gold badges58 silver badges67 bronze badges

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

8 Comments

mwilson Over a year ago

ok. I'm fiddling with this. I saw this posted somewhere else as well but don't understand why I need to include this within the server side. I'll figure that part out later. However, I am getting path is undefined. Where is that path variable defined or what should it be set to?

peteb Over a year ago

path is a Node Core module. You can just require it. See my updated answer.

mwilson Over a year ago

OK. thanks. I'm still getting the 404 error, however. I have included the updated code to server.js

mwilson Over a year ago

path.join(__dirname, '/app.js') outputs the correct path to the file i'm after....

mwilson Over a year ago

Still getting 404 errors. Appreciating your help though!

|

Collectives™ on Stack Overflow

referencing custom javascript file in node.js web app

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related