Cloudinary not displaying static files when displayed to heroku. Issue between Cloudinary and Heroku?
see deployed URL https://coach-matrix-d2cd1e717f81.herokuapp.com/ask_question/
This was previously an issue documented here, but much of the debugging steps seem irrelevant now I have reached the working theory that Cloudinary is installed correctly on my Django IDE, and the issue in fact lies between Cloudinary and Heroku settings.
Key points at a glance.
- on Heroku, I am expecting to see the django-quill WYSIWYG editor displaying just like in the localhost, however I get no box and instead these error messages in console.
- what makes this particularly challenging is that there are no obvious errors on localhost.
- Numerous editors have been installed - Summernote, CKEditor, working perfectly on localhost and having deployment issue.
- Cloudinary does seem to be implemented successfully in settings.py and env.py - confirmed as working by many peers. [omitted here for readability]
- python3 manage.py collectstatic command appears to work with no issues, returns a statement
Looking at the error message, it mentions an issue with MIME production version seem to be looking for the files locally (on Heroku) instead of on Cloudinary.
Refused to apply style from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/django_quill/django_quill.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
django_quill.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
ask_question/:1 Refused to execute script from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/django_quill/django_quill.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
ask_question/:108 Uncaught ReferenceError: QuillWrapper is not defined
at ask_question/:108:27
at ask_question/:110:11
ask_question/:1 Refused to apply style from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/django_quill/django_quill.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
clicking on one of the links, leads to this error message
Page not found (404)
Request Method: GET
Request URL: https://coach-matrix-d2cd1e717f81.herokuapp.com/static/django_quill/django_quill.js
Using the URLconf defined in coachmatrix.urls, Django tried these URL patterns, in this order:
admin/
index/ [name='index']
questions/ [name='questions']
ask_question/ [name='ask_question']
<slug:slug>/ [name='question_detail']
upvote/<slug:slug> [name='question_upvote']
downvote/<slug:slug> [name='question_downvote']
questions/<slug:slug>/upvote/ [name='question_upvote_from_list']
questions/<slug:slug>/downvote/ [name='question_downvote_from_list']
question/<int:pk>/delete/ [name='question_delete']
question/<slug:slug>/update/ [name='question_update']
answer/<slug:slug>/update/ [name='answer_update']
answer/<slug:slug>/delete/ [name='answer_delete']
answer/<int:pk>/upvote/ [name='answer_upvote']
answer/<int:pk>/downvote/ [name='answer_downvote']
accounts/
[name='home']
questions/ [name='questions']
accounts/
logout
The current path, static/django_quill/django_quill.js, didn’t match any of these.
static syntax doesn't appear to load at all in production
The first clue to me of a general issue with static files is that CSS was also not working in production (likewise worked on localhost). It was titled <link rel="stylesheet" href="{% static 'css/style.css' %}"> <!--limited to localhost, not displaying in production--> and had to be changed to this in order to display CSS
<link rel="stylesheet" href="https://res.cloudinary.com/dh1xovduy/raw/upload/v1703781479/static/css/style.674a1e0f7f03.css"> <!--linking directly to the file now works successfully-->
debugging steps
as noted earlier, django settings.py STATIC_ROOT etc are all working correctly as has been reviewed by several peers. It also uploads correctly using collectstatic. The issue must surely be between Cloudinary and Heroku.
inspect deployment log in heroku
acknowledges the static files from cloudinary, 0 static files copied, 1386 post-processed.
check Cloudinary library raw files
All files appear to have uploaded successfully Django-Quill CSS and JS files are located in a folder called django_quill
Cloudinary upload settings > unique filename: false
it's plausible that the added syntax at the end for version control makes the files unreadable for heroku. e.g. files on cloudinary are called
https://console.cloudinary.com/settings/
so in settings for the library I have created a new upload method with Unique filename: false
this confusingly doesn't appear to change the file type after manage.py collectstatic it even registered an uncomitted set of files but added a tag on the end.
django_quill.557645779788.js
cloudinary upload settings > Default Public ID: Etag value of asset
switch from random string at the end to Etag value of asset.
gitpod /workspace/Classroom-Matrix (main) $ python3 manage.py collectstatic
You have requested to collect static files at the destination
location as specified in your settings.
This will overwrite existing files!
Are you sure you want to do this?
Type 'yes' to continue, or 'no' to cancel: yes
[...]
0 static files copied, 1491 post-processed.
looking at the library, does not seem to overwrite existing files at all
tried deploying anyway with no such luck.
use DISABLE_COLLECTSTATIC=0 in heroku config vars
did not appear to change anything, whether it be set to 1 or 0
CLOUDINARY_URL=cloudinary: [REDACTED]
DATABASE_URL=postgres: // [REDACTED]
DISABLE_COLLECTSTATIC=0
PORT=8000
SECRET_KEY= [REDACTED]
custom rename file on cloudinary to remove randomstring
I finally tried removing the namestring manually on Cloudinary django_quill.557645779788.js
was replaced to django_quill.js
This also does not seem to change the error message.
try using {% static %} syntax to implement django_quill (reverted)
<link rel="stylesheet" href="{% static 'django_quill/django_quill.css' %}">
<script src="{% static 'django_quill/django_quill.js' %}"></script>
this doesn't even display in localhost due to a CORS issue. Step was reverted.
delete entire Cloudinary library and allow createstatic to upload
exactly the same error message. DISABLE_COLLECTSTATIC was set to 0.