We Keep Coding

Django is not able to find static files

I've started a new Django project and run into issue at the very begining.
I have created a "core" app and inside I have prepared a simple html page using bootstrap.
Instead of using CDN I have downloaded bootstrap files and put it under static directory.
The problem is Django can't find those static files.
I am using the latest version of Django
>>> django.VERSION
(3, 2, 5, 'final', 0)
Snippet from my base.html file:
{% load static %}
<!-- Bootstrap core CSS -->
<link href="{% static 'assets/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'headers.css' %}" rel="stylesheet">
settings.py
STATIC_URL = '/static/'
STATICFILES_DIR = [
BASE_DIR / 'static'
]
and my directory structure:
.
├── apps
│   └── core
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   ├── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── core
│   │   ├── base.html
│   │   └── index.html
│   ├── tests.py
│   └── views.py
├── db.sqlite3
├── manage.py
├── ref_manager
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── static
│   ├── assets
│   │   └── bootstrap
│   │   ├── css
| | | ...
│   │   │   ├── bootstrap.css
│   │   │   ├── bootstrap.css.map
│   │   │   ├── bootstrap.min.css
│   │   │   ├── bootstrap.min.css.map
│   │   └── js
│   │   ├── bootstrap.bundle.js
│   │   ├── bootstrap.bundle.js.map
│   │   ├── bootstrap.bundle.min.js
│   │   ├── bootstrap.bundle.min.js.map
│   │   ├── bootstrap.esm.js
│   │   ├── bootstrap.esm.js.map
│   │   ├── bootstrap.esm.min.js
│   │   ├── bootstrap.esm.min.js.map
│   │   ├── bootstrap.js
│   │   ├── bootstrap.js.map
│   │   ├── bootstrap.min.js
│   │   └── bootstrap.min.js.map
│   └── headers.css

For your development environment, in your urls.py:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

You need staticfiles application in your settings:
INSTALLED_APPS = [
...
'django.contrib.staticfiles',
...
]
Set STATIC_URL, and STATICFILES_DIRS if you have static folder outside app directories.
This work fine in development mode:
python manage.py runserver
In operational environment, static files are copied into STATIC_ROOT by:
manage.py collectstatics
Then you can add to your urlpatterns
static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Static files will be served by django, but it is better to serve static files directly with your web server.

Try it in your settings.py file:
import os
STATIC_URL = "/static/"
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]
Please fix indentation error, if any

In settings.py file change below code -
STATICFILES_DIRS = [
(BASE_DIR / "static"),
]
This works for me.

Django Not Applying CSS File From App on 404 Page

