title: referencing custom javascript file in node.js web app
body: <p>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?</p>
  
  <p><strong>Index.html</strong></p>
  
  <p></p>
  
  <p>
  
      
      
  
  </p>
  
  <pre><code>&lt;div id="chat"&gt;&lt;/div&gt;
  &lt;form id="send-message"&gt;
      &lt;input type="text" id="message" /&gt;
      &lt;input type="submit" /&gt;
  &lt;/form&gt;
  
  
  &lt;script src="https://code.jquery.com/jquery-3.0.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;
  &lt;script src="/app.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><strong>server.js</strong></p>
  
  <pre><code>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);
      });
  });
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>$(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 + "&lt;br /&gt;");
      });
  
  });
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/hnPZ4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hnPZ4.jpg" alt="F12 Developer Tools"></a></p>
  
  <p><a href="https://i.stack.imgur.com/PdIYa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PdIYa.jpg" alt="File structure"></a></p>
  
  <p>Fiddler output:</p>
  
  <pre><code>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)
  </code></pre>