Loading static files in django

Question

I'm just at my wits end here. I want to load my custom js files from the static folder. When I view the source on Chrome, it's not showing up and it's not being loaded when I refresh the page.

What it looks like on Chrome (and I can't click on my file, while the jQuery does light up):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
<script src="/static/js/ajax.js"/>

UPDATE: Here is what I have now, but it's still not working

base.html

{% load staticfiles %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
<script src="{% static 'js/ajax.js' %}"/>

settings.py

STATIC_ROOT = 'static/'
STATIC_URL = 'assets/'
STATICFILES_DIRS=(BASE_DIR, 'assets')

I ran python manage.py collectstatic and it copied a bunch of files over.

Here is a layout of the updated structure. You can see that the ajax.js was copied over but it's still not showing up when I run the server. Any ideas?

What am I missing?? Please help. Python 2.7, Django 1.7

Answer 1

Obligatory reading:

https://docs.djangoproject.com/en/1.7/howto/static-files/ https://docs.djangoproject.com/en/1.7/ref/contrib/staticfiles/ https://docs.djangoproject.com/en/1.7/ref/settings/#static-files

---

About these settings:

STATIC_URL = 'assets/'

This means that your app should serve static files with assets/{name} prefix.

I think this is the source of your problem - the initial / is missing and you're generating relative links for static resources, which sounds like a Bad Idea.

Now a page at http://yourserver/foo/bar/ would ask for static files via a relative link:
<img src="assets/{name}">, so your browser would look in /foo/bar/assets/{name} and find nothing.
You'd normally want an absolute link for static files, so instead you should use STATIC_URL = '/assets/' and obtain absolute links <img src="/assets/{name}">.

---

STATICFILES_DIRS=(BASE_DIR, 'assets')

Okay, so how does Django find the static files? A Django project can have many installed applications, and each application can have its own directory with static files.

So there's this setting (set by default):

STATICFILES_FINDERS = (
    "django.contrib.staticfiles.finders.FileSystemFinder",
    "django.contrib.staticfiles.finders.AppDirectoriesFinder")

This means that, on development setup (runserver), whenever someone asks for http://yourserver/assets/ponies/applejack.jpg (where /assets/ is your, now hopefully fixed, STATIC_URL), Django would try to find a file ponies/applejack.jpg in the following way:

• first by using FileSystemFinder that looks in some fixed directories you specify (STATICFILES_DIRS),
• second by using AppDirectoriesFinder that looks into the static/ subdirectory of each of your INSTALLED_APPS.

So if you want to keep your static files per-app, you don't need to rely on FileSystemFinder and you can leave STATICFILES_DIRS empty.

But if you want to keep all the static files in one place, point STATICFILES_DIRS to any directory like you did. You should still keep AppDirectoriesFinder for third party apps you use, like the Django Admin, that come with their own static files.

---

STATIC_ROOT = 'static/'

This is unnecessary for development setup with runserver because Django dev server serves your static files itself.

For production, however, you probably want your web server (Apache, Nginx, ...) or a content delivery network to handle the static file delivery for you. You can then use the collectstatic command to collect all the static files from everywhere (e.g. all static files your STATICFILES_FINDERS can find), and put them all in one directory on your machine, from where you can easily pass them on to Nginx or copy over to a CDN.

Answer 2

Do you have this in your settings?

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    # django.contrib.staticfiles.finders.DefaultStorageFinder',
)