Django 3.0.8
Python 3.7.x
I've got a Django project with a few apps. I'm trying to make some 'default' error pages for like 400, 403, 404, 500 errors. I've done that and the appropriate templates display - but without any styling or JS.
In the 404 error page, I'm trying to link to the CSS from one of the apps so the correct styling gets applied - but in the console, I see this error:
Refused to apply style from 'http://127.0.0.1:8000/static/launcher/dist/css/launcher.css' because of its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
The file exists there, however.
That particular CSS file lives in two places: in the app directory and it also lives in the STATIC_ROOT because I ran the python manage.py collectstatic command.
The STATIC_URL is set to /static/
The CSS file is located at:
project_dir/launcher/static/launcher/dist/css/launcher.css
project_dir/static/launcher/dist/css/launcher.css
My 404 template lives at:
project_dir/templates/404.html
My link to the CSS looks like this:
<link rel="stylesheet" type="text/css" href="{% static 'launcher/dist/css/launcher.css' %}" />
My project URL's look like this:
urlpatterns = [
path("admin/", admin.site.urls),
path("", include("launcher.urls")),
path("app2/", include("app2.urls")),
path("app3/", include("app3.urls")),
path(
"robots.txt",
TemplateView.as_view(
template_name="robots.txt", content_type="text/plain"
),
),
path(
"favicon.ico",
RedirectView.as_view(
url=staticfiles_storage.url("favicon.ico"), permanent=False
),
name="favicon",
),
]
urlpatterns += static(
settings.MEDIA_URL, document_root=settings.MEDIA_ROOT
)
urlpatterns += static(
settings.STATIC_URL, document_root=settings.STATIC_ROOT
)
I've tried a lot of different solutions (like getting rid of comments in the CSS or changing the type in the HTML link) but nothing has worked thus far.
What is the best way to accomplish this?
EDIT TO ADD: My 404.html page looks like this:
{% extends 'error_base.html' %}
{% load static %}
{% block css_imports %}
<link rel="stylesheet" type="text/css" href="{% static 'launcher/dist/css/launcher.css' %}" />
{% endblock %}
{% block script_imports %}
<script src="{% static 'launcher/dist/js/vendors~main.f11c6fb90f8f72673956.js' %}"></script>
<script src="{% static 'launcher/dist/js/main.dce999efa12cf745c86d.js' %}"></script>
{% endblock %}
{% block content %}
<h1>Whoops!</h1>
404
<h3>We are having some issue finding that particular item.</h3>
<p>If you feel this was due to an error - please contact us!
</p>
{% endblock %}
The JS files give 404 errors as well, but I figure once I find out the cause of the CSS issues, I can figure out the JS issues as well. The 'error_base.html' file is essentially a boilerplate HTML file with the appropriate blocks in the appropriate spots for the blocks listed in the 404.html page.
ADDITIONAL EDIT TO ADD :
My static files settings look like this:
# Static files (CSS, JavaScript, Images)
STATIC_URL = "/static/"
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'launcher/static/'),
os.path.join(BASE_DIR, 'app1/static/'),
os.path.join(BASE_DIR, 'app2/static/'),
]
# Media files
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
EDIT TO ADD: Tree structure looks like this:
├── README.md
├── project_dir
│   ├── __init__.py
│   ├── context_processors.py
│   ├── settings.py
│   ├── unit-test-settings.py
│   ├── urls.py
│   ├── utils.py
│   └── wsgi.py
├── geckodriver.log
├── app_1
├── static
│   └── app_1
│   ├── dist
│   │   ├── css
│   │   │   └── app_1.css
│   │   └── js
│   │   ├── main.f3eaca15a899d1a9d4e4.js
│   │   └── vendors~main.48489b4c92919034fc8f.js
│   ├── fa-grav.png
│   ├── grav.png
│   ├── grav_30.png
│   └── src
│   ├── css
│   │   └── style.css
│   ├── html
│   │   └── webpack_bundles.html
│   ├── js
│   │   ├── index.js
│   │   └── indellis_form.js
│   └── scss
│   └── app_1.scss
└─ ....other standard app files
├── app_2
├── static
│   └── app_2
│   ├── dist
│   │   ├── css
│   │   │   └── app_2.css
│   │   └── js
│   │   ├── main.cedd2abecaa899d1a9d4e4.js
│   │   └── vendors~main.48325ceds92919034fc8f.js
│   ├── fa-grav.png
│   ├── grav.png
│   ├── grav_30.png
│   └── src
│   ├── css
│   │   └── style.css
│   ├── html
│   │   └── webpack_bundles.html
│   ├── js
│   │   ├── index.js
│   │   └── registration_form.js
│   └── scss
│   └── app_2.scss
└─ ....other standard app files
├── launcher
│   ├── static
│   │   └── launcher
│   │   ├── dist
│   │   │   ├── css
│   │   │   │   └── launcher.css
│   │   │   └── js
│   │   │   ├── main.75ef788b0aea38c3c71b.js
│   │   │   └── vendors~main.d806da1f66faa822a6ef.js
│   │   └── src
│   │   ├── css
│   │   │   └── style.css
│   │   ├── html
│   │   │   └── webpack_bundles.html
│   │   ├── js
│   │   │   └── index.js
│   │   └── scss
│   │   └── launcher.scss
└─ ....other standard app files
├── manage.py
├── pyproject.toml
├── pytest.ini
├── requirements.txt
├── setup.cfg
├── static
│   ├── app_1
│   │   ├── dist
│   │   │   ├── css
│   │   │   │   └── app_1.css
│   │   │   └── js
│   │   │   ├── main.f3eaca15a899d1a9d4e4.js
│   │   │   └── vendors~main.48489b4c92919034fc8f.js
│   │   ├── fa-grav.png
│   │   ├── grav.png
│   │   ├── grav_30.png
│   │   └── src
│   │   ├── css
│   │   │   └── style.css
│   │   ├── html
│   │   │   └── webpack_bundles.html
│   │   ├── js
│   │   │   ├── index.js
│   │   │   └── indellis_form.js
│   │   └── scss
│   │   └── app_1.scss
│   ├── project_dir
│   │   ├── favicon.ico
│   │   ├── icons
│   │   │   ├── android-chrome-144x144.png
│   │   │   ├── apple-touch-icon-120x120-precomposed.png
│   │   │   ├── apple-touch-icon-120x120.png
│   │   │   ├── apple-touch-icon-152x152-precomposed.png
│   │   │   ├── apple-touch-icon-152x152.png
│   │   │   ├── apple-touch-icon-180x180-precomposed.png
│   │   │   ├── apple-touch-icon-180x180.png
│   │   │   ├── apple-touch-icon-60x60-precomposed.png
│   │   │   ├── apple-touch-icon-60x60.png
│   │   │   ├── apple-touch-icon-76x76-precomposed.png
│   │   │   ├── apple-touch-icon-76x76.png
│   │   │   ├── apple-touch-icon-precomposed.png
│   │   │   ├── apple-touch-icon.png
│   │   │   ├── browserconfig.xml
│   │   │   ├── favicon-16x16.png
│   │   │   ├── favicon-32x32.png
│   │   │   ├── mstile-144x144.png
│   │   │   ├── mstile-150x150.png
│   │   │   ├── safari-pinned-tab.svg
│   │   │   └── site.webmanifest
│   │   └── proj_icon.ico
│   ├── launcher
│   │   ├── dist
│   │   │   ├── css
│   │   │   │   └── launcher.css
│   │   │   └── js
│   │   │   ├── main.75ef788b0aea38c3c71b.js
│   │   │   └── vendors~main.d806da1f66faa822a6ef.js
│   │   └── src
│   │   ├── css
│   │   │   └── style.css
│   │   ├── html
│   │   │   └── webpack_bundles.html
│   │   ├── js
│   │   │   └── index.js
│   │   └── scss
│   │   └── launcher.scss
│   ├── app_2
│   │   ├── dist
│   │   │   ├── css
│   │   │   │   └── app_2.css
│   │   │   └── js
│   │   │   ├── main.cedd2abecaa899d1a9d4e4.js
│   │   │   └── vendors~main.48325ceds92919034fc8f.js
│   │   ├── fa-pdf.png
│   │   ├── id_card_30.png
│   │   ├── rc-u.png
│   │   ├── rg.png
│   │   └── src
│   │   ├── css
│   │   │   └── style.css
│   │   ├── html
│   │   │   └── webpack_bundles.html
│   │   ├── js
│   │   │   └── index.js
│   │   └── scss
│   │   └── app_2.scss
├── templates
│   ├── 400.html
│   ├── 403.html
│   ├── 404.html
│   ├── 500.html
│   ├── base.html
│   ├── error_base.html
│   └── robots.txt

