Django Static Files

When we develop a web application we also need a way to use and serve static contents like (JS,CSS, and images ...)

In Django, any assets which are required for project development can be called static files. Some examples are:

1. JS files

2. CSS files

3. Logo and banners which i need to show on webpage

These static files are put in place by developers rather than the user, User uploaded files like (profile picture, CV) are called media files in Django which we will talk in next tutorial

Configure static files settings

• Make sure django.contrib.staticfiles is included on INSTALLED_APPS

• In your settings.py file, add STATIC_URL (e.g.: STATIC_URL = '/static/')

• Store your static files in folder called static inside your django app

Apart from storing static files inside django app's static folder, we can also provide Django with list of other directories as well. To do that, we need to configure STATICFILES_DIRS on our settings.py file

# settings.py
STATICFILES_DIRS = [
    BASE_DIR/"static", 
    "/data/django-project/static-images/",
    "/var/www/static-django/"
]

Linking static files on HTML Templates

Let's assume, logo.jpg exists in our app static folder (any app) Now, your HTML templates would look like,

{% load static %}

<img src="{% static 'logo.jpg' %}">

If you run this template through Django (creating views and URLs) and inspect the HTML source of your page, you will see <img src="{% static 'logo.jpg' %}" replaced by <img src="/static/logo.jpg">. the /static/ part that got appended in the URL is from the STATIC_URL settings we kept on our Django settings (settings.py)

Serving static files

We just linked our static file on the Templates, but we also need a way to serve those static files, e.g: when browsers requests to /static/logo.jpg then our Django server must send the logo.jpg as response.

• If we use django.contrib.staticfiles as explained above, python manage.py runserver command will automatically serve static files when DEBUG is set to True [ DEBUG=True on settings.py ]

So this means, we do not need to create a new URL or view to serve these static files, because Django does this for us

This way is not suitable for production, and on production environment we don't user runserver instead we use some wsgi or asgi servers with some webservers like nginx. We we see more about it on Django deployments series.

Static files Deployment (for production deployment only)

On production environment, since as discussed earlier we don't use Django built in static file serving mechanism, so we need a way to gather and collect all static files from all the static folders into one single folder, so that we can deploy this folder or serve content from this folder.

django.contrib.staticfiles provides a command for gathering static files from different applications of the project in a single directory so you can serve them easily. Steps:

1. Set STATIC_ROOT on settings.py (e.g: STATIC_ROOT='/home/static/')

2. Run collectstatic command (python manage.py collectstatic)