Static files not working with Django, Heroku, and Django Sass Processor

Question

I can't seem to get static files to work when deploying to Heroku. I get 404s for all css and js files.

Things I'm using:

• Django 2.1.5
• whitenoise 4.1.2
• django-sass-processor 0.7.2
• django-webpack-loader 0.6.0

Here are my settings:

Whitenoise is in the middleware

MIDDLEWARE = [
'django.middleware.gzip.GZipMiddleware',
'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'
]

All of the static file settings:

STATIC_URL = '/static/'

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

STATICFILES_DIRS = [
    STATIC_SOURCE_ROOT
]

STATICFILES_STORAGE = 'whitenoise.storage.CompressedStaticFilesStorage'

STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'sass_processor.finders.CssFinder'
]

# Ensure STATIC_ROOT exists.
os.makedirs(STATIC_ROOT, exist_ok=True)

"""
Django Sass Processor
https://github.com/jrief/django-sass-processor

Template Usage:
{% load sass_tags %}

<link href="{% sass_src 'myapp/css/mystyle.scss' %}" rel="stylesheet" type="text/css" />
"""

SASS_PROCESSOR_INCLUDE_DIRS = [
    os.path.join(STATIC_SOURCE_ROOT, 'scss/')
]

SASS_PROCESSOR_ROOT = STATIC_ROOT
SASS_PROCESSOR_ENABLED = False

# Django Webpack Loader
# https://github.com/owais/django-webpack-loader

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json')
    }
}

DEBUG = False

When I go to deploy I follow these steps:

1. Run yarn run build Which builds the js (I'm using React so there is babel and such) and places it into 'static/dist/' - which gets committed to git

2. Deploy to Heroku

   • I have collectstatic disabled on heroku so it doesn't get called automatically on deploy

3. Run on Heroku: heroku run python manage.py compilescss

   • Which I believe should compile the scss into css and places the css files next to the scss files in 'static/'

4. Run on Heroku: heroku run python manage.py collectstatic --ignore=*.scss

   • Which I believe should copy everything (except .scss) from 'static/' to 'staticfiles/'. This should be all of the compiled css files and the compiled js.

I've played with a lot of settings but nothing seems to work, the css and js get a 404.

Any ideas?

Answer 1

I haven't used this exact set of tools before, but I think you'll have better luck if you approach things this way:

1. Make sure your application is configured to run two buildpacks. heroku/nodejs should run first and heroku/python should run second.

   Since you're manually running yarn now I suspect that this is already done. yarn isn't included in the Python buildpack.

2. Add a heroku-postbuild script to your package.json that runs yarn build. This should cause your React code to get built during deployment after your Node.js dependencies have been installed.

3. Re-enable Heroku's automatic collectstatic by running heroku config:unset DISABLE_COLLECTSTATIC. I don't think you actually need to ignore the .scss files.

You might also want to take a look at django-heroku, a Django library from Heroku that helps set up deployment on their platform. It's officially recommended and may well help resolve your HTTP 404 issues.