TLDR:
If you want to serve static files with DEBUG=False using a local development server, you need to use the --insecure flag:
python manage.py runserver --insecure
Why you get the error:
Every time you render html in your browser, behind the scenes a request is made to fetch each of your static files. So in your case, the 404.html template is telling your browser to fetch http://127.0.0.1:8000/static/launcher/dist/css/launcher.css. If your django server doesn't know where that file is, it will respond with the 404.html template instead of the css, which has a MIME type of text/html, and not text/css, hence your error.
Why django can't find the css files:
If you look at the source code for the static function that you call in your urls.py, it looks something like this:
from django.conf.urls.static import static
def static(...):
if not settings.DEBUG:
return []
return [
re_path(...)
]
Which means that the re_path that is used to render static files, is no longer there, since you set DEBUG=False to test your 404.html template...
Credit to Dmitry Shevchenko for the shortcut.

This usually means the page can't find your css file and is trying to load your not found page which is html.
Try using a full absolute path for the link on your error page and see if that works:
<link rel="stylesheet" type="text/css" href="/static/launcher/dist/css/launcher.css"/>
If that works, then I would next check to make sure the static variable Django is replacing is actually set correctly at runtime. I suspect the path is slightly off.
If that doesn't work, try the full absolute path to the css file in your app folder instead of STATIC_ROOT:
<link rel="stylesheet" type="text/css" href="/launcher/static/launcher/dist/css/launcher.css"/>
If that works and the first one didn't, then I would suspect a problem somewhere in the configuration/translation when your files get collected to STATIC_ROOT. I'm not familiar with the process so I'm not sure exactly what get's moved where and what metadata gets changed, if any. I'd imagine none does, but the only way to be sure is to try it out.
Update:
It looks like your STATICFILES_DIRS are not pointing to the end folders the css files are actually in. Complete those paths and it may work (add dist/static... etc.)

