So I'm following this tutorial on serving staticfiles after collectstatic and after changing from {% load static %} to {% load staticfiles %}
AND adding
`
+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)` to urls.py
AND adding
`
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]`
to the url pattern it still is not loading the static files. I tried using findstatic and it still tries to look in static instead of staticfiles. I would appreciate any help, I've tried reading the documentation and added everything but it refuses to look at staticfiles folder and goes to static.
https://scotch.io/tutorials/working-with-django-templates-static-files#toc-settings-for-managing-static-files
https://github.com/amos-o/djangotemplates
Related
I am hosting my Django application on a DigitalOcean droplet (Ubuntu 22.10 with Gunicorn and Nginx. When I run my app locally everything looks fine, but as soon as I deploy, it is trying to load the initial version of the compressed CSS file. The newer file lies correctly on the server.
Key files:
Settings.py
BASE_DIR = Path(__file__).resolve().parent.parent
STATIC_ROOT = os.path.join(BASE_DIR,"static")
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
MEDIA_URL = '/media/'
DEBUG = False
urls.py
urlpatterns = [
...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
_base.html
<head>
{% compress css %}
<link rel="stylesheet" href="{% static 'src/output.css' %}">
{% endcompress %}
...
</head>
Other static files and media files work fine, but if you open the website, Django serves an old version of the compressed output.css file.
see the live example here: https://gymtime.ch/
the template is trying to load https://gymtime.ch/static/CACHE/css/output.41dd2db47b39.css (404, does not exist anymore)
but the correct file that is used locally is on the server too: https://gymtime.ch/static/CACHE/css/output.e8979ce60e01.css
How can I ensure the template serves the current compressed CSS file?
Thanks for your support!
So, as I said I have a base.html file located at main_project/templates/base.html, but where do I put the base.css file? Do I create a main_project/static directory or should I just put in main_project/templates?
This seems like it should have a simple answer but I have only seen questions asking where to store base.html, and am unsure where to store base.css Thanks in advance for any responses.
All static resources go in static folder examples are, CSS,js,logo images,
STATIC_URL = '/static/'
STATIC_ROOT = ''
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
You need to add above code to settings.py to configure static directory. Then you can create a folder called 'static' where your manage.py files are.
After that in urls.py you have this
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)
And then you can use those files in the template using
<img src="{% static "my_app/example.jpg" %}" alt="My image">
Note:- if have dynamic files that change for each page, example blog post images, they are stored in media folder. To know more you can read
Read Full documentation here
https://docs.djangoproject.com/en/3.0/howto/static-files/
I know there are other questions similar to mine, but I've tried everything to get my static files working and need some help. When I open my page I get these errors:
GET /static/css/cerulean/css HTTP/1.1" 404 2983
GET /static/js/bootstrap.js HTTP/1.1 404 2980
This is my project directory (most files ommitted):
Motif_Django
Motif_Django
settings.py
urls.py
motif
static
css
cerulean.css
js
bootstrap.js
Here are the important settings in settings.py:
STATIC_URL = 'http://127.0.0.1:8000/static/'
STATIC_ROOT = '/home/kimberly/Motif-Scan-Plus/Motif_Django/static'
STATICFILES_DIRS = (
'/home/kimberly/Motif-Scan-Plus/Motif_Django/static',
'/home/kimberly/Motif-Scan-Plus/Motif_Django/motif/static/motif/',
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',)
Under INSTALLED_APPS I have included django.contrib.staticfiles. The STATIC_ROOT folder was initially empty and I collected static files with python manage.py collectstatic and I still get these errors. In my HTML form I am using {% load staticfiles %} and trying to load it with
<link rel="stylesheet" type="text/css" href="{% static 'css/cerulean.css' %} but nothing is working. I included the full URL in STATIC_URL to see if that would help, as well as adding the full path of my static folder in STATICFILES_DIRS but still nothing. Any help would be greatly appreciated!!
STATIC_URL is not supposed to be absolute URL, just the path (ie. /static/).
settings.DEBUG has to be True
You have to serve static() url patterns in urls.py
.
urlpatterns = [
# ... patterns,
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Check related guide in Django docs:
https://docs.djangoproject.com/en/dev/howto/static-files/
I have a template that renders an image:
{% load staticfiles %}
<img src="{% static "img/logo.png" %}" alt="My image"/>
The image link is broken, but it points to:
localhost/static/img/logo.png
What are values I need to set for static_root, static_url, and STATICFILES_DIRS to get this image to show up correctly?
This is my directory structure:
myprojectname (top level)
--- myprojectname
--- --- myproectname
--- --- --- settings
--- --- --- --- base.py (setting.py)
--- --- static
--- --- --- img
This is my static configuration in settings:
STATIC_ROOT = '/Users/myuser/myprojectname/myprojectname'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
#normpath(join(SITE_ROOT, 'static')),
os.path.join(BASE_DIR, "static"),
'/Users/myuser/myprojectname/myprojectname/static',
)
This is what it shows:
I have already done a collectstatic and this doesn't work.
Static files can be confusing in Django. I'll try to explain as simply as possible...
STATIC_ROOT
This is the directory that you should serve static files from in production.
STATICFILES_DIRS
This is the directory that you should serve static files from in development.
STATIC_ROOT and STATICFILES_DIRS cannot point to the same directory.
Django is a highly modular framework. Some application modules contain their own templates, css, images and JavaScript. Django admin is one such app. Django extends this modularity to applications you create by using different directories for static files in development versus production.
When DEBUG = True and you have included django.core.staticfiles in your INSTALLED_APPS, Django will serve the files located in the STATICFILES_DIRS tuple using the STATIC_URL path as the starting point.
In production this responsibility should be given to Nginx, Apache, CloudFront, etc. When DEBUG = False, Django will not automatically serve any static files.
When you run:
$ python manage.py collectstatic
The files specified in the STATICFILES_DIRS are copied into the STATIC_ROOT to be deployed.
So, to answer your question, I would do the following:
Create another directory to store your static files in development and add that path to your STATICFILES_DIRS. I usually call this folder "static-assets". It can reside at the same level as your existing "static" directory.
Set STATIC_ROOT to the path to your existing "static" directory.
If you look closely at the path that's returning a 404 in your screenshot, the image path is specified as: /static/img/logo.png, but your directory for images is: /static/image/
So double-check your image path to make sure you're pointing to the right directory.
Make folder "staticfiles" in root of your project where settings.py exists
In staticfiles you can go this way..
css
js
images
In settings.py
STATIC_ROOT = os.path.join(PROJECT_DIR,'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(PROJECT_DIR,'staticfiles'), # if your static files folder is named "staticfiles"
)
TEMPLATE_DIRS = (
os.path.join(PROJECT_DIR,'template'), # if your static files folder is named "template"
)
In base.html
<link rel="stylesheet" type="text/css" href="{% static 'css/demo.css' %}" />
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
In other template files in which you include base.html
{% extends "base.html" %}
{% load static %}
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<div id="yourID" class="yourClass">
<img src="{% static "images/something.gif" %}" alt="something" >
</div>
If you are in development mode then define just one line:
STATICFILES_DIRS = ( os.path.join('static'), )
You don't need to define STATIC_ROOT = '/Users/myuser/myprojectname/myprojectname'
OR
STATICFILES_DIRS as BASE_DIR
So, working solution is :
STATIC_URL = '/static/'
STATICFILES_DIRS = ( os.path.join('static'), )
actually I too was struggling with the same problem , it got resolved now , check javapoint documentation once its really good , another method that worked for me is change the path of static folder i.e place the static folder inside the app folder that u have created (in my case , the static folder is inside the first_app folder) . it should work . after that I relocated my folders back to where it was and to my surprise , it worked again!. sometimes it may be the fault of browser . I tried my level best to explain as I am a beginner in Django .
If you want to save static files in Django you will need to do the following
in settings.py file you will have something like this `
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'my_project/static') # where I want to host the static files i.e img, js & css
]
depends on how you have structure you files but you will need to have something like this in your urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
path('', include('appfront.urls')),
path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Final your template will have something like this Note the usage of static tag
{% load static %}
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="{% url 'index' %}">
<img src="{% static 'img/logo.png' %}" class="logo" alt="">
</a>
'''
I'm trying to make django compress work but I believe it does not work because of my {% static %} use.
My template is (I'm using pyjade but doesn't matter):
- load staticfiles
- load compress
| {% compress css %}
link(rel="stylesheet", href="{% static 'less/bootstrap.css' %} ")
link(rel="stylesheet", href="{% static 'timepicker/css/bootstrap-timepicker.min.css'%}")
link(rel="stylesheet", href="{% static 'leaflet/addons/locatecontrol/L.Control.Locate.css' %} ")
link(rel="stylesheet", href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css")
link(href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css', rel='stylesheet')
| {% endcompress %}
And part of my settings.py:
PROJECT_DIR = os.path.dirname(os.path.realpath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, '../static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(PROJECT_DIR, 'media'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
#'django.contrib.staticfiles.finders.DefaultStorageFinder',
'compressor.finders.CompressorFinder',
)
COMPRESS_URL = STATIC_URL
COMPRESS_ROOT = STATIC_ROOT
COMPRESS_STORAGE = "staticfiles.storage.StaticFileStorage"
INSTALLED_APPS = (....,'compressor',....)
Even if I $ python manage.py collectstatic the compress does not work and spits out the original files. In the docs it says I should provide the absolute path which I think I have given, haven't I? Can someone help make compress work? Thanks. (I'm not an very familiar with django's static files).
Update
After following Timmy's comment I enabled COMPRESS_ENABLED = True (and DEBUG=False) in settings, it still needs to find the files:
UncompressableFileError at /
'less/bootstrap.css ' could not be found in the COMPRESS_ROOT '/Users/diolor/mysite/wsgi/static' or with staticfiles.
Just to note that the static files are correctly found and rendered (when COMPRESS_ENABLED = False).
My structure:
mysite/
wsgi/
myapp/
settings.py
manage.py
media/
#js & css files
static/
[...]
After playing some time it looks like compress has trouble with the css and {% static %}.
If you have
link(rel="stylesheet", href="/static/less/bootstrap.css")
it greaty compresses the stylesheets, on
link(rel="stylesheet", href="{% static 'less/bootstrap.css' %} ") it raises an error.
On js, it renders it fine: script(type="text/javascript", src='{% static "bootstrap/js/bootstrap.min.js" %}')
The problem is that you have a space at the end of your href, between %} and ". If you look at the error message carefully, you'll see that the compressor is looking for a file with a space at the end. (Same thing on the leaflet stylesheet.)