Handle Static Files
Static files in your project, like stylesheets, JavaScripts, and images, are not handled automatically by Django when DEBUG = False.
When DEBUG = True, this worked fine, all we had to do was to put them in the static folder of the application.
When DEBUG = False, static files have to be collected and put in a specified folder before we can use it.
Collect Static Files
To collect all necessary static files for your project, start by specifying a STATIC_ROOT property in the settings.py file.
This specifies a folder where you want to collect your static files.
You can call the folder whatever you like, we will call it productionfiles:
.
.
STATIC_ROOT = BASE_DIR / 'productionfiles'
STATIC_URL = 'static/'
.
.
You could manually create this folder and collect and put all static files of your project into this folder, but Django has a command that do this for you:
python manage.py collectstatic
Which will produce this result:
128 static files copied to 'C:\Users\your_name\myworld\my_tennis_club\productionfiles'.
128 files? Why so many? Well this is because of the admin user interface, that comes built-in with Django. We want to keep this feature in production, and it comes with a whole bunch of files including stylesheets, fonts, images, and JavaScripts.
If you check in the filesystem on your computer, you will see that a new folder was created: productionfiles. This folder contains admin, with the static files for the admin UI, and the myfirst.css file you created in the Add Static Files chapter.
my_tennis_club
members/
my_tennis_club/
productionfiles/
admin/
myfirst.css
The Example Should Work
Now you have collected the static files of your project, and if you have installed WhiteNoise, the example from the Add Static Files chapter will finally work.
Start the server and see the result:
python manage.py runserver
And check out the result in your own browser: 127.0.0.1:8000/testing/.
Example
{% load static %}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="{% static 'myfirst.css' %}">
<body>
{% for x in fruits %}
<h1>{{ x }}</h1>
{% endfor %}
</body>
</html>
