Heroku Django app not loading static files (404 Not Found)

Question

I have been trying to deploy a django app onto heroku. However, it's not able to obtain the static files. I ran collecstatic on heroku and there is a static folder in the root directory of the app that contains the correct files: ~/static/rest_framework/css/bootstrap.min.css.

Settings.py:

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

cURL:

curl 'https://xxx.herokuapp.com/static/rest_framework/css/bootstrap.min.css' \
-XGET \
-H 'Referer: https://xxx.herokuapp.com/users/login' \
-H 'Accept: text/css,*/*;q=0.1' \
-H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0.2 Safari/604.4.7'

Possible duplicate of [Django staticfiles not found on Heroku (with whitenoise)](https://stackoverflow.com/questions/35507140/django-staticfiles-not-found-on-heroku-with-whitenoise) — lmiguelvargasf, Dec 09 '18 at 07:20

score 7 · Answer 1 · edited Aug 24 '19 at 13:37

I've spent some hours before I was able to figure out this. @VipinMohan solution works for whitenoise<4. However, in version 4+, WhiteNoise removes some options which were deprecated in the previous major release. For the record, I am using Django 2.1.

From the docs:

The WhiteNoise middleware should be placed directly after the Django SecurityMiddleware (if you are using it) and before all other middleware.

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

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
     # the next line of code is the one that solved my problems
    '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'
]

Pay attention to the Note in the section of the provided link.

You might find other third-party middleware that suggests it should be given highest priority at the top of the middleware list. Unless you understand exactly what is happening you should ignore this advice and always place WhiteNoiseMiddleware above other middleware.

score 6 · Accepted Answer · answered Jan 06 '18 at 14:45

Django does not support serving static files in production. However, the fantastic WhiteNoise project can integrate into your Django application, and was designed with exactly this purpose in mind.

pip install whitenoise

add whitenoise to your requirements.txt add this code in app/wsgi.py

from whitenoise.django import DjangoWhiteNoise
application = DjangoWhiteNoise(application)

score 1 · Answer 3 · answered Oct 29 '20 at 14:50

1

Add collectstatic to Procfile

web: python manage.py collectstatic --no-input; gunicorn myapp.wsgi --log-file - --log-level debug

Thanks to this stack overflow answer

answered Oct 29 '20 at 14:50

Ali Akbar Afridi

676
7
7

score 1 · Answer 4 · answered Jan 08 '21 at 01:40

1

WhiteNoise configuration should be changed if you use v4.0 or later. Please refer this whitenoise-changelog

answered Jan 08 '21 at 01:40

Wise Invoker

51
4

Heroku Django app not loading static files (404 Not Found)

4 Answers4