Django Static Files
Using static files like JavaScript, CSS, images with Django
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:
JS files
CSS files
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 calledmedia
files in Django which we will talk in next tutorial
Configure static files settings
Make sure
django.contrib.staticfiles
is included onINSTALLED_APPS
In your
settings.py
file, addSTATIC_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 theSTATIC_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 whenDEBUG
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 somewsgi
orasgi
servers with some webservers likenginx
. 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:
Set
STATIC_ROOT
on settings.py(e.g: STATIC_ROOT='/home/static/')
Run
collectstatic
command(python manage.py collectstatic)