Javascript 404 Resource Not Found NodeJS - javascript

I'm running a Node JS server on an old laptop of mine, and I've portforwarded the port 8006 so that I can connect to the node server from another computer and view the web pages. However, I have a sound file that I want the server to play when something happens, but after checking the console output on my computer, it keeps throwing this error:
GET http://0.0.0.0:8006/surprise.mp3 404 (Not Found)
Where of course the zeroes are my actual IP address (the ip of the server). Everything else runs fine including all the javascript files and the webpages. This is the code that actually plays the sound:
var audio = new Audio('surpise.mp3');
audio.play();
And that's sitting inside one of the client-side javascript files. How can I make that particular mp3 file accessible to outside users?

If you're using the Express framework (which it sounds like you are), you can create a .get() route for /surprise.mp3 and then use res.SendFile("/somepath/surprise.mp3") so that your node.js server will serve that file when that route is requested.
Or, if you have multiple static files to serve, you can use express.static() to set up a directory of static files that will get automatically served.

Related

Download link through HTTP server

I am trying to create a download link for my website as follows:
This approach works perfectly when running the website locally from my computer, but when I run it on a server I get the error "Failed - No file" on Chrome, and nothing happening on Firefox. I am attempting this approach after I tried achieving the same thing through an Express route, but running into blocks with that too.
I believe the problem has to do with the server moving files to different locations in the "virtual file directory" when running, and so href needs to point somewhere else, but I can't find any examples of where to point it. It seems the most common problem is cross-origins policy, but I have no trouble with that.
Short excerpt of directory structure as follows:
-> exec
-> install.exe (file to download)
-> public
-> pages
-> index.html (file with download link)
-> server.js (file that serves index.html at "/home")
Going off your directory structure, it looks like anything outside of your public directory is not publicly-accessible - that is, the server can see it and knows it's there but does not allow the browser to access it.
Try moving the exe into the public folder and changing your href.
I'm willing to bet the reason it works locally is because your entire filesystem is readable by the browser, so it will happily go up 2 levels, whereas the server doesn't allow the same behaviour

Javascript files get damaged with cpprest SDK backend (C++ / Angular2)

I have a backend service which is supposed to be used on multiple computers/platforms. This backend is written using CppRest SDK.
To control the service I have written a frontend using Typescript/Angular2. The generated .js files are returned by the backend -i.e. they are saved on the drive of the computer running the backend service.
When running the server app on Windows computers, there seems to be no problem. However when I made an OSX build, the main .js file is bringing on syntax errors in the client's browser. It seems to be damaged somehow (almost like chunk of text was missing in the middle of the script).
I thought this could be an encoding issue, but the problem remains the same after resaving the scripts with utf8 encoding, adding utf8 charset to the Content-Type header of the response on the backend side and defining script's charset in the Index.html.
The weird thing is that when I try to use the service from the browser of the computer actually running the backend app, everything is allright.
I can't wrap my head around this. Any thoughts?
Thanks.

png files failing to load when opening html file directly, but they load when opening from webstorm

