My attempt to upload my django project to Render has hit a snag. The project includes numerous HTML files and CSS styles, with the latter being stored in a file named 'styles.css' within the static folder. Upon running the project, I noticed that while the images load properly, the styles seem to be missing from everything, including the Django Admin panel. The console indicated an issue with the MIME type when trying to load the stylesheet. A similar problem arises with my main.js file, also residing in the static folder. I have heard about using gunicorn, which is installed on my system, but I am unsure if it's the root cause of this problem as the images display correctly (albeit with varying sizes). I am seeking advice on how to resolve this issue.
To provide context, here is how I configured the media and static URLs in my settings.py:
STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / 'static']
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'
This is my current urls.py for the primary project:
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('store.urls')),
path('chatbot/', include('chatbot.urls')),
]
urlpatterns += static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
The base.html template I am utilizing, containing links and script tags in its header, looks like this:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="{% static 'style.css' %}">
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f0e1d1a4bfa2bfa2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- custom css & js -->
<script src="{% static 'main.js' %}" defer></script>
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>U-Community Mart</title>
</head>
<body class="body-main">
{% include 'navbar.html' %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-info alert-dismissible fade show" id="message" role="alert">
{{message}}
</div>
{% endfor %}
{% endif %}
<div class="container" style="margin-top: 50px; margin-bottom: 0; margin-left: auto; margin-right: auto;">
{% block content %}
{% endblock content %}
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d2dfdfc4c3c4c2d1c0f0859e839e83">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>
UPDATE: Following some modifications primarily in the settings.py file, such as installing whitenoise, I encountered some progress.
STATIC_URL = '/static/'
if not DEBUG:
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
I also inserted 'whitenoise.middleware.WhiteNoiseMiddleware' right after the SecurityMiddleware. At present, the Django admin panel seems to load the correct styles. However, I am still facing challenges when attempting to load the CSS and JS files. Here are the adjustments made in the HTML:
<link rel="stylesheet" type="text/css" href="static/style.css">
<script src="static/main.js" defer></script>
It appears that the problem may lie in the URL configurations, but I remain uncertain about how to tackle it.
UPDATE 2: Fortunately, I managed to overcome the issue. As per my findings, Render accesses all static files in a separate folder named 'staticfiles'. While I had created the folder, it was empty. To address this, I added the following to the settings:
STATIC_URL = '/static/'
if not DEBUG:
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE =
'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
Subsequently, I executed python manage.py collectstatic. This action ensured that all static files were now located in the folder required by Render. I appreciate any feedback provided here, and hope this solution proves helpful to others contemplating deploying their django projects on Render.