Source code:
FruitfulApproach/ArrowGlue: Commutative diagrams (github.com)
Deployed (auto) to:
ArrowGlue (arrowglue-dd35800b80e8.herokuapp.com)
What it looks like locally on my workstation (running Django locally for debugging):
Heroku Log Errors:
ice=4ms status=404 bytes=2720 protocol=https
2024-08-21T19:01:32.535986+00:00 app[web.1]: Not Found: /static/js/bs-init.js
2024-08-21T19:01:32.536065+00:00 app[web.1]: Not Found: /static/img/android-chrome-192x192.png
2024-08-21T19:01:32.536282+00:00 app[web.1]: 10.1.62.130 - - [21/Aug/2024:19:01:32 +0000] "GET /static/js/bs-init.js HTTP/1.1" 404 2407 "https://arrowglue-dd35800b80e8.herokuapp.com/db/prop-editor/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Edg/127.0.0.0"
2024-08-21T19:01:32.536331+00:00 app[web.1]: 10.1.24.77 - - [21/Aug/2024:19:01:32 +0000] "GET /static/img/android-chrome-192x192.png HTTP/1.1" 404 2458 "https://arrowglue-dd35800b80e8.herokuapp.com/db/prop-editor/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Edg/127.0.0.0"
2024-08-21T19:01:32.678597+00:00 app[web.1]: Not Found: /static/quiver/src/index.html
2024-08-21T19:01:32.678871+00:00 app[web.1]: 10.1.24.77 - - [21/Aug/2024:19:01:32 +0000] "GET /static/quiver/src/index.html HTTP/1.1" 404 2431 "https://arrowglue-dd35800b80e8.herokuapp.com/db/prop-editor/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Edg/127.0.0.0"
Browser-side Errors:
prop-editor/:1 Refused to apply style from 'https://arrowglue-dd35800b80e8.herokuapp.com/static/css/Custom-Quiver-Navbar.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
prop-editor/:1 Refused to apply style from 'https://arrowglue-dd35800b80e8.herokuapp.com/static/css/Navbar-Right-Links-icons.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
bs-init.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
chromewebdata/:1
Failed to load resource: the server responded with a status of 404 ()
chromewebdata/:1 Refused to display 'https://arrowglue-dd35800b80e8.herokuapp.com/' in a frame because it set 'X-Frame-Options' to 'deny'.
prop-editor/:1 Refused to execute script from 'https://arrowglue-dd35800b80e8.herokuapp.com/static/js/bs-init.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
android-chrome-192x192.png:1
Failed to load resource: the server responded with a status of 404 (Not Found)
(index):2940 Uncaught TypeError: Cannot read properties of null (reading 'classList')
at HTMLDocument.onDocumentLoad ((index):2940:19)
prop-editor/:232 Uncaught DOMException: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "https://arrowglue-dd35800b80e8.herokuapp.com" from accessing a cross-origin frame.
at HTMLIFrameElement.<anonymous> (https://arrowglue-dd35800b80e8.herokuapp.com/db/prop-editor/:232:54)
prop-editor/:1 Refused to apply style from 'https://arrowglue-dd35800b80e8.herokuapp.com/static/css/Custom-Quiver-Navbar.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
prop-editor/:1 Refused to apply style from 'https://arrowglue-dd35800b80e8.herokuapp.com/static/css/Navbar-Right-Links-icons.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
So to me it looks as though Heroku is not copying over the static files, thought it appears to do a collectstatic call successfully during a manual deploy that I can tell. How can I fix it?
This isn’t urgent as the site is not finished, though it would be nice to have small demos up for my coding partner that I could link to.
Anyone else have static files issue with Heroku?
Here is my Heroku CLI directories showing staticfiles:
So quiver/src/index.html is there so there should be no problem. But there is still.
Interestingly Heroku collectstatic in the deploy output says copied to a “tmp/build_[blah]” directory, so… Shouldn’t it be Proj/staticfiles/?
@KenWhitesell On my related thread (top of Deployment forum). I tried running python manage.py collectstatic --noinput locally and it goes through locally, however this didn’t fix the issue of static files not being found when deployed to Heroku (same issue i.e.)
Interestingly though locally the command ends with 278 files copied and on Heroku deploy output it says 173 or so files…
It’s curious to see Heroku say 404 Not Found when the browser says it was denied.
You might inspect your X-FRAME-OPTIONS headers sessions.
Also, make sure your Heroku domain is in your ALLOWED_HOSTS.
The Django deployment checklist might be helpful, too.
1 Like
Thanks, Lance!
I will look into this as well as your other threads - something about S3 hosting… Ideally I could just use Heroku + Neo4j AuraDB to host this beast.
Lance, it turns out it was a matter of installing whitenoise lib and adding a few lines to settings.py to use it. Heroku deployment simply will not work without!
Here is the page I’m working on (frontpage currently broken though, so don’t go there):
ArrowGlue (arrowglue-dd35800b80e8.herokuapp.com)
As you can see bootstrap libs, and the Quiver CD editor I’m hacking into are all loading correctly as static files.
1 Like
I did go through the whole Deployment checklist and took notes to the Github readme page on various things I should optimize or secure before final release is made.
Makes sense! Congrats on getting it going!
I tried your app and there was something very satisfying about drawing grid-aligned arrows.
1 Like
Lance, have you tried it with a touchscreen? It’s amazeballs.
It will mainly be used for mathematics research / self-learning by students. No such thing on the web at the moment. Though there are proof assistants like Coq / Lean4 / etc, they do not incorporate diagrams as a first-class critical part of their apps. For instance Lean4 has a diagram widget that goes in the infoview of VS code, but it’s not really “used” as much as you’d expect.
A little history about these grid arrows (if interested):
there are some proofs in mathematics that arose around 100 years ago called “diagram chases”. In which you draw some squares using arrows, the nodes representing whole infinite vector spaces and the arrows linear maps. You then let some assumptions be made about the rows or columns such as “the first and last column are exact” (has to do with taking quotient spaces / homology), you then derive the conclusion by “chasing elements around the diagram.” The point of the diagram is that these can grow arbitrarily large. When the diagram is said to commute it means between any two paths starting/ending at the same nodes, they are equal if you compose along their individual paths (as functions or “arrows” compose in a category). So now think of something as small as a 3x3 grid of squares made by arrows / nodes. One cannot simply remember all the various equalities asserted by saying that the diagram commutes. It’s not a very good mnemonic - a list of lists composed functions that equate. So essentially useless. However, say “draw a 3x3 grid of squares using arrows” and everyone knows what you mean, so the diagrams form a notation / mnemonic and represent a lot of mathematical data.
So diagram chases are close to a visual puzzle / gamification of some types of math, sometimes called “arrow theoretic math”. The areas usually you’ll find with diagram chase proofs are anything advanced that has been algebratized, such as Algebraic Number Theory / Topology, Homological Algebra, Category Theory, Topos Theory.
The techniques actually arose mainly from Algebraic Topology, but weirdly enough the techniques generalize to nearly all other areas of math. So disparate areas of math relate to one another in a generalized setting.
There is major beauty to behold in these arrow theoretic maths. Whereas math used to typically be analysis on elementary expressions + text, now it has gone into the 2D/3D visual realm via arrow maths.
1 Like
That’s cool! I have never heard of this arrow theoretic math. Keep it up, sounds like a useful project.
