404 error for static files in console with Django and Heroku

Question

I am able to run collectstatic fine when I push to Heroku. The problem now is I that I'm not sure how to reference them when they're stored on the server.

For example for my stylesheets I get a 404 error: <link rel="stylesheet" type="text/css" href="/static/bower_components/bootstrap-material-design/dist/css/material.css" />

This is the URL in the console that is causing the 404:GET https://tixblast-membership.herokuapp.com/static/bower_components/bootstrap-material-design/dist/css/material.css net::ERR_ABORTED 404 (Not Found)

What part of my settings to I alter to make sure I look in the right place? I ran heroku run python manage.py findstatic --verbosity 2 css/styles.css to show where it was looking for static files and it returned: /app/.heroku/python/lib/python3.7/site-packages/django/contrib/admin/static /app/.heroku/python/lib/python3.7/site-packages/rest_framework/static

So do I need to include one of the above directories in my settings?

I assumed that after I got collectstatic working I'd be fine, here is my settings.py:

"""
Django settings for thinkster_django_angular_boilerplate project.

For more information on this file, see
https://docs.djangoproject.com/en/1.7/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.7/ref/settings/
"""

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import os
import django_heroku

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


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.7/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = *****

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = os.environ.get('DEBUG', True)

TEMPLATE_DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'authentication'
)

MIDDLEWARE_CLASSES = (
    'whitenoise.middleware.WhiteNoiseMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
)

ROOT_URLCONF = 'thinkster_django_angular_boilerplate.urls'

WSGI_APPLICATION = 'thinkster_django_angular_boilerplate.wsgi.application'


# Database
# https://docs.djangoproject.com/en/1.7/ref/settings/#databases

import dj_database_url

DATABASES = {
    'default': dj_database_url.config(
        default='sqlite:///' + os.path.join(BASE_DIR, 'db.sqlite3')
    )
}

# Internationalization
# https://docs.djangoproject.com/en/1.7/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.7/howto/static-files/

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

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

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

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    #'compressor.finders.CompressorFinder',
)

COMPRESS_ENABLED = os.environ.get('COMPRESS_ENABLED', False)

TEMPLATE_DIRS = (
    os.path.join(BASE_DIR, 'static'),

)

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.SessionAuthentication',
    )
}

# Honor the 'X-Forwarded-Proto' header for request.is_secure()
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')

# Allow all host headers
ALLOWED_HOSTS = ['*']
AUTH_USER_MODEL = 'authentication.Account'

django_heroku.settings(locals())

edit:

My stylesheet:

{% load staticfiles %}


<link rel="stylesheet" type="text/css" href="{% static 'bower_components/bootstrap/dist/css/bootstrap.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'bower_components/bootstrap-material-design/dist/css/material.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'bower_components/bootstrap-material-design/dist/css/ripples.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'bower_components/ngDialog/css/ngDialog.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'bower_components/ngDialog/css/ngDialog-theme-default.css' %}" />

<link rel="stylesheet" type="text/css" href="{% static 'lib/snackbarjs/snackbar.min.css' %}" />

<link rel="stylesheet" type="text/css" href="{% static 'stylesheets/styles.css' %}" />

edit2:

file structure where my app is located, its in the same folder as my settings.py. Which is the only way heroku would notice it:

└───static ├───bower_components │ ├───angular │ ├───angular-cookies │ ├───angular-route │ ├───bootstrap │ │ ├───dist │ │ │ ├───css │ │ │ ├───fonts │ │ │ └───js │ │ ├───fonts │ │ ├───grunt │ │ ├───js │ │ ├───less │ │ │ └───mixins │ │ └───nuget │ ├───bootstrap-material-design │ │ ├───dist │ │ │ ├───css │ │ │ ├───fonts │ │ │ └───js │ │ ├───fonts │ │ ├───less │ │ ├───sass │ │ └───scripts │ ├───jquery │ │ ├───dist │ │ └───src │ │ ├───ajax │ │ │ └───var │ │ ├───attributes │ │ ├───core │ │ │ └───var │ │ ├───css │ │ │ └───var │ │ ├───data │ │ │ └───var │ │ ├───effects │ │ ├───event │ │ ├───exports │ │ ├───manipulation │ │ │ └───var │ │ ├───queue │ │ ├───sizzle │ │ │ └───dist │ │ ├───traversing │ │ │ └───var │ │ └───var │ ├───ngDialog │ │ ├───css │ │ └───js │ └───underscore ├───javascripts │ └───authentication │ ├───controllers │ │ └───New folder │ └───services └───lib └───snackbarjs

edit 3:

This is where django is looking for the templates according to the error screen:

Using engine django:

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

You don't seem to have followed the very clear instructions on configuring static files with Heroku — Daniel Roseman
– Daniel Roseman, Commented Dec 19, 2018 at 21:27
How so? I defined BASE_DIR, STATIC_ROOT, STATIC_URL and STATICFILES_DIRS as well as installed whitenoise — Amon
– Amon, Commented Dec 19, 2018 at 21:37

score 1 · Accepted Answer · 2018-12-19 23:10:41Z

1

Going off what works for me, try deleting STATICFILES_FINDERS setting. I don't think this is necessary for serving static with whitenoise. In any case I don't use it. Also, instead of MIDDLEWARE_CLASSES I just have MIDDLEWARE. Other than those minor changes I would just say try running your app with Debug=False on your local server and see if you run into problems.

Try changing your BASE_DIR setting to:

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

edited Dec 19, 2018 at 23:10

answered Dec 19, 2018 at 22:28

user9727749

Sign up to request clarification or add additional context in comments.

11 Comments

Amon Over a year ago

thanks for the suggestion, when I remove STATICFILES_FINDER it seems that nothing appears on my page. None of the files that contain the links to the static files I mean. So maybe the problem lies in there

user9727749 Over a year ago

@CharlesSmith - To clarify, do you mean that once you remove this setting your page reverts to plain html with no styling? Can you please post your project folder and where your static is located inside of it?

Amon Over a year ago

When I remove that setting nothing appears, the page is just white lol. No files are loaded either from what I see in the console. And sure Ill do that

user9727749 Over a year ago

@CharlesSmith - I think it has to do with how you specified your BASE_DIR. Did you change it to what I put in my answer, and now you're getting templatedoesnotexisterror? Does your templates folder live in the same folder as your static?

user9727749 Over a year ago

@CharlesSmith - Can you post your full project folder from the folder your project lives in all the way down to the static and template folders. Also post the error you are getting. I might be able to notice something. Got to run out and do something, but I'll take a look when I get back.

|

Cesar Canassa · Accepted Answer · 2018-12-19 20:50:35Z

0

You should not hardcode static files URLs in your template when using static-files Django app instead, try the following in order to set up the static-files properly.

Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS.
In your settings file, define STATIC_URL

example:

STATIC_URL = '/static/'

In your templates, use the static template tag to build the URL for the given relative path using the configured STATICFILES_STORAGE:

{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image">

answered Dec 19, 2018 at 20:50

Cesar Canassa

20.5k13 gold badges68 silver badges70 bronze badges

1 Comment

Amon Over a year ago

I actually am using the tags already, I updated my question with my stylesheets

Amon · Accepted Answer · 2018-12-20 17:35:35Z

0

I fixed it, I added the NodeJS buildback to Heroku. That installed the bower_components in the right folder. I'm using Python and Angular so I had the buildpack for the former but not the latter.

answered Dec 20, 2018 at 17:35

Amon

2,9817 gold badges35 silver badges61 bronze badges

Collectives™ on Stack Overflow

404 error for static files in console with Django and Heroku

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related