Home / Questions / 4110
Accepted
toledano
Asked: 2020-02-13 08:45:39 +0800 CST 2020-02-13 08:45:39 +0800 CST

How to serve static files from an application?

  • 772

I'm developing an app using Django 1.9.2 and Python 3.5.1 , but I'm running into a problem trying to configure the project and adjust the frontend theme .

The static files of the theme are inside the application, but the module django.contrib.staticfilesin charge of serving the static files cannot find them.

Setting

This is the static file configuration part. The app coreis where the settings are and provides common elements. The application jitis the one I am developing.

from unipath import Path

STATIC_URL = '/static/'
STATIC_ROOT = PROJECT_DIR.child("assets")
STATICFILES_DIRS = (
    'jit/assets',
)

INSTALLED_APPS += [
    'django.contrib.staticfiles',
    'core',
    'jit'
]

This is the structure of the directories

src
├── assets
│   ├── css
│   ├── fonts
│   └── js
├── bower_components
├── core
├── data
├── jit
│   ├── assets
│   │   ├── css
│   │   ├── fonts
│   │   └── js
│   ├── migrations
│   └── templates
├── node_modules
└── tema
    └── sass

URL patterns

This is the URL search pattern file urls.py:

from django.conf import settings
from django.conf.urls.static import static, url
from jit import views

urlpatterns = [
    url(r'^$', views.home),
]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

the view

The view couldn't be easier.

from django.shortcuts import render

def home(request):
    return render(request, 'jit/index.html')

Template

The template is also very simple:

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Justo a Tiempo</title>
    <link rel="stylesheet" href="{% static 'jit/css/jit.css' %}">
  </head>
  <body>

    <script src="{% static 'jit/js/jit.js' %}"></script>
  </body>
</html>

The error

The error appears when I use {% static 'jit/css/jit.css' %}because it doesn't appear when I use {% static 'css/jit.css' %}. The files exist in both directories.

Page not found (404)
Request Method: GET
Request URL:    http://localhost:8000/static/jit/css/jit.css
Raised by:  django.contrib.staticfiles.views.serve
'jit/css/jit.css' could not be found
You're seeing this error because you have DEBUG = True in your Django settings file. Change that to False, and Django will display a standard 404 page.

I'm pretty sure this setup works on my work computer, where I use Python 3.4. In any case, I'd appreciate it if you'd let me see my mistake.

python

1 Answers

  1. Best Answer

    Ok, let's go by parts:

    STATIC_ROOT = PROJECT_DIR.child("assets")

    The folder STATIC_ROOTwill contain the files that will be copied when you go to production and run the command collectstatic. You don't need to create this folder structure in assets:

    src
├── assets
│   ├── css
│   ├── fonts
│   └── js

    This is automatically created by Django when you run the collectstatic. The folder doesn't even need to be inside the project, you can pass it a path like:

    STATIC_ROOT = '/var/www/static/'

    Well, that with respect to the static ones in production. Now regarding STATICFILES_DIRS:

    STATICFILES_DIRS = (
    'jit/assets',
)

    All these folders tell Djando where to look for the static files (it is also used by the command collectstatic), so according to your structure:

    src
├── ...
├── jit
│   ├── assets
│   │   ├── css
│   │   ├── fonts
│   │   └── js
│   ├── migrations
│   └── templates
├── ...

    You would only have access to the following routes:

    • jit/assets/css
    • jit/assets/fonts
    • jit/assets/js

    In the template, respectively this is how to use:

    • {% static 'css/foo.css' %}
    • {% static 'fonts/foo.woff2' %}
    • {% static 'js/foo.js' %}

    As you can see, there is no option to {% static 'jit/css/jit.css' %}since that folder does not exist jit/assets/jit. If the Gulp process puts them in another route just add or change it:

    STATICFILES_DIRS = (
    'jit/assets/jit',
)

    In order to have access to:

    • jit/assets/jit/css
    • jit/assets/jit/fonts
    • jit/assets/jit/js
    • 2