41

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?

EricTalv
  • 1,000
  • 1
  • 13
  • 26
  • Do you have a reverse proxy, like Apache or Nginx? If not, you do not have anything serving an "index.js" file: no reverse proxy, no route, nothing. Take a look into using express.static() to serve your static files in dev mode, and eventually Nginx later in Production. – Azami Jan 13 '19 at 21:47
  • 1
    what does "serving index.js file" exactly mean? I don't think I have a proxy, I just run the local host with 'node server'. As you said apache, does this mean I need a dedicated server running at all times when I'm developing? So should I instead use this whole gig on xampp under apache? – EricTalv Jan 13 '19 at 22:05
  • See how you're sending the "index.html" file in your "/" route? Well, your .js file is no exception: you also need to send it in some way. I'll draft up a quick answer that doesn't involve installing Apache or Nginx. – Azami Jan 13 '19 at 22:13

6 Answers6

38

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>
Azami
  • 2,122
  • 1
  • 12
  • 22
  • So I added 'var express = require('express'); var app = express(); app.use('/static', express.static('./static/')); ' <- into the server.js file As for my folder structure i put the index.js inside the "static" folder and now i am getting "Refused to load the font – EricTalv Jan 13 '19 at 22:54
  • "Cannot GET /" is also displayed on the Dom – EricTalv Jan 13 '19 at 22:55
  • I assumed you were already using express by your notation `app.get("/`, what was "app" referring to in that case if not the express object? – Azami Jan 13 '19 at 23:02
  • well i was still using express just in this way -> "var app = require('express')();" as instructed on the socketsio page. Plus i noticed the error i mentioned before was "grammarly" my extensions fault. I disabled it yet I still only get the "cannot GET /" in the DOM error – EricTalv Jan 13 '19 at 23:04
  • Wait but how is it supposed to get to the Html file in the first place? I rout it to the static folder, yet my html stays untouched. . Hazaa!! I miss-took your post! i had to "..add this line.." Not completely rid the last code i had.. Problem solved! – EricTalv Jan 13 '19 at 23:22
  • @MadWard is it possible to somehow use ```app.use(...express.static())``` twice? The problem is that my server file index.js is inside a ```functions``` folder since I am using Firebase.Therefore, what I have now is ```app.use(express.static('../../project'));```. Inside ```project``` I have all my folders and files, and it gives me this error with JS. And I have a ```static``` folder with (JS, css, img) and somehow have to use it as well. – user12051965 Sep 10 '20 at 23:28
  • when i tried with edit page its not working. e.g if i open this url it will get all assets from static http://localhost:8000/edit-category but if i tried with http://localhost:8000/edit-category/3 then baseurl is changed. working url ->. http://localhost:8000/public/assets/js/app.js not working url -> http://localhost:8000/edit-category/public/assets/js/app.js. if i add id in last it will not work. i have also set route like this. router.get("/edit-category/:id", function (req, res) { //code })) – Pragnesh Mar 29 '21 at 16:42
  • More details -> https://stackoverflow.com/questions/66854488/public-css-and-js-is-not-loading-while-while-pass-data-from-url – Pragnesh Mar 29 '21 at 16:44
7

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.

Grant Brown
  • 71
  • 1
  • 1
4

In my case, import { myFunc } from './config' give me the error. Using import { myFunc } from './config.js' solves the issue.

Woden
  • 1,054
  • 2
  • 13
  • 26
1

In my case I used

src="../static/js/controller.js"

instead

src="/js/controller.js"
Sandun Susantha
  • 1,010
  • 1
  • 10
  • 11
0
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.

dmigo
  • 2,849
  • 4
  • 41
  • 62
079_RISHABH
  • 11
  • 3
0

with me worked by removing the initial slash, replacing /src/index.js with src/index.js.

Regis Freitas
  • 1
  • 1