I've been working on a game in javascript for my CS course. When I open the document by hitting run in Webstorm, it loads the game correctly, however when I just try opening the html file from Finder, the webpage opens but none of the png files I'm using for the sprites load. I opened Inspect Element in google chrome, and the javascript files loaded correctly but all the png files listed as canceled. This doesnt happen when the game is run from webstorm (when I run it from webstorm, all image files load properly).
When the game is opened directly from an html file (that's when I have the problem), chrome lists the path of the html document as the webaddress, although when opened from webstorm, it lists http://localhost:63342/CS%20Week%2010/CS105_Jessica.Davis_DogGame.html?_ijt=tmrr2fndgac82h07hlvt101gi4
How can I get around this issue so that when opening the html file from Finder it loads everything correctly? All image files are in the same directory as the html file.
Because of browsers security, loading files like this might not work from a url starting with file://
What webstorm is probably is making a local web server so that instead of saying file:// you could say http://. if any website was able to load images from file:// then any webpage you visit would have been able to search for any file on your computer and send it over the internet without your consent so browser often have these settings on. So you'd need a server. If you are working on your computer, you could make a local server just like webstorm and host your own files there. or host it on another service like github pages or codepen.
Now since all images are in the same directory, make sure that every time you call loadImage you use the images name and extension instead of saying /User/user/whatever_other_directory_you_have_it_under/image.png.
Once you did that you can make a local web server for the project. To make a local server, open Terminal (an application under utilities, you could spotlight search for it as well) and type cd, drag your project folder and drop it over terminal, and hit enter. Then type python -m SimpleHTTPServer and wait till it says something like Serving HTTP on 0.0.0.0 port 8000 .... Then taking the 0.0.0.0 and the 8000 you see in the example (yours may or may not be the same) go to your browser and type http://0.0.0.0:8000 (replacing the digits with whatever you got, not this link doesn't work until you do that)
Images should load alright. If you need to stop the server you can go back to terminal and hit control+C.
Note that when presenting your p5 sketch, no one else would be able to see the website on their computers if you make your local server. The local server is secluded to the device that is running it (although if their making their own local server and have your project files it should work just fine).
If you want the website hosted so that you could share a link with anybody in the world you could use codepen or github pages. If you go to codepen.io it should be self-explanatory although you'd have to upload your images to some image hosting site like tumblr or something and add the URL source of those images to codepen or you could put everything into github for even better results!
To use github pages you'd need to make a github account (preferably with your username being whatever you want your page to be named). Make a repository named insert_username_here.github.io. add your files to the repository (make sure to try to keep all sub directories and folder exactly as they are from your project folder). After a minute or two go to http://insert_username_here.github.io to admire your brand new hosted webpage!

How to view local files in web browser by displaying and creating a link to local files stored in your computer in your webApp?

I have created a webapp using JSP,Html and Javascript which currently runs on my localhost using apache webserver. I want to display the files and folders and of a directory in local computer. I also want to create a download link or view link of those so that when anyone click on it it will be viewed in new tab or become downloadable as it happens in any ftp server. I know similar type of question has
been asked but none of them worked for me.
To create the download link I used
Download
this does not work as it is not in my webapp path and download attribute also does not work in internet explorer.
I'm not sure why you are exposing your local drive contents on the web but here's an option:
On the page that should display the files, in java code, list all
folders and files then for each file/folder show a link to some page
(for example "navigateLocalDrive" that sends the path of the clicked
file/folder like this:
Download
Now in that jsp, check if the GET variable is a path for a file or a directory,
if its a file, just send it back in the response, if its a
directory, list all files/folders and do the same as in step 1
Please note:
How I encoded the file path in the href in order to work properly.
The Access permissions for the webserver should allow write/read to that path (I'm already doing it on my Tomcat server on local host with the default setup no change needed)
For your reference, here are some helpers for this task:
How to list contents of a server directory using JSP?
Downloading file from JSP/Java
I am not sure if this is possible. In general the access rights are limited to the src and webContent Folder (for your html coding mentioned above for sure) . This is also reasonable, because you do not want to access or change data on your Computer in general, because after local development you want to deploy your web application to a server.
To make a test copy some file to the webContent and you will be able to download it. Within your Java coding you can use some IO package like java.io.File to navigate over folders and files. However keep in mind, that you will get some exceptions like
java.io.FileNotFoundException: C:\WeatherExports\export.txt (Access is denied)
if you want to access files outside the server.

Serve client side JavaScript in Express.js app

I have recently started to build my first Node.js app using Express. I have used the latest Express generator to create a skeleton app and I have successfully create several different layouts using Jade and CSS - this all works fine.
However, I cannot seem to get my client side JS to work. In my public folder I have a separate front end JS file and the only thing it contains is an alert (just for testing purposes). I can successfully navigate to the file in the browser and I am not receiving any console errors, however the alert never fires - What am I doing wrong?
In order to solve this problem I had to change the link reference to a script reference in my HTML. I also had to ensure I served static files in Express.
http://expressjs.com/starter/static-files.html

Categories

Resources