Static files loading in production but not development

Question

Usually I have this issue exactly the other way around!

In my development environment my Django app will not load some of my static files, specifically ones that I have added myself: that is, the two packages I've added to my app (admin and ckeditor) are both loading up fine, but two of the folders I've created and linked myself (img and css) are not being found. Here's a map of my directory:

root
 |-- blog    (this is the name of my app)
 |-- mysite  (name of my site)
      |-- settings.py
      |-- urls.py
 |-- media
 |-- static
      |-- admin
      |-- ckeditor
      |-- css
      |-- img

As stated, ckeditor and admin load fine while the others do not. Here's an example from the runserver output in debug mode (the file at static/css/base.css exists in my file tree):

GET /static/ckeditor/ckeditor/ckeditor.js HTTP/1.1" 200 690627
GET /static/admin/css/fonts.css HTTP/1.1" 200 423
GET /static/admin/css/widgets.css HTTP/1.1" 200 10340
GET /static/css/base.css HTTP/1.1" 404 1761
GET /static/img/brand.png HTTP/1.1" 404 1764

Here's some other information which may be of interest:

• It works fine in production! I assumed this was because I had dedicated aliases in my apache config, but that doesn't explain why admin and ckeditor work.
• I have routed media in much the same way (see the settings file below) and that works fine in development.
• I am using the template tag {% load static %} as instructed by the Django docs. In older versions I used {% load staticfiles %} and I've tried that too.
• I have run collectstatic in both environments.
• Running with DEBUG=False works fine in production (all the static files load) but no static files load at all when DEBUG=False in development. This is to be expected though, since in development I don't have a web server to handle this (to clarify, I usually run the server in debug mode, but have tried turning this setting off and on to see what changes occur)

In an effort to help anyone debug my problem, here are some relevant excerpts files:

settings.py

DEBUG = True
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
    'ckeditor',
    'ckeditor_uploader',
]
...
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('', include('blog.urls')),
    path('admin/', admin.site.urls),
    path('ckeditor', include('ckeditor_uploader.urls')),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Answer 1

This is an easy approach for handling static files in django (that works out of the box if you use Django default options):

1. Don't ever put anything yourself into the folder you specify as STATIC_ROOT.
2. Put static files specific to an app into the folder static inside the app.
3. For static files that do not directly belong to an app, create the folder static_files within your project and add to your settings: STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static_files'),]. Obviously you can choose another name, static_files is just a suggestion.
4. For production run collectstatic so that Django collects your static files (from points 2. and 3.) and puts them into the folder you created in 1.

If you are in debugging mode you are done after step 3.

---

In your case, the problem was that you put static content into the STATIC_ROOT which is a folder Django wont look for content in debugging mode. admin and ckeditor work because they follow step 2., thus their static files actually come from the folder of the installed app and not from your static folder when in debugging mode.

---

So, here is how to fix your issue:

• do step 3. from above.
• move your folders img and css to the folder created in step 3.
• (optional) wipe your STATIC_ROOT folder.