Django: Not Found Static/admin/css

December 31, 2022 Post a Comment

I just deployed my first Django app on Heroku but I notice that it doesn't have any CSS like when I runserver on the local machine. I know there's something wrong with static files

Solution 1:

You also need to add the static directory to your urls.py file. Add the following:

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

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

Solution 2:

You shouldn't change BASE_DIR

In settings.py edit the value of STATIC_ROOT

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

And run collectstatic again

Solution 3:

I had the same problem and neither of the answers didn't work for me. In this way, I found this solution to deal with that:

I used STATICFILES_DIRS instead of STATIC_ROOT and also debug should be turned true:

BASE_DIR = os.path.dirname(os.path.dirname(__file__))
# STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]
DEBUG = True

If you are using a subfolder (i.e. front-end) for your static files you could use the following procedure:

from unipath import Path

BASE_DIR = Path(__file__).ancestor(2)
# STATIC_ROOT = os.path.join(BASE_DIR.child('front-end'), "static")
STATICFILES_DIRS = [
    os.path.join(BASE_DIR.child('front-end'), "static"),
]
DEBUG = True

[NOTE]:

Django 2.2
Python 3.6

Solution 4:

Django does not serve static files in production. Normally, To serve Django static files in production you need to setup a standalone server e.g. nginx.

However, the way to serve static files in Heroku is a little different. See the link below, provided by Heroku team, for details on how to serve static files in Heroku:
https://devcenter.heroku.com/articles/django-assets

EDIT: making the answer conform to stackoverflow guidelines:

as per the Heroku guidelines to serve static files:

add in settings.py:

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

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')
STATIC_URL = '/static/'

# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, 'static'),
)

then install WhiteNoise project with the following command:

$ pip install whitenoise

and in your wsgi.py:

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

    application = get_wsgi_application()
    application = DjangoWhiteNoise(application)

Solution 5:

A working solution as of today
Version:

Django==3.1.3
Python 3.6.9

settings that worked:

STATIC_URL = '/static/'
# STATIC_ROOT = os.path.join(BASE_DIR, "static")
# STATIC_DIR = os.path.join(BASE_DIR, "static")
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]
DEBUG = True

So please get rid of that STATIC_ROOT and STATIC_DIR and use STATICFILES_DIRS instead. Sadly this only works with DEBUG = True, meaning, it is is not meant for production. This static file issue is there from years with django and unfortunately django being so opiniated with their framework can't seem to provide us a working opinion on this which works out of the box in production and development environment.

Python Playground