What are static files?

Files used for making beautiful user interface, interactive user experience and functional web pages are called static files. They do not change when a application is running. They aren’t dynamically generated by Python web server. Most common static-files in a typical web application  are the following types:

  • CSS (Cascading Style Sheets)
  • JavaScript
  • Images

Static files are important for a Django project because the modern web requires more than dynamically generated HTML markup. Let’s see how to configure an application to serve static files. After that we will work with some examples.

Configuration

Django has a default application to work with static files; the django.contrib.staticfiles . Django includes it in INSTALLED_APPS when we create a project by running startproject command.

We will create a static directory at the root of our project which will hold our static files. Though the staticfiles app will look for static directories within each of the Django apps, but to keep things simple we will put all in the same directory.

static folder structure

To connect this 'static' folder with our project we will have to mention STATICFILES_DIRS   location in our settings.py file. This setting tells django to look for static files static directory within each app.

# project/settings.py

STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]

Note: Django 3.1 has moved from using the os library to pathlib and no longer imports os by default. If you’re using Django 3.1, then you need to either add import os above or convert the "DIRS" entry to use pathlib instead.

Then we will set STATIC_URL path prefix that Django will use when it serves a static file.

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

This line tells Django to append static to the base url (in our case 127.0.0.1:8000) when searching for static files. With  STATIC_URL set, we can access our  style.css  from 127.0.01:8000/static/css/style.css .

There’s one more major setting that we need to set which is STATIC_ROOT. In deployment, Django wants to find all static files from a single directory for efficiency.

Once we set STATIC_ROOT, Django will have the desired output location for static files.I happen to set my STATIC_ROOT to a staticfiles directory.

STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
STATIC_URL = '/static/'

Load static in templates:

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
</head>

<body>
  <h1>Example of static template tag!</h1>

<script>
 <link rel="stylesheet" type="text/css" href="{% static "js/main.js" %}">
</script>
</body>
</html>

{% load static %} is used to load the static template tag.This is how static files are served in a django project.

+ posts

Author | Python-Django Developer

+ posts

Full-stack Developer (Python | Django | React | React-Native | Angular | Vue)