I'm having a problem, whenever I try to import a local script:
<script src="socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
var socket = io();
editor.getSession().on('change', function e() {
socket.emit('editor-change', editor.getValue());
});
socket.on('editor-change', function(val) {
edit.setValue(val);
});
</script>
Everything gets imported fine except the ace-builds which is in the correct directory. Here's an image of the error:
I don't understand why I'm getting this error (404) because all these files (including the server scripts) are hosted in the same directory as the file giving off the 404 error.
By default node.js does not serve any files. If you want it to serve files, then you either have to set up specific routes to serve specific files or use a module like express-static that can serve directories of files for you.
You can read more about serving static files here: http://expressjs.com/starter/static-files.html
Related
I'm developing a MEAN app using bitnami through AWS but this is the first time I've done this. I can't figure out how to send the static files in the public folder such as css and js.
I feel like I've tried every combination of configuring the apache proxy and including or not including "public" in the path but I must be missing something fundamentally. I've looked at the other Q&A on this topic but I think what I tried below uses those methods. Don't know if it has something to do with the proxy since I'm forwarding http://public-ip/test3 to the node server.
The bitnami-apps-prefix.conf file:
ProxyPass /test3 http://127.0.0.1:3100/
ProxyPassReverse /test3 http://127.0.0.1:3100/
The nodejs app.js file - tried it with an withough public in various places
var express = require("express");
const path = require('path');
var app = express();
app.use(express.static(path.join(__dirname, '/public')));
app.get("/", function(req,res){
res.sendFile(__dirname+"/public/p4.1.html");
});
app.listen(3100,'localhost',function(){
console.log("server has started");
});
the p4.1.html file - I've tried it with and without public in the path.
<html><head>
<link rel="stylesheet" href="public/styles.css">
<script src="public/functions.js"></script>
</head>
The p4.1.html, styles.css, and functions.js are stored in the public folder. The public folder is at the same path as the app.js file.
The html page does display but I get 404 errors for the css and js: http://public-ip/public/functions.js net::ERR_ABORTED 404 (Not Found)
Is this something in my code or in the proxy perhaps? Any help is appreciated.
So the solution was to put test3 instead of public in the url in the html file.
<html><head>
<link rel="stylesheet" href="test3/styles.css">
<script src="test3/functions.js"></script>
</head>
I have written down this code in NPM module with the help of socket.io,
Index.html
<html> <head> <title>WebRTC client</title> </head> <body>
<script src='socket.io/socket.io.js'></script> </body> </html>
In server.js file
var static = require('node-static');
var http = require('http');
var file = new(static.Server)();
var app = http.createServer(function (req, res) {
file.serve(req, res);
}).listen(8181);
var io = require('socket.io').listen(app);
io.sockets.on('connection', function (socket){
console.log('io.sockets.on');
});
Root folder has index.html, server.js, and socket.io folder contains no file
Hit localhost:8181 in a browser, index.html will run and socket.io/socket.io.js file automatically created
http://localhost:8181/socket.io/socket.io.js
and I checked my socket.io folder there is no file? How socket.io.js created? and what is the main purpose of a socket.io/socket.io.js file?
"You might be wondering where the /socket.io/socket.io.js file comes from, since we neither add it and nor does it exist on the filesystem. This is part of the magic done by io.listen on the server. It creates a handler on the server to serve the socket.io.js script file."
from the book Socket.IO Real-time Web Application Development, page 56
My socket.js file can not be found when my Node.js server runs on Heroku, however when it runs on localhost, it is found. In addition, although the app.js file is in the same directory with socket.js file, it can not be found. I've seen some posts suggesting to use
app.use('/', express.static(__dirname));
but i guess it is not the case here.
my index.html file :
<script src="/angular-socket-io/socket.js"></script>
<script src="/socket.js"></script>
<script src="/socket.io/socket.io.js"></script>
Amongst them, the only one couldnt be found is the second directory(/socket.js) which contains the 'socket factory'inside.
My folder tree is as follows;
-app
--assets
---app.js
---socket.js
Any help please?
Just add app.use(express.static(path.join(__dirname, 'app/assets'))); to your main code and after that you can use <script src="/socket.js"></script>
My JavaScript file didn't initialize because of how I imported the JQuery script inside of my index.html.
If your JavaScript file that contains JQuery is not initialized. Make sure to import it with HTTPS not HTTP.
WRONG :
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
CORRECT :
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
This solved my problem of missing the JavaScript file on Heroku.
I am trying to include jquery in my socket io served file which is served like this -
app.get('/:file', function(req, res){
res.set('Content-Type', 'text/html');
res.sendfile('shrib.html');
});
Now in shrib.html when i try to send -
<script type="text/javascript" src="/jquery-1.11.0.min.js"></script>
or
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
I get the error of jquery not found, but when i try to use the CDN version of jquery it runs fine. In my directory structure i have the jquery-1.11.0.min.js in both the main directory and also in the node_modules directory yet i don't see it and get error like this -
Uncaught SyntaxError: Unexpected token < jquery-1.11.0.min.js:1
Uncaught ReferenceError: $ is not defined
did You mistaken socket.io with express?
Because Your problem looks like its related to express, not socketio, and i see no sockets here...
If yes, You should set static files like this:
app.use('/js', express.static(__dirname + '/js'));
put all js files in your project/js folder, and then do:
<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>
Tried all possible combinations I can think of but not able to load static files using express server.
Dir Structure
app
--todoApp.html
----server.js //node file
----jquery.js
----backbone.js
Node server
var http = require('http'),
express = require('express');
var app = express();
app.listen(3000);
app.set('views', __dirname);
app.use(express.static(__dirname));
app.engine('html', require('ejs').renderFile);
console.log(__dirname);
app.get('/', function(req, res){
//res.send('Whats up?');
res.render('../todoApp.html');
});
__dirname prints as app/js ehich is correct. But page loads with error the server responded with a status of 404 (Not Found) http://localhost:3000/js/jquery.js.
HTML loads the script like this:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
I tried multiple things but it does not work.
Tried following:
app.use('/js',express.static(__dirname));
or
app.use('/',express.static(__dirname));
Please help.
Since the current directory is already the js directory, you don't need to specify it in the <script> tags when loading your JavaScript files:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="backbone.js"></script>
When you set a static directory in express, that directory effectively becomes the root, so all of your static file paths should be relative to that directory.
Also, it is probably not a good idea to have your server-side code in a static directory, since this would allow anyone using your server access to your server side code. It would be better to put all of your static files in a different directory, and set that as the static directory in express.