Managing Static Files (e.g. images, JavaScript, CSS) in Django

When trying five times to no avail, it’s the time to dive deep into the documentation and get a systematic understanding of the problem.

That’s why I need to dive into managing static files eg. images, javascript and css files in Django.

  1. Django provides Django rovides django.contrib.staticfiles to help manage static files.
  2. In setting.py file, set
STATIC_URL = '/static/'

3. in the template(html), follow the below format

{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image">

4. make sure static files are Stored in a folder called static in your app. For example my_app/static/my_app/example.jpg. If there are static files that are not tied to a specific app, then you can define a list of directories (STATICFILES_DIRS) in your settings file where Django will also look for static files. For example:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    '/var/www/static/',
]

When you run “python manage.py collectstatic”, you tell Django to go through all your project folders, look for all static files and store them in one place (the static root we defined in the settings). This is very efficient especially if you are deploying your site to production.

When you run the command collectstatic, you should see a new folder called staticfiles created in the root of your project folder. You can change this location to something else by editing the static root setting in your project’s settings.py file. To use these staticfiles, in your templates you will say load staticfiles instead of load static. Everything else is the same as with using the previous static folder (cited from https://scotch.io/tutorials/working-with-django-templates-static-files)

5. During development, you can serve user-uploaded media files from MEDIA_ROOT using the django.views.static.serve() view. This is not suitable for production use! For some common deployment strategies, see Deploying static files.

For example, if your MEDIA_URL is defined as /media/, you can do this by adding the following snippet to your urls.py:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # ... the rest of your URLconf goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Summary of the above knowledge explains what I’ve been put into application but not certain of the rule behind it:

in Setting.py

STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
django_heroku.settings(locals())


On the remote server side either Heroku or our own platform, stated by Heroku that it could be a bit tricky but setting the settings.py as above should make all work out smoothly. I suspect my issue – python manage.py collectstatic –noinput failed – and direction to disable by typing

heroku config:set DISABLE_COLLECTSTATIC=1

is due to “Django won’t automatically create the target directory (STATIC_ROOT) that collectstatic uses, if it isn’t available. You may need to create this directory in your codebase, so it will be available when collectstatic is run. Git does not support empty file directories, so you will have to create a file inside that directory as well.”

Whitenoise is useful to support serving static files in production. Middleware_Classes in the setting.py need to insert a line to make it work

MIDDLEWARE_CLASSES = (
    # Simplified static file serving.
    # https://warehouse.python.org/project/whitenoise/
    'whitenoise.middleware.WhiteNoiseMiddleware',
    ...

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.