I would have write a comment but i can't, due to reputation, because i am new. You should try to access the link (http://127.0.0.1:8000/static/launcher/dist/css/launcher.css) in your browser! If the css file doesn't open the path is the problem.
Another possible cause is a comment at the beginning of the css file.

Django suddenly can't load static files anymore

I have a django project for which suddenly (after updating PyCharm) the staticfiles can't be loaded anymore. This is the project structure:
├── _quanttool
│   ├── _quanttool
│   │   ├── __init__.py
│   │   ├── asgi.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── _static
│   │   ├── css
│   │   ├── img
│   │   ├── js
│   │   ├── scss
│   │   └── vendor
│   ├── _templates
│   │   ├── base
│   │   ├── funds_tool
│   │   └── transaction_list
│   ├── funds_tool
.
.
.
│   ├── db.sqlite3
│   └── manage.py
├── venv
├── .gitignore
└── README.md
In the settings.py file i have configured:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/_static/'
STATIC_ROOT = '_static'
STATICFILES_LOCATION = [os.path.join(BASE_DIR, '_static')]
In the base HTML Template I have set {% load static %} and <link href="{% static 'css/sb-admin-2.min.css' %}" rel="stylesheet">
I really don't understand why I suddenly get the errors:
"GET /_static/css/sb-admin-2.css HTTP/1.1" 404 1682" ...
Any idea why Django can't find the staticfiles anymore?
Best

comment out STATIC_ROOT = '_static' and add the below code to your settings.py file.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/_static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, '_static'),)
If still not work then run this command on terminal
$ python manage.py collectstatic

Openshift Find Static Files From Django App

I am trying to add a css file to my django application which I am deploying on openshift. Currently, I am able to have the css file work when running locally with debug and all that. However, when I deploy my application to openshift, the css file does not have any effect. Many of the other questions online seem to be referring to old versions of django and openshift (lots of references to a wsgi folder that doesn't seem to be standard anymore and triggering collectstatic manually)
My understanding with the current django/openshift relationship is that I do not need to do collecstatic manually as I am using the django-ex template from openshift, and during the build process the collectstatic command is run automatically, the ouput of which I can see in the logs. Notably, I can see that my style.css file for my application gets copied into STATIC_ROOT in that log.
My project structure from my project root is thus:
.
├── db.sqlite3
├── djangoWrapper
│   ├── __init__.py
│   ├── settings.py
│   ├── templates
│   │   └── djangoWrapper
│   │   └── index.html
│   ├── urls.py
│   ├── views.py
│   └── wsgi.py
├── gitlab-ci.yml
├── ldap
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── __init__.py
│   ├── migrations
│   ├── models.py
│   ├── static
│   │   └── ldap
│   │   └── style.css
│   ├── templates
│   │   └── ldap
│   │   ├── apiOffline.html
│   │   ├── index.html
│   │   ├── results.html
│   │   └── search.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── manage.py
├── openshift
├── README.md
├── requirements.txt
Here's what I am doing in my settings.py:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "ldap", "static"),]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
In my html files, I am then trying to load the css file with
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'ldap/style.css' %}">
in the <head> section.
I have attempted to do some debugging here because it would be assumed that the problem before I got to deployment was that my static files were not being put in the correct place/djgano couldn't find them. So I put some prints into my app and deployed it on openshift and got back the following info:
BASE_DIR: /opt/app-root/src
STATIC_ROOT: /opt/app-root/src/static
STATIC_URL: /static/
APP_VIEW_DIR: /opt/app-root/src/ldap/views.py
as well putting <p>"{%static 'ldap/style.css' %}"</p> into an html file, which displays as /static/ldap/style.css
From these tidbits, I know that the root directory for openshift is /opt/app-root/src/, that my static files are in /opt/app-root/src/static, and that my html is looking for the css file in /static/ldap/style.css. This seems like it should be working then as all of those directories line up. Is there something else about serving static files with django/openshift that I am missing here?

Finally got it working! I did use whitenoise, following the steps here.

Handle dynamic staticfiles path with Django

I'm almost overcoming to finish my Theme Selector with Django but I'm blocking on one point :
==> I don't arrive to get a dynamic staticfiles path according to the form result given by user.
I will explain the process :
User fills a Django form by checking a RadioSelect box. He has a choice between two options :
Datasystems
Cameroun
Both options correspond to 2 themes which have two differents background-colors. Datasystems is blue & white and Cameroun is green & red.
So, I pick up the form result corresponding to one of both theme which are situated in static files :
|--- app1
|--- app2
├── static
│   └── Theme
│   ├── Cameroun
│   │   ├── css
│   │   │   ├── Base.css
│   │   │   ├── Base_Accueil.css
│   │   │   ├── Base_Birthcertificate.css
│   │   │   ├── Base_Configurations.css
│   │   │   ├── Base_Identity.css
│   │   │   ├── Base_Mairie.css
│   │   │   ├── Base_Recensement.css
│   │   │   └── Base_Table.css
│   │   └── images
│   │   ├── admin.png
│   │   ├── chantier.jpeg
│   │   ├── chantier.png
│   │   ├── employe?\201.png
│   │   ├── logo.png
│   │   ├── maire.png
│   │   ├── officier.png
│   │   ├── stats.jpeg
│   │   └── visiteur.png
│   └── Datasystems
│   ├── css
│   │   ├── Base.css
│   │   ├── Base_Accueil.css
│   │   ├── Base_Birthcertificate.css
│   │   ├── Base_Configurations.css
│   │   ├── Base_Identity.css
│   │   ├── Base_Mairie.css
│   │   ├── Base_Recensement.css
│   │   └── Base_Table.css
│   └── images
│   ├── admin.png
│   ├── chantier.jpeg
│   ├── chantier.png
│   ├── employe?\201.png
│   ├── logo.png
│   ├── maire.png
│   ├── officier.png
│   ├── stats.jpeg
│   └── visiteur.png
In my settings.py file, I have the static path like this :
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "/Etat_civil/static/Theme/"),)
I'm using templates_tag but I'm not sure if my function could be write like this :
from django import template
from Configurations.models import Theme
register = template.Library()
def GetTheme(Theme):
mytheme = Theme.objects.all().last()
return mytheme in Theme.objects.all()
In my templates, I would like to write static path as a dynamic path depends on variable theme selected by user :
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
{% load user_tags %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% if mytheme == 'Datasystems' %}
<link rel="stylesheet" type="text/css" href="{% static 'Datasystems/css/Base_Accueil.css' %}"/>
{% elif mytheme == 'Cameroun' %}
<link rel="stylesheet" type="text/css" href="{% static 'Cameroun/css/Base_Accueil.css' %}"/>
{% endif %}
etc ....
I'm a bit lost. I think that my process could work pretty well but maybe something is not written as a pythonic way or something else.
I tried to be concise and specific.
Thank you by advance

You could use the get_static_prefix template tag to do this semi-manually:
<link rel="stylesheet" type="text/css" href="{% get_static_prefix %}{{ mytheme }}/css/Base_Accueil.css"/>

I found the solution based on different answers and I will explain what I've done. This solution works for me with Django 1.10 and use context_processors to do that.
First step : Modify settings.py file
I modified my settings.py file and more precisely TEMPLATES PART. For the moment, this modification is just for Accueil Application but I will extend this process to all applications :
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'debug' : DEBUG,
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
'myapp.context_processors.context_processors_name_function'],
},
},
]
With the following example, the last line will be written like this :
# 'myapp.context_processors.context_processors_name_function'
'Accueil.context_processors.GetTheme'
Second step : Create context_processors.py file in my application
I created this new file in my application part. As above, it will be extend to others applications :
from django.conf import settings
from Configurations.models import Theme
def GetTheme(request):
return {'mytheme' : Theme.objects.values_list('favorite_theme').last()[0].encode("ascii")}
Third step : Modify my Base.html for Accueil application
I have a base template which manage my Accueil application. I have to write header like this is I want to take account the context_processors variable :
<link rel="stylesheet" type="text/css" href="{% get_static_prefix %}{{ mytheme }}/css/Base_Accueil.css"/>
Through this way, I can pick up the last row from my Theme table and put the variable in {{ mytheme }}. Then, I created my good theme url. Now, Django will search all css file in the good repository.
From now, when I fill the formulary with a choice between two themes : Datasystems and Cameroun and validate my choice, the new theme is taken account and the global background-color change due to my theme choice !
Hopfully my answer will help others programmers !
Thank you for all :)