Issue with static files when deploying Django app to Heroku

Question

My project folder looks this:

├── Procfile
├── core
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-39.pyc
│   │   └── views.cpython-39.pyc
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── db.sqlite3
├── inspirationSources.txt
├── manage.py
├── package-lock.json
├── package.json
├── react-frontend
│   ├── README.md
│   ├── build
│   │   ├── asset-manifest.json
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── logo192.png
│   │   ├── logo512.png
│   │   ├── manifest.json
│   │   ├── robots.txt
│   │   └── static
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── logo192.png
│   │   ├── logo512.png
│   │   ├── manifest.json
│   │   └── robots.txt
│   └── src
│       ├── App.css
│       ├── App.js
│       ├── App.test.js
│       ├── assets
│       ├── components
│       ├── hooks
│       ├── index.css
│       └── index.js
├── requirements.txt
├── spotify
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-39.pyc
│   │   ├── admin.cpython-39.pyc
│   │   ├── apps.cpython-39.pyc
│   │   ├── cluster.cpython-39.pyc
│   │   ├── credentials.cpython-39.pyc
│   │   ├── models.cpython-39.pyc
│   │   ├── urls.cpython-39.pyc
│   │   ├── util.cpython-39.pyc
│   │   └── views.cpython-39.pyc
│   ├── admin.py
│   ├── apps.py
│   ├── cluster.py
│   ├── credentials.py
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── __init__.py
│   │   └── __pycache__
│   ├── models.py
│   ├── templates
│   ├── tests.py
│   ├── urls.py
│   ├── util.py
│   └── views.py
├── spotifycluster
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-39.pyc
│   │   ├── settings.cpython-39.pyc
│   │   ├── urls.cpython-39.pyc
│   │   └── wsgi.cpython-39.pyc
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── tutorialSources.txt

When I deploy with git push heroku main it seems to be fine but when I open the app in browser using the complementary url, I get the following errors on screen (debug mode is on):

TemplateDoesNotExist at /
build/index.html
Request Method: GET
Request URL:    https://nameless-taiga-02413.herokuapp.com/
Django Version: 3.1.7
Exception Type: TemplateDoesNotExist
Exception Value:    
build/index.html
Exception Location: /app/.heroku/python/lib/python3.9/site-packages/django/template/loader.py, line 19, in get_template
Python Executable:  /app/.heroku/python/bin/python
Python Version: 3.9.4
Python Path:    
['/app/.heroku/python/bin',
 '/app',
 '/app/.heroku/python/lib/python39.zip',
 '/app/.heroku/python/lib/python3.9',
 '/app/.heroku/python/lib/python3.9/lib-dynload',
 '/app/.heroku/python/lib/python3.9/site-packages']
Server time:    Fri, 30 Apr 2021 10:08:26 +0000
Template-loader postmortem
Django tried loading these templates, in this order:

Using engine django:

django.template.loaders.filesystem.Loader: /app/react-frontend/build/index.html (Source does not exist)
django.template.loaders.app_directories.Loader: /app/.heroku/python/lib/python3.9/site-packages/django/contrib/admin/templates/build/index.html (Source does not exist)
django.template.loaders.app_directories.Loader: /app/.heroku/python/lib/python3.9/site-packages/django/contrib/auth/templates/build/index.html (Source does not exist)

I have the following settings in my settings.py

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

Also I have whitenoise in my middleware list

MIDDLEWARE = [
    'whitenoise.middleware.WhiteNoiseMiddleware',
    ...]

The templates section in settings.py looks as follows

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'react-frontend')],
        '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',
            ],
        },
    },
]

I expected that Heroku would be able to find the static folder based on the STATIC_DIRS variable but that doesn't seem to be the case. Any clue what's going on here?

score 1 · Answer 1 · answered Apr 30 '21 at 14:19

So actually it was a really stupid mistake. react-frontend was a broken submodule and I needed to fix that by making sure .git/config didn't have submodules and removing react-frontend from the cache (No submodule mapping found in .gitmodules for path and missing .gitmodules file). Commit and pushed again and it worked...

Ankit Tiwari · Answer 2 · 2022-08-22T11:54:52.433

0

if your DEBUG is set to False Django din't handle STATIC FILES. Heroku provide some configuration to serve STATIC FILES

STEP-1 : install whitenoise

$ pip install whitenoise

STEP-2 : check in settings.py whitenoise middleware by default it available in MIDDLEWARE if it's not that add it.

MIDDLEWARE = (
    'whitenoise.middleware.WhiteNoiseMiddleware',
    ...)

STEP-3: add this in your settings.py

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

edited Aug 22 '22 at 11:54

answered Apr 30 '21 at 10:28

Ankit Tiwari

4,438
4
14
41

I have whitenoise.middleware.WhiteNoiseMiddleware in MIDDLEWARE = [] along with my other middleware. Does it matter if I use MIDDLEWARE or MIDDLEWARE_CLASSES? – DSteman Apr 30 '21 at 10:34
my bad `MIDDLEWARE_CLASSES` used in older version of `Django` check i edited my answer. – Ankit Tiwari Apr 30 '21 at 10:36
for `wsgi` configuration you can check official Doc. http://whitenoise.evans.io/en/legacy-2.x/django.html#enable-whitenoise – Ankit Tiwari Apr 30 '21 at 10:37
"Your WhiteNoise configuration is incompatible with WhiteNoise v4.0" more info is on http://whitenoise.evans.io/en/stable/changelog.html#v4-0 It suggests that I should not manipulate wsgi.py like you suggest – DSteman Apr 30 '21 at 10:39
than try without manipulation. if it works than good – Ankit Tiwari Apr 30 '21 at 10:44
I already had the whitenoise middleware so I already tried that and unfortunately I got the same error... Just tried it again to be sure – DSteman Apr 30 '21 at 10:57
you have error of `TemplateDoesNotExist at /` means you have returned a template in your `views` but it does not exists check for that template first – Ankit Tiwari Apr 30 '21 at 11:04
inside `build` folder check whether `index.html` is there or not. – Ankit Tiwari Apr 30 '21 at 11:06
Yes it is, like you can see in the file tree in my question. Also, the app runs fine when I run heroku local. – DSteman Apr 30 '21 at 11:09
than can you share me how you configured your template in `settings.py` – Ankit Tiwari Apr 30 '21 at 11:13
I added that to the question as well. – DSteman Apr 30 '21 at 11:17
1

Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231782/discussion-between-ankit-tiwari-and-dsteman). – Ankit Tiwari Apr 30 '21 at 11:19

Issue with static files when deploying Django app to Heroku

2 Answers2