Django staticfiles not found on Heroku (with whitenoise)

Question

This question seems to be asked several time but I can not fix it.

I deployed a django app on production with DEBUG = False. I set my allowed_hos

Answer 1

I got it. I needed to add

python manage.py collectstatic --noinput;

in my Procfile. Heroku doc said that collecticstatic is automatically triggered. https://devcenter.heroku.com/articles/django-assets

Thanks

Answer 2

I have had the same issue. The simplest way to find the problem is to use

heroku run ls staticfiles/images

if images is in the directory where your files should be. This will give you a list of all the files in that directory.

As I found out it was a case issue in the file extension. The file had an extension .JPG and I referenced it on the template with an extension .jpg

Answer 3

I struggled a couple of hours until I finally figured out the problem. The main problem in my opinion is that in the Heroku official documentation they use the Old-style middleware that uses MIDDLEWARE_CLASSES which is deprecated, instead of the new MIDDLEWARE setting.

In whitenoise version 4+, the WSGI integration option for Django (which involved editing wsgi.py) has been removed. Instead, you should add WhiteNoise to your middleware list in settings.py and remove any reference to WhiteNoise from wsgi.py. (from the docs)

The following configuration worked like a charm:

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

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

]

Pay attention to the following Note, also from the docs.

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.

Answer 4

The problem is that the Python application in Heroku uses the built-in web server and does not serve static files.

You can use the app of the whitenoise, this working solution is 100%.

Suppose you have already generated static files, for example:

$ python manage.py collectstatic

Next you need to do this:

1) $ pip install whitenoise

2) add string "whitenoise==3.3.0" in your requirements.txt

3) add code in settings.py

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

4) add this code in app/wsgi.py

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

Answer 5

For me following worked.

settings.py

DEBUG = True

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') #this is not used
# Add static folder to STATIC_DIRS
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

urls.py

from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [

] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Note

This helper function works only in debug mode and only if the given prefix is local (e.g. /static/) and not a URL (e.g. http://static.example.com/).

Also this helper function only serves the actual STATIC_ROOT folder; it doesn’t perform static files discovery like django.contrib.staticfiles.

Answer 6

In addition to above answers, it can also be that you have not specified a correct STATIC_ROOT as described in https://docs.djangoproject.com/en/2.0/howto/static-files/#deployment

For me, the solution was adding this to the end of my production settings.py

STATIC_ROOT = "/app/static/"

To know where your static folder is in your heroku run this

heroku run python manage.py collectstatic

Then you will see the path being shown there.