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.

Comments

  • It was hard to find your articles in google. I found it on 20 position, you have to
    build some quality backlinks , it will help
    you to get more visitors. I know how to help you, just search in google – k2
    seo tricks

    NevilleJuly 28, 2014
  • Thank you so much buddy, i had to go through a zillion articled and forums to get this done!
    :)
    Thanks once again

    MonishMarch 16, 2015
    • I’m glad to hear that it helped.

      Shamim HasnathMarch 17, 2015
  • Thanks a lot. I searched for two days for a solution to load static files under PyCharm and Django. Only your solution works.
    Thanks a again!

    Turtle QiuJuly 30, 2015
    • You’re welcome!

      Shamim HasnathAugust 11, 2015
  • This article was incredibly helpful! Some of the conventions you’re relying on are showing up as deprecated when I ‘runserver’ in 1.9, but following your clearly documented steps helped me solve a problem that was driving me nuts!

    Thank you!

    miceDecember 16, 2015

Leave a Reply