This is the article on the 11th day of the Advent calendar.

Introduction

Weekend / midnight Pythonista. I'm a person who messes around with pandas, numpy, and scipy when compiling data at work. I often stumbled upon static files when using Django as a hobby, so I'd like to summarize the stumbling points and solutions for "people who don't understand what they don't understand." I would appreciate it if you could point out any mistakes.

~~ Because the Official Document is extremely kind when it's crazy If you read it carefully, understand it, and move your hand as it is, you will surely understand it. ~~

Q1: What is a static file is in the first place?

Static file? : thinking: What is a file that doesn't work ...?

A1: Let's know how the Web works. **

~~ Let's read the official document ~~ Roughly speaking, it's CSS, JS, etc. A file that is provided to the client side without any modification from the server to the dynamic content generated by Django.

How the web server works: MDN Reference

The term static file itself seems to be Django's own phrase (?), But I think it's easy to understand if you understand how web applications work.

If you don't understand this (your past self), let's study how the Web works.

Manage static files (images, JavaScript, CSS, etc.)¶ Websites usually need to deliver additional files such as images, JavaScript, and CSS. Django calls these files "static files." To make it easier to manage your static files, Django provides django.contrib.staticfiles. (Django official documentation)

It is properly written in the official document. .. ..

Q2: Where is the correct answer after all?

The tutorial that comes with the official Django documentation, the DjangoGirlsTutorial (the famous Django tutorial), introduces you to dig a static directory into your app.

Create a static directory inside the polls directory. Django looks for static files from there.

(Django official documentation)

Since polls above is the app name, we are instructing you to create a directory within the app.

Where should the static files be placed in the project? Django knows where to look for static files with its built-in "admin" app. All we have to do is add a static file for the blog app.

For that, create a folder called static in the blog app

djangogirls ├── blog │ ├── migrations │ ├── static │ └── templates └── mysite (DjangoGirlsTutorial)

This also creates a directory in the app.

On the other hand, best practices recommend placing a static folder directly under the project.

A2: Either one is fine

This is because even when creating a static directory in an application, the namespace is usually used with the following configuration. (* I will introduce the bad case when not using the namespace in the extra edition) To put it bluntly, it's hard to see personally if it's scattered, so it's a good idea to follow best practices. Avoid using it together.

(app name) 
　┣static
     └ (app name)
           ┣css
           ┣js

Q3: Problem that production environment css does not hit

I believe it's a static file that breaks the hearts of anyone trying to deploy a Django app. .. ..

A3: Let's review the settings of the web server

I think that the Web server side is often responsible for providing static files in the production environment. Are static files organized in one place? Make sure that the delivery settings are correct.

On the Django side, all you have to be careful about is whether you have static files in one place. The command to combine static files in one place is python manage.py collect static.

When you hit this command, the static files visible from django.contrib.staticfiles under development will be collected in the STATIC_ROOT set in settings.py.

Moreover, if there is already a file with the same name, it will check the time stamp and save a new one! Doing this will make it easier to configure things like Nginx.

The official document around this collectstatic command has not been translated into Japanese and remains in English, which may be a part of the diagonal reading of the official document. .. ..

Extra: Static file collisions

When creating a static directory in your app, be careful of static file name conflicts. If Django has static files with the same name, only the one that gets caught first will be served.

If you have a static file with the same name, as shown below, Django doesn't know which static file to serve. In this case, you'll be guessing the ** first ** css found by saticfiles.

`project_root/app1/static/main.css`


h1{
  color: blue;
}

`project_root/app2/static/main.css`


h1{
  color: red;
}

So even if you try to call main.css in each template as below ...

`project_root/app1/templates/app1.html`


{% load static %}
<link rel="stylesheet" href="{% static "main.css" %}">
{% static "main.css" %}　 <!--For debugging-->
<h1>App1.html<h1>

`project_root/app2/templates/app2.html`


{% load static %}
<link rel="stylesheet" href="{% static "main.css" %}">
{% static "main.css" %}　　<!--For debugging-->
<h1>App2.html<h1>

As you can see, only one CSS is hit. I wanted App1 to have blue text and App2 had red text, but both turned blue.

In such a case, hit the findstatic command. You can use this command to find out the search order for Django.

$ python manage.py findstatic main.css
Found 'main.css' here:
  C:\Users\Cuz\Desktop\Projects\static_files_sample\app1\static\main.css
  C:\Users\Cuz\Desktop\Projects\static_files_sample\app2\static\main.css

At this time, you can see that the css of app1 above hits and the css of app2 does not hit.

This is also described in the Official Documents

Summary

Read the official documentation! let's read! No, read it! That's all. .. .. If you read it again, it will be written in very small detail, so it is recommended that you read it carefully from corner to corner.

(I didn't have enough time to deploy media files ... I'll write it systematically next year!)

Tomorrow is @ skd_nw's "The story of the library used in development"! Thank you!

Don't read the official docs until I understand Django's static files