How to organize and load CSS within Django project/app?

Question

I'm new to Django. I read the Documentation and I am literally confused with media root files and static root files and where I should be placing my css files along with my javascript files.

Can you guys point me in the correct direction? Project setup:

Project
     -myapp
         -model,view,and test
     -template
         - base.html
         - index.html
         - view1
         - view2
         - media
             - css
                 - style.css
                 - ie.css
             - js
             - img

     -setting.py
     -url.py

What should my static_url, static_root, media_url , media_root, STATICFILES_DIRS and STATICFILES_FINDERS look like?

How I currently load my css file is through the base.html with the following:

{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static user_stylesheet %}"type="text/css" media="screen"/>

So what is the best and most efficient/correct way of managing my static files? Thank you everybody for your help. I appreciate your time and effort.

Answer 1

Static files are a simple process:

• Django will search for a directory named static/ inside any app that is in INSTALLED_APPS for static files. If you have files that are not tied to any app, you can put them in a separate directory. This directory should be added to STATICFILES_DIRS (a tuple) so django is aware of it. In your case you should have STATICFILES_DIRS = ('/home/user/Project/template/media',)

• Add django.contrib.staticfiles to your INSTALLED_APPS

Now, if you are testing this with runserver, open your urls.py and add from django.contrib.staticfiles.urls import staticfiles_urlpatterns to the top, and after all your URLs are defined, at the end of the file, add urlpatterns += staticfiles_urlpatterns()

You already have the correct method of accessing static files in your question. The other way is to use {{ STATIC_URL }}, and make sure you are sending your responses with RequestContext. If you are using class based views, you don't have to change anything. For your other normal view methods, just use the render shortcut.

---

STATIC_URL and STATIC_ROOT come in handy when you are deploying.

• STATIC_URL is the URL prefix that your web server has been configured with to point to the location in the system that has your static files. This is a url component and must end in a slash. For example /static/

• STATIC_ROOT this is a path to a directory on your system. When you are ready to deploy, run the collectstatic command and django will find all your static files and dump them in the directory pointed to by STATIC_ROOT. Then you can take this directory, put it in your DOCUMENT_ROOT folder that your web server is configured with. Then, point the /static/ URL to this folder. Example is STATIC_ROOT = /home/user/project/www/

If Apache is configured with a DOCUMENT_ROOT of /var/www/, and your STATIC_URL setting is /static/; after you run collectstatic, move the contents of the folder /home/user/project/www/ to /var/www/static/.

---

• STATICFILES_FINDERS. This setting lists methods that django can use to search for your static files when you run collectstatic, and you normally don't modify this at all.

---

• MEDIA_ROOT, MEDIA_URL. These settings control the file system location, and the URL prefix of any files that are uploaded using django; these cannot be the same as STATICFILES_DIRS. You need to handle this manually as collectstatic will not touch these locations. If you are testing file uploads in development, you can use django.views.static.serve() to serve files from MEDIA*.

Answer 2

I would suggest you to keep all your js and css files in a folder named, 'static' some where outside your application folder (that's how django recommends it) For example, if you keep it under /var/www/static/ So, in this case this is how your attributes would look like: STATIC_DIR = "/var/www/static/" STATIC_URL = "/static/" (Can be anything) STATICFILES_FINDERS = ('django.contrib.staticfiles.finders.FileSystemFinder',)

In the template you can refer the static folder using template tag {{STATIC_URL}} and append the rest of the path to the file from the static folder. Note, to use the {{STATIC_URL}} template tag you would need to pass the context_instance from the view code.

Answer 3

Media serving is Django is a "thing".

You can see the link to the docs here: https://docs.djangoproject.com/en/dev/howto/static-files/

But the magic bit is as follows ** IF THIS IS NOT IN PRODUCTION ** you probably need to add the following to the bottom of your urls.py:

from django.conf import settings

# ... the rest of your URLconf goes here ...

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

For the production server you serve media old school style by your webserver (apache or whatever), using the same domain but effectively completely independently of your Django/Python site.