P5.js V2.0.5 on own server: loadTable issues

p5.js Beginners
1

i have my project online editor

when i ZIP download the code from there
and copy it into my local RPI4 NGINX server
browser can not find the needed file ( like table )
but that is understandable:
http://192.168.1.104:8080/favicon.ico ( is missing anyway )
http://192.168.1.104:8080/assets/planets.csv
! it searches it in wrong path !

in browser i call:
http://192.168.1.104:8080/Solaris_csv_103/index.html
ok
and then it finds sketch.js and style.css correctly,

but not the async loaded table /assets/planet.csv
because it searches it in wrong, not relative path

ok, it does work with abs path though:
table = await loadTable('http://192.168.1.104:8080/Solaris_csv_103/assets/planets.csv', ',', 'header', loadData);

i not even know if i have a problem with

    • browser ? cors?
    • nginx server
    • processing async loadTable
2

Hi! I’m not 100% certain as to your problem from your description, but here’s my guess:

The / character at the start of your path /assets/planets.csv means that the path is not relative to the current directory but absolute (or rather, root-relative). Specifically, that leading / represents the root directory of the webserver your index.html was loaded from. Even if index.html is loaded from a non-root directory such as /one/two/three/index.html the request loadTable will trigger ignores that /one/two/three directory and looks only for an assets directory in the root directory.

…

and then it finds sketch.js […] correctly,

yep, that’s because in your index.html you’re requesting sketch.js (relative) rather than /sketch.js (which would look look only in the root):

<script src="sketch.js"></script>

Solution:

Use a relative path such as assets/planets.csv or ./assets/planets.csv (note the first character is critically NOT / in either of these). It should state the file location relative to the location of your main document (in this case, index.html).

That way, whatever location your project resources are eventually served from, the code will continue to work provided the assets folder and index.html file stay in the same locations relative to each other.

Hope this helps!

If this doesn’t resolve your problem

If this doesn’t resolve your issue then do give more detail, including:

  1. the specific first error message you are seeing
  2. and what the networking tab in the browser’s devtools shows as the exact urls of the requests it is making for your html file and the planets.csv. This essential tool removes the guesswork about what requests are being made by the browser.

A simpler experiment

Also note that the rules for these request paths are no different than the rules you might have met when writing simpler html files that load images, css, and .js files, etc. There’s nothing special happening here that is particular to p5.js, js, async, cors, etc.

This is useful because if you’re curious to learn more you could create a much simpler experiment with just a very small index.html which tried to load assets/picture1.jpg and /assets/picture2.jpg - put picture1.jpg and picture2.jpg in your assets folder, deploy the mini-project to your web server, and see which requests resolve correctly (again, use the network tab of chrome or firefox’s devtools).

2 Likes