JS file gets a net::ERR_ABORTED 404 (Not Found)

Question

I am trying to create a simple Io-web-chat. I recently wanted to seperate my <script> inside my html file to an external js file.

this is my very simple folder structure:

Chat
|-- index.html
|-- index.js
`-- server.js

Relevant part of html file:

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="index.js"></script>
</body>
</html>

Relevant part of index.js file:

$(function() {

  //Initialize variables
  var $messageArea = $('#messages');
  var $InputMessage = $('#InputMessage');
  var $InputName = $('#InputName');

  //Initialize Socket
  var socket = io();

  //Send server Your message
  socket.emit('chat message', $InputMessage.val());

});

Relevant part of server.js file:

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

I also tried putting my files in this public type structure that they have on the socket.io examples:

Chat
|-- Public
|   |-- index.html
|   `-- index.js
`-- server.js

in that case I changed: src="/index.js" in html added /public/index.html into the server.js file But no luck.

This is all running in localhost. What am I doing wrong here?

Answer 1

As mentionned in comments: you need a way to send your static files to the client. This can be achieved with a reverse proxy like Nginx, or simply using express.static().

Put all your "static" (css, js, images) files in a folder dedicated to it, different from where you put your "views" (html files in your case). I'll call it static for the example. Once it's done, add this line in your server code:

app.use("/static", express.static('./static/'));

This will effectively serve every file in your "static" folder via the /static route.

Querying your index.js file in the client thus becomes:

<script src="static/index.js"></script>

Answer 2

I had a similar issue that was resolved by omitting the leading slashes in my code. E.g. replace /js/script.js with js/script.js.

Answer 3

app.use("/assets", express.static('./assets/'));

Simply replace the static files extension to this. In my case the folder name is assets and in it I have css, js, images folders.