Facing error "Failed to load resource: the server responded with a status of 404 (Not Found)" in web browse console

p5.js
21

It seems like the problem is the JS files not being in the public folder. Express limits available files to a specified folder, so that no one can access your server.js through the browser and potentially exploit vulnerabilities in your code. Put your p5.* files into the public folder and it should work.

22

So Dan explains that in the video. If you watch from about minute 8:00 and more toward minute 9:10, he moves the p5js files to the public folder. If you think about this, your server is delivering the pages. For many programs, they try to keep server files and delivering files in different folders. This makes sense: You dont want to mix those files… it adds clarity to your file layout.

Dan post his code in github: website-archive/Node/sockets at main · CodingTrain/website-archive · GitHub

Looking at those files, it seems somebody changed the code and remove access to local p5js support files and cross-linked them to the CDN website, as you can see here:

https://github.com/CodingTrain/website/commit/50cf54ba8da07fdcb6c58d58cc6959f066bc6b80

Anyways, the folder structure should be

server/
|--package.json
|--server.js
|--Public/
      |---index.html
      |---sketch.js
      |---Libraries/
            |-----p5.min.js

And then your html should look like:

<script src="library/p5.min.js"></script>
<script src="sketch.js"></script>

Then by setting your express to check the public folder, you should be able to access those files. If it doesn’t work, try changing the port (both in express and when you summon the page using localhost). When testing for posts, it is better to test for post greater than 1000 and even better if you choose something greater than 10000, as I mentioned before.

Kf

1 Like
23

Thank you so much for posting this! I watched through the same tutorial and I got stuck as the canvas would not appear. I copied and pasted the source code from the server.js and sketch.js and now it works.

When I try and comment out “socket = io.connect(‘http://localhost:3000’);” from the sketch.js file the canvas disappears from the localhost-website. I’m just beginning to learn about p5.js, but this socket thing seem to be an important ingredient, yet it was not even in Daniels tutorial. But then again, things might have changed since 2016.

Thanks again!