Deploying a Django app to heroku. Debug False - django

Question

I am trying to deploy my app to heroku.
I successfully deployed to app after dealing with some bugs(the CSS wouldn't load, or images wouldn't load). Now when I deploy the app works fine, when DEBUG = True.
When I change DEBUG = False all the images fail to load.
Here is my code:
settings.py
"""
Django settings for DBSF project.
Generated by 'django-admin startproject' using Django 3.1.2.
For more information on this file, see
https://docs.djangoproject.com/en/3.1/topics/settings/
For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.1/ref/settings/
"""
from pathlib import Path
import django_heroku
import os
from dotenv import load_dotenv
load_dotenv()
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = os.environ['SECRET_KEY']
AUTH_USER_MODEL = 'social.User'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False
ALLOWED_HOSTS = ['desolate-lowlands-74512.herokuapp.com', 'localhost', '127.0.0.1']
# Application definition
INSTALLED_APPS = [
'channels',
'social',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'DBSF.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
REST_FRAMEWORK = {
# Use Django's standard `django.contrib.auth` permissions,
# or allow read-only access for unauthenticated users.
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
]
}
WSGI_APPLICATION = 'DBSF.wsgi.application'
ASGI_APPLICATION = 'DBSF.asgi.application'
CHANNEL_LAYERS = {
'default': {
'BACKEND': 'channels_redis.core.RedisChannelLayer',
'CONFIG': {
"hosts": [('127.0.0.1', 6379)],
},
},
}
# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'EST'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
MEDIA_ROOT= os.path.join(BASE_DIR, 'media/')
MEDIA_URL= "/media/"
Here's asgi.py
"""
ASGI config for DBSF project.
It exposes the ASGI callable as a module-level variable named ``application``.
For more information on this file, see
https://docs.djangoproject.com/en/3.1/howto/deployment/asgi/
"""
import os
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
import social.routing
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'DBSF.settings')
application = ProtocolTypeRouter({
"http": get_asgi_application(),
"websocket": AuthMiddlewareStack(
URLRouter(
social.routing.websocket_urlpatterns
)
),
})
here's wsgi.py
"""
WSGI config for DBSF project.
It exposes the WSGI callable as a module-level variable named ``application``.
For more information on this file, see
https://docs.djangoproject.com/en/3.1/howto/deployment/wsgi/
"""
import os
from django.core.wsgi import get_wsgi_application
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'DBSF.settings')
application = get_wsgi_application()
heres the procfile.windows
web: python manage.py runserver 0.0.0.0:5000
heres the procfile
web: gunicorn DBSF.wsgi
heres layout.html
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script type='text/babel' src="{% static 'social/javascript/react_components.js' %}"></script>
<script type="text/babel" src="{% static 'social/javascript/layout.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie#rc/dist/js.cookie.min.js"></script>
{% block head %}{% endblock %}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static 'social/styles/base.css' %}">
<link rel="shortcut icon" type="image/png" href="{% static 'social/favicon/favicon.ico' %}"/>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<nav class='main_nav'>
<a href="{% url 'index' %}" title='homepage'>DBSF</a>
<form action="/find_friends" method="GET">
<input name='search_term' type='text' placeholder='Search for friends'>
<input class='search_friends_button' type="submit" value='🔍'></form>
<a href="{% url 'profile' %}">
{% if user.profile_pic.url != '' %}
<img class="profile_pic_small_icon" src="{{user.profile_pic.url}}" alt="profile_pic">
{% else %}
<img class='profile_pic_small_icon' src="{% static 'social/core_images/no_image.jpg' %}" alt="{{user}} hasn't uploaded an image yet">
{% endif %}
{{user|title}}
</a>
Messages
<form class="logout_form" action="{% url 'logout' %}" method="post">
{% csrf_token %}
<a class='logout_a' href="/logout">Log out</a>
</form>
</nav>
<div class="messages">
<h1>{{message}}</h1>
</div>
<div class="side_bar">
<h4>Friend Requests</h4>
<div id="friendship_request_div"></div>
</div>
<div class="main">
{% block body %}{% endblock %}
</div>
<div class="friends_right_div">
<h4>Friends</h4>
<div id='friendship_div'></div>
</div>
<div id='message_box' class='message_box'>
</div>
</body>
</html>
So basically I need to figure out why DEBUG = False doesn't allow the images to load.
Let me know if it is clear what I am asking or if you need any other files to help me!
Thank you

Answer 1

In deployment mode, you need some bucket(e.g, Amazon S3) to store your static (and media) files and serve them from there. Heroku also has some plugins to do so(needs credit card). Heroku doesnot provide any way to do so without a bucket. That is why, they are not rendering. Also with DEBUG=True, all the media files will still vanish after 30 minutes as heroku runs on dynos and dynos refresh after every 30 minutes thus removing all the media files.

Answer 2

Try putting this in your urls.py:
from django.views.static import serve
and this in your urlpatterns:
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
In production you'd typically have nginx or something else serving media files like images. If you just want a quick and dirty way to still see them with DEBUG = True then this should add the media routes to the url patterns.