How do I serve CSS to Django in development?

Question

I've been all through the documentation, and it just doesn't make sense to me. I ran collectstatic, I set up /static/ directories in both my app and my project directories, I added STATIC_URL and STATIC_ROOT to my settings.py file (but I have no idea how to know if they're set correctly) and {{ STATIC_URL }} still isn't rendering out to anything. It all seems like a heck of a lot of overkill just to connect html to css.

I think I'm lost in the details; could anyone supply a high-level breakdown of this static files idea? I'm afraid I may have mixed instructions for both production and development setups.

MORE: Here's the relevant bit from my settings.py file:

INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',
    # Uncomment the next line to enable the admin:
    'django.contrib.admin',
    # Uncomment the next line to enable admin documentation:
    # 'django.contrib.admindocs',
    'django.contrib.staticfiles',
    'dashboard.base',
)

TEMPLATE_CONTEXT_PROCESSORS = (
    'django.core.context_processors.debug',
    'django.core.context_processors.i18n',
    'django.core.context_processors.media',
    'django.core.context_processors.static',
    'django.contrib.auth.context_processors.auth',
    'django.contrib.messages.context_processors.messages',
)

STATIC_ROOT = ''
STATIC_URL = '/static/'


STATICFILES_DIRS = (
    'C:/Users/Sean/Desktop/Work Items/dashboard/base/static/',
)

And this is the code I'm trying to use in my template:

<link rel="stylesheet" href="{{ STATIC_URL }}css/960.css" />

OK. I made the changes everybody recommended. Here's my new urls.py:

from django.conf.urls.defaults import *
from base.views import show_project
from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns

# Uncomment the next two lines to enable the admin:
from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('',
# Example:
# (r'^dashboard/', include('dashboard.foo.urls')),

# Uncomment the admin/doc line below to enable admin documentation:
# (r'^admin/doc/', include('django.contrib.admindocs.urls')),

# Uncomment the next line to enable the admin:
(r'^admin/', include(admin.site.urls)),
('^show_project/$', show_project),
)

if settings.DEBUG:
    urlpatterns += patterns('',
        url(r'^media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT, 'show_indexes': True }),
        url(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT, 'show_indexes': True }))

urlpatterns += staticfiles_urlpatterns()

Am I missing something? Usually my problems turn out to be something really basic that CS pros take for granted but I miss.

Answer 1

Here's how mine is setup. It sounds like you might be missing the static context processor?

STATIC_ROOT and STATIC_URL

In the settings.py used in development:

STATIC_ROOT = ''
STATIC_URL = '/static/'

And the settings.py used on my production server:

STATIC_URL = '//static.MYDOMAIN.com/'
STATIC_ROOT = '/home/USER/public_html/static.MYDOMAIN.com/'

So, all the static files are located in static/. On the production server, all these files in static/ are collected to /home/USER/public_html/static.MYDOMAIN.com/ where they are served by a different web server (nginx in my case) and not Django. In other words, my django application (running on Apache) never even receives requests for static assets in production.

CONTEXT PROCESSOR

In order for templates to have the STATIC_URL variable available to them, you need to use the django.core.context_processors.static context processor, also defined in settings.py:

TEMPLATE_CONTEXT_PROCESSORS = (
    # other context processors....
    'django.core.context_processors.static',
    # other context processors....
)

SERVER STATIC ASSETS IN DEVELOPMENT

Django doesn't get requests for static assets in production, however, in development we just let Django serve our static content. We use staticfiles_urlpatterns in urls.py to tell Django to serve requests for static/*.

from django.contrib.staticfiles.urls import staticfiles_urlpatterns
# .... your url patterns are here ...
urlpatterns += staticfiles_urlpatterns()

Answer 2

Have a look at Serving static files in development. You need to define the STATIC_URL and STATICFILES_DIRS to let django.contrib.staticfiles know where to look for files.

Answer 3

The idea behind the static files idea is that you can distribute your development related media file (css/js etc.) on a per-app basis, and allow the static files application to manage and collect all these resources from their various places.

So you tell the static files app where to look for static files (by settings STATICFILES_DIRS), where to copy to them (STATIC_ROOT) and what path to access them (STATIC_URL). When you run collectstatic, it search through the directories and copies all the files it finds into the static root.

The benefit of this is that you can manage your static files on a finer leve:

project/app1/static/css/ # These are css/js for a particular app
project/app2/static/css/
project/app3/static/css/
project/static/css # These might be general css/js for the whole project
static/ # This is where the collectstatic command will copy files to

and after you collectstatic them you will have:

project/app1/static/css/
project/app2/static/css/
project/app3/static/css/
project/static/css

static/app1/css/
static/app2/css/
static/app3/css/
static/css/

When you put your app/site on a production server, you let the webserver (apache, nginx) deal with serving the files by telling it to serve media files at /static/ or /media/ directly, while passing all other requests to the application. When developing though, it's easier to let the development server do this for you.

To do this, you have explicitly tell is server any request for media under /static/ (your STATIC_URL). In your urls.py, put the following (or similar)

from django.conf import settings
...
if settings.DEBUG:
    urlpatterns += patterns('',
        url(r'^media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT, 'show_indexes': True }),
        url(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT, 'show_indexes': True }))