Serving static files (CSS, js, images) in Django, the best way

The Problem:

Django tells us to arrange app specific static files in development environment, that is, we are supposed to create a folder named static inside every app folder of INSTALLED_APPS and keep the static files needed for that app inside that folder. But is it really practical? I mean who the hell would put bootstrap or jquery inside every app other than creating a common folder which all the apps will share!

Solution:

consider the file structure here,

── TestProject
    ├── manage.py
    ├── TestProject
    │   ├── __init__.py
    │   ├── settings.py
    │   ├── urls.py
    │   ├── wsgi.py
    ├── testsite
    │   ├── __init__.py
    │   ├── models.py
    │   ├── tests.py
    │   └── views.py
    ├── static
    │   ├── css
    │   │   ├── bootstrap.min.css
    │   ├── font
    │   │   ├── fontawesome-webfont-0.eot
    │   ├── img
    │   │   ├── glyphicons-halflings.png
    │   │   ├── glyphicons-halflings-red.png │   
    │   │   └── uploadify-cancel.png
    │   ├── __init__.py
    │   ├── js
    │   │   ├── bootstrap.min.js
    │   │   ├── jquery-1.9.1.min.js
    │   └── mystyle.css

First, in your settings.py file do the following:

Add these lines:

import os
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, '../static')

and set STATIC_URL = ‘/static/’ if it’s not already set.

now comment out or remove django.contrib.staticfiles ^[1] from INSTALLED_APPS

now search for TEMPLATE_CONTEXT_PROCESSORS in settings.py , if you can’t find it add following lines in settings.py

TEMPLATE_CONTEXT_PROCESSORS = (
            'django.core.context_processors.static',
)

but if you can find it just add django.core.context_processors.static inside that tuple if it’s not already there. ^[2]

that’s all you need to change in settings.py.

but wait you’re not done yet…
go to urls.py and add the following line after import statements

from <project_name>.settings import STATIC_ROOT

change according to your project, it should be the container folder name of settings.py

then at the end of the file add:^[3]

urlpatterns += patterns('',
    url(r'^static/(.*)$', 'django.views.static.serve', {'document_root': STATIC_ROOT, 'show_indexes' : True}),
)

that’s all you need to do. now you can use {{ STATIC_URL }} in your template files like this:

<link href="{{ STATIC_URL }}css/bootstrap-responsive.min.css" rel="stylesheet">

You can also check if this process works by going to http://localhost:8000/static/ you should see all the contents inside you static folder. if not try adjusting/changing STATIC_ROOT

Notes

_{1. If you don’t add django.core.context_processors.static in TEMPLATE_CONTEXT_PROCESSORS you won’t get {{ STATIC_URL }} in your template files}

_{2. If you keep this Django will still look for static files inside static directory of each app in INSTALLED_APPS}

_{3. This will enable you to access our new directory for static files. we’ve specified our directory in STATIC_ROOT
keep ‘show_indexes’ : True , it’ll let you see the directory contents which our STATIC_URL currently points to, it can help you to configure STATIC_ROOT correctly.}