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_host. I used {% load static from staticfiles %} to load static files. I exactly write the settings sugested by Heroku doc :

BASE_DIR = os.path.dirname(os.path.dirname(__file__))
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))

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

STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, 'static'),
)

STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'

BUT I got an error 500. And got this traceback (by mail)

...
`cache_name = self.clean_name(self.hashed_name(name))
 File "/app/.heroku/python/lib/python3.5/site-    packages/django/contrib/staticfiles/storage.py", line 94, in hashed_name (clean_name, self))
...
ValueError: The file ‘app/css/font.css’ could not be found with <whitenoise.django.GzipManifestStaticFilesStorage object at 0x7febf600a7f0>.`

When I run heroku run python manage.py collectstatic --noinput All seems ok :

276 static files copied to '/app/annuaire/staticfiles', 276 post-processed.

Does anyone have an idea to help me, please ?

Thanks

EDIT :

annuaire
|-- /annuaire
|-- -- /settings.py
|-- /app
|-- -- /static/...`

wsgi.py

from django.core.wsgi import get_wsgi_application
from whitenoise.django import DjangoWhiteNoise


application = get_wsgi_application()
application = DjangoWhiteNoise(application)

Answer 1

With DEBUG=False, what originals use to work does not work for me anymore.

However a fix by enabling whitenoise on MIDDLEWARE in settings.py solved it. Best to be just below SecurityMiddleware.

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware', # add this line
    #Other middleware...
]

```

According to the docs, it actually needs to be enabled in the first place.

Answer 2

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 3

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 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 BASE_DIR you need to a double dirname if your settings are not in the root but in /projectname/ folder :

settings.py

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)
STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
# for /static/root/favicon.ico    
WHITENOISE_ROOT = os.path.join(BASE_DIR, 'staticfiles', 'root') 

template.html

{%  load staticfiles %}
<link rel="stylesheet" href="{%  static "app/css/font.css" %}">

app tree for this example:

annuaire
|-- /annuaire
|-- -- /settings.py
|-- /app
|-- /static/app/css/font.css

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.

Answer 7

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 8

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 9

$ pip install whitenoise

add whitenoise in middleware.

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    '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',
    'whitenoise.middleware.WhiteNoiseMiddleware',
]

also need to add STATIC_ROOT in setting.py

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

and add media_root in urls.py

from django.conf import settings

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \
        + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

and then you can run collectstatic command locally or on server python manage.py collectstatic

and it will work properly. you can run this command locally collectstatic and it will work on server.

Answer 10

this is worked for me

my requirements.txt is

whitenoise==6.2.0
static3==0.7.0
webdav4==0.9.7
Django==3.2
# others

I delete STATIC_ROOT in settings.py

and add var STATICFILES_DIRS, my 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',
]

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

STATIC_URL = 'static/'

if you set heroku config:set DISABLE_COLLECTSTATIC=1, now you should run properly

if you still want use COLLECTSTATIC function add it manually in Procfile file as:

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

my my_blog.wsgifile is(it's configed by following a post which cannot be found now):

import os
from django.core.wsgi import get_wsgi_application
from dj_static import Cling

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'my_blog.settings')
application = Cling(get_wsgi_application())