Host Your Django Project on Heroku (Overview)

I ran into one issue to deploy static image files on Heroku. The error shown in application logs is HTTP 404, file not found:

2022-01-01T03:48:25.767515+00:00 app[web.1]: 10.1.21.4 - - [01/Jan/2022:03:48:25 +0000] "GET /projects/ HTTP/1.1" 200 924 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36"
2022-01-01T03:48:26.016749+00:00 app[web.1]: Not Found: /static/img/daily.png
2022-01-01T03:48:26.017369+00:00 app[web.1]: 10.1.87.47 - - [01/Jan/2022:03:48:26 +0000] "GET /static/img/daily.png HTTP/1.1" 404 2268 "https://serene-bayou-01839.herokuapp.com/projects/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36"

In setting.py file we have the following settings: (I am following the guide based on this link devcenter.heroku.com/articles/django-assets)

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'projects/static'),
)

In template HTML file:

        {% for project in projects %}
            {% load static %}
            <img src="{% static '/img/daily.png' %}" alt="img files">
        {% endfor %}

The images files are stored in the following folders:

./static
./static/.DS_Store
./static/css
./static/img
./static/img/daily.png
./static/img/testproject.png
./static/img/todo.png

Could you shed some lights where could be the issue?

@jeffli336 At first glance, it looks like Django is looking for your image files in the wrong folder, i.e., static/ instead of staticfiles/ that you declared in the settings. Apart from that, the {% load static %} macro should be placed at the top of your template file. Let me know if that helps. If not, then please share the source code through GitHub, for example, so that it’s easier to reproduce the problem.

Hi Bartosz,

Thank you so much for your quick reply.

I updated static config in settings.py and {% load static %} macro in template file, it didn’t fix the issue.

Here is the GitHub repository for my testing code github.com/hongli336/heroku_python

Here is the web site link hosted on Heroku serene-bayou-01839.herokuapp.com/projects/

Thanks

@jeffli336 Thanks for sharing your code. I looked through it and have an answer for you, but it’s a bit complicated as there are multiple moving parts that affect hosting static resources.

If you switch to the development web server built into Django in your Procfile, then you should be able to request static resources through Heroku more easily:

# Procfile
web: python manage.py runserver 0.0.0.0:$PORT

But you’re using gunicorn instead, which is the right choice for production. Unfortunately, gunicorn has to be placed behind a reverse proxy, such as nginx, which in turn must be specifically configured to serve static resources. However, you can’t install nginx or any other tool since the underlying infrastructure is kept away from you by Heroku. What you can do, however, is install the whitenose library, which will automatically configure your Django project to serve its own static files through gunicorn.

To do that, install whitenoise into your virtual environment and pin the dependencies in your requirements file so that Heroku can pick them up later:

(venv) $ python -m pip install django gunicorn whitenoise
(venv) $ python -m pip freeze > requirements.txt

Next, add new middleware corresponding to whitenoise in your settings file:

# portfolio/settings.py

# ...

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',
]

Make sure the whitenoise middleware is placed exactly where shown above, i.e., after the security middleware.

Then, you need to do a little cleanup. Start by removing the staticfiles/ folder, which should not be committed to Git as it contains files collected by Django.

Also, you don’t need the STATICFILES_DIRS variable in your settings files, so go ahead and remove that too. It’s only necessary if you store your static resources in a non-standard location, which isn’t the case here. Django will look for static files in the static/ folder in your apps by default.

The STATIC_ROOT variable can be a little confusing because it’s the target directory where Django will collect files into. Let’s rename it to staticfiles/ to avoid confusion, and also, let’s take advantage of the new pathlib syntax. In the end, your settings file should only contain the following configuration for static resources:

# portfolio/settings.py

# ...

STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'staticfiles'

Finally, don’t forget to commit and push your changes:

(venv) $ git add .
(venv) $ git commit -m "Host static resources with whitenoise"
(venv) $ git push heroku

This should do the trick and make the static resources available to the web browser.

By the way, you can check out a video lesson on the best practices for hosting static files in Django if you haven’t already. In a nutshell, if you have more apps, then it’s advisable to use the double-folder structure explained in the video.

Let me know if that helps or if you need more assistance. Take care!

Hi Bartosz, I’ve added whitenoise and configured settings as you said but I still static still hasn’t appeared. More the wise staticfiles folder dosn’t want to see new app, the last one was added. Here is my repo github.com/Saulyaka/belevets Her is my project belevets.herokuapp.com/

Finally I went to another direction - create urls instead of download statics

Hi Bartosz, Could you give me any ideas of: The page you are trying to view cannot be shown because the authenticity of the received data could not be verified. This is the message when I try upload video to AWS S3 via admin of my project on heroku. From the localhost there was no such error.

This sounds to me like a problem with the SSL certificate. At which point are you getting this error?

When I try to save object from admin. Object with upload field - type video.mp4 size 27 mb