Brackets live preview generates a 404

p5.js Beginners
#1

This is on a Windows PC. I am totally new to P5JS (and slightly less new to Processing) and try to use Brackets to edit and test my sketches.

Originally, it worked. I downloaded the p5js ZIP file, unpacked it on the Desktop and started writing programs. I could execute the programs using Brackets Live Preview.

I then moved the folder structure to My Documents (i.e., c:\users\bbausch\documents\processing\p5js). Now, live preview doesn’t work anymore; the browser reports two errors

Failed to load resource: the server responded with a status of 404 (Not Found) p5.js:1
and
Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico:1.

The folder structure is:

...p5js\p5.js
...p5js\my-program
...p5js\my-program\index.html
...p5js\my-program\sketch.js

I am using the default index.html, which contains the line

<script data-brackets-id='47' src="../p5.js"></script>

I don’t know what the error messages mean. Does the first line in p5.js cause the error? Unlikely, because it’s a comment. Is the p5.js file not found? But why - it’s there! And where does the reference to favicon.ico come from?

When I copy the folder structure to my web server, the sketches run like a charm. I conclude something is wrong with Brackets’ live-preview web server. How to tackle this?

#2

I use Visual Studio Code without problems, so I’ll suggest that you use same. Cheers

#3
  • That file is located above the root folder.
  • Root folder is the 1 containing your “index.html” file.
  • I prefer getting the “p5.js” file via CDN btW:
1 Like