Using Django Static Files and Templates: Django Tutorial Part 2

Continuing our tutorial with Django static files and templates

Django is made up of a few core components that we touched on in the last Django tutorial: Django Models make up the structure and behavior of data in a Django project, Django Views process incoming requests and provide responses, and Django Templates are populated with data and then rendered to the browser from the view response.

This tutorial we’ll touch on how to use Django Templates and the Django Staticfiles app to add logical structure to any Django project you’re working on.

(View What is Django? A Quick Django Tutorial Part 1 here)

Where we left off last time, and what’s next

For this tutorial, I will be using Django 2.1.7 and Python 3.6.7. You can access the code from this tutorial on Kite’s github repository.

In the last Django tutorial, we created a basic Django project that, when hit from a browser, returns a random Scene for Improv friends to act out. The scenes are returned from a constants file, through a Template view. Our project looks like it is right out of 1983 but it works!

Now that we’ve gotten a taste of what Django can do, let’s dig deeper and use some more of Django’s built-in fun. In this part of the tutorial, we’ll:

Take a deeper look at what Templates can do
Configure our staticfiles settings so that any HTML and CSS files we add to the product are handled appropriately by Django
Add Twitter Bootstrap to our project

As a reminder, the User Story we are working from is:

“As Improv party-goers, we want to get randomized scenes so we can act them out.”

Here’s what our project looked like after we finished the last tutorial:

Django staticfiles app

Configure staticfiles app in the project settings file

Before we get to any of the project’s frontend design, we need to change the default Django settings so that the `django.contrib.staticfiles` has the proper paths for where we want static files to live and be served from. Static files are what any CSS, JavaScript, and template files are called in Django.

Configuring the staticfiles app in Django gives us a couple things; Django will be able to collect static files from wherever they are in your project, including in apps that you install, into one location so that Django can then serve those files to the browser as they are requested. In addition to that, Django knows how to evaluate references to those paths within your templates, so in your templates, you can write {% static '/some/path' %} and that will work both in development and in production. This is because Django keeps track of where ‘static’ points to in the system even after static files are collected.

To configure the Django staticfiles app, we need to add STATICFILES_DIRS to our settings file. STATICFILES_DIRS is a `list` of all the places in which you have staticfiles. We just have one place, so we’ll just put that one place in the list. The directories in STATICFILES_DIRS must exist before collectstatic is run, as Django won’t create them for you. Then you need STATIC_ROOT which tells Django where to put the files after collection. This directory is created by Django based on the name you assign here, so you don’t have to create it beforehand.

Running Collectstatic for the first time

Running the collectstatic command shows that 140 files were collected – but we don’t have any static files in our static directory! The good news is that Django has templates and CSS built in for Django Admin, which we have installed in INSTALLED_APPS, by default.

Those files also have to be collected in order to be served by the web server. This isn’t specific to Django’s apps in our INSTALLED_APPS, as any apps you have installed in your Django project will have their static files collected by collectstatic.

Now that staticfiles is configured, we can add some CSS and JavaScript to our project to make it pretty and dynamic.

Bootstrap

My favorite way to quickly make a site look acceptable – or even great – is by using Bootstrap.

Bootstrap is arguably the internet’s most popular front-end framework. It provides a look and feel for a website, broken down into interface components. Each component has styles and optional JavaScript, which make the components act a certain way in the browser. You can check Bootstrap out here to learn more. For this tutorial though, we’re just going to install it as-is and leave it uncustomized.

You can download Bootstrap here which includes all the necessary CSS and JavaScript.