I have problem with Django static files. Everything works fine but when I want to change something in CSS or an image or JS nothing is happening.
In settings.py I have this
# https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
I have 2 folder of static files, first is static and second one I get after manage.py collecstatic I get another folder (staticfiles) so even when I'm deleting both folders my website files not breaking, I need to restart my Mac. Plus I cannot change elements in CSS because I'm working on both folders but nothing happens.
Directory structure
Related
Before marking as duplicate, note that I've checked all the similar questions that have been asked and it has not fixed my problem. I've deployed my Django App on Heroku in in one template where I reference a min.js file, it throws this error in question.
My basic directory structure is this:
myapp
mysite
dictionary
static
jquery.twbsPaginationAlt.min.js
staticfiles
settings.py:
STATIC_URL = '/static/'
# STATIC_ROOT = [os.path.join(BASE_DIR, 'staticfiles'), os.path.join(BASE_DIR, 'static/fonts')]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
if DEBUG:
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'mysite/static'), os.path.join(BASE_DIR, 'static/')]
import django_heroku
# handles staticfiles, database url, and secret key, can be overwritten as needed
django_heroku.settings(locals(), secret_key=False, logging=False)
So originally if STATICFILES_DIRS had any value, I would get an error of FileNotFoundError: [Errno 2] No such file or directory: '/tmp/build_6f3eb879/mysite/static' when running collectstatic on heroku. However, if it is not set, than the fonts I have in my dev environment do not load in properly (I also have fonts inside the base level static folder).
This is how I reference the js file in my problem template, it works fine on dev:
<script src='{% static 'jquery.twbsPaginationAlt.min.js' %}'></script>
For convenience, here is what django-heroku does in terms of staticfiles:
logger.info('Applying Heroku Staticfiles configuration to Django settings.')
config['STATIC_ROOT'] = os.path.join(config['BASE_DIR'], 'staticfiles')
config['STATIC_URL'] = '/static/'
# Ensure STATIC_ROOT exists.
os.makedirs(config['STATIC_ROOT'], exist_ok=True)
# Insert Whitenoise Middleware.
try:
config['MIDDLEWARE_CLASSES'] = tuple(['whitenoise.middleware.WhiteNoiseMiddleware'] + list(config['MIDDLEWARE_CLASSES']))
except KeyError:
config['MIDDLEWARE'] = tuple(['whitenoise.middleware.WhiteNoiseMiddleware'] + list(config['MIDDLEWARE']))
# Enable GZip.
config['STATICFILES_STORAGE'] = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
(from https://github.com/heroku/django-heroku/blob/master/django_heroku/core.py)
EDIT:
In order to fix this I had to stop using django heroku, change my STATICFILES_STORAGE variable to whitenoise.storage.CompressedStaticFilesStorage , and reorganize where I kept some of my static files by checking the logs to see what path the GET requests were going to. It seems whitenoise is pretty imperfect based off the other stackoverflow posts I've seen, it consistently misses 'static/' files in the root directory. Additionally since Django relies a lot on the 'static' keyword in templates, and this is not available in .css files, the only way to resolve getting static files into a css file (for fonts for example), is trial and error of testing different paths.
This line looks very odd to me and may be the source of the problem:
if DEBUG:
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'mysite/static'), os.path.join(BASE_DIR, 'static/')]
Why are you only defining your STATICFILES_DIRS in debug mode? You'll need those defined in production too.
Here's my script in base.html, the left of the picture is about my tree.
I checked the href should be correct and I've load static at very top of the html file. However I still cannot connect the css file anyone can help he here? Thanks!
href="{% static 'Simple_Social/css/master.css' %}"
for refer, please see the picture since idk why I can't post a picture yet, thanks!
https://i.stack.imgur.com/Vi2z6.png
This is how static files are configured. In settings.py file inside the INSTALLED_APPS list, there is an app called 'django.contrib.staticfiles', this baked in app manages the static files across the entire project during development as well in production.
This static URL will append to base URL for serving static files in development like http://127.0.0.1:8000/static/css/style.css basically think this as a reference to static files.
STATIC_URL = '/static/'
STATICFILES_DIRS tells Django the location of static files in our project. The common practice is to have all the static files in a top-level static directory.
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]
STATIC_ROOT is the single root directory from where the Django application will serve the static files in production. The command manage.py collectstatic will automatically compile all the static files throughout the project and dump it into a single root directory, which is declared in STATIC_ROOT.
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
Finally, you can user load static to load the static files in template
{% load static %}
My static files aren't being served correctly because there's a strange space in my folder structure.
development folder structure
static
>css
>lots of css files
>js
>img
When I run collecstatic to serve them properly, collect static puts everything into a folder called staticfiles, here's my settings.py
settings.py
STATIC_DIR = os.path.join(BASE_DIR,'static')
MEDIA_DIR = os.path.join(BASE_DIR, 'media')
STATICFILES_DIRS = [
STATIC_DIR
]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'staticfiles/static')
# MEDIA file defaults
MEDIA_ROOT = os.path.join(BASE_DIR,'staticfiles/media')
MEDIA_URL = '/staticfiles/media/'
I use it this way as this is how its configured on my live server. I now have (in my development env) a folder in the project called staticfiles/static, inside which I can find the a similar folder structure as above.
staticfiles
>img
>media
>static
>css
>admin
>img
>podcast
>js
However, once I've run the server, django thinks my CSS file 'static/%20css/front.css' and so it doesn't load. If I correct the URL to 'static/css/front.css' the css file loads perfectly...?
Here's where it's trying to get the css from:
http://127.0.0.1:8000/static/%20css/front.css
Here's where it actually is:
http://127.0.0.1:8000/static/css/front.css
I've checked the folder name for 'css' on both my development static, and the staticfiles static, and it is correct. It seems to be something to do with the way it's written the folder path?
I have all the static files, but for some reason only the normal html loads with no css. I have tried using collectstatic and creating a new project but it doesn't work on any. STATIC_URL is also specified along with static in the url.py . Nothing seems to be working.
This can happen if your DEBUG is set to False and did not mention any staticfiles dir.
Okay, update your settings.py as below:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static_my_proj"),
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn", "static_root")
Now, that you have done that make dir called static_my_proj, at the same level where your manage.py file is.
Okay, now create new dir called static_cdn just one level up, i.e. one level up to manage.py file.
Now, create dir called static_root inside static_cdn and that is all you have to do. Make sure you run python manage.py collectstatic
NOTE:
static_my_proj is for development or DEBUG = True and static_cdn is for production or DEBUG = True. handy, right?
Also, you can add media file the same way, just add,
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn", "media_root")
and make new dir called media_root under static_cdn.
Set DEBUG = True first and test it.
Hope this helps.
Ive checked over quite a few of the other threads on being unable to serve static content using the static file app within Django but as yet have yet to find a solution.
settings.py
STATIC_ROOT = '/opt/django/webtools/static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
"/home/html/static",
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# 'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
Template
relevant line....
<img src="{{ STATIC_URL }}macmonster/img/macmonster-logo-blue.png" >
Logs
From the logs it looks like the path is correct, but alas it is still resulting in a 404..
[10/Feb/2013 16:19:50] "GET /static/macmonster/img/macmonster-logo-blue.png HTTP/1.1" 404 1817
[10/Feb/2013 16:19:51] "GET /static/macmonster/img/macmonster-logo-blue.png HTTP/1.1" 404 1817
For local serving of static files, if you haven't set up any form of collecting of staticfiles and if you're running Django 1.3+, I believe this is the way your settings.py should look like when refering to static files
# Absolute path to the directory static files should be collected to.
# Don't put anything in this directory yourself; store your static files
# in apps' "static/" subdirectories and in STATICFILES_DIRS.
# Example: "/home/media/media.lawrence.com/static/"
STATIC_ROOT = ''
# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/'
# Additional locations of static files
STATICFILES_DIRS = (
# Put strings here, like "/home/html/static" or "C:/www/django/static".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
'/Users/cupcake/Documents/Workspaces/myDjangoProject/someOtherFolderPerhapsIfYouWant/static',
)
# List of finder classes that know how to find static files in
# various locations.
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# 'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
Notice that I've left out the STATIC_ROOT here.
This is because I don't have the need for static files collection "just yet".
The collecting of static files is to allieviate(spelling) the problems with serving multiple diffrent staticfiles folders, so they merged the staticfiles app that was used normally for helping with this problem.
What this does, and it's described in the docs, is to take all the static files from all your apps and put them into one (1) folder for easier serving when putting your app into production.
So you're problem is that you've "missed" this step and that's why you're getting a 404 when trying to access them.
Therefore you need to use a absolute path to your static files ie. on a mac or unix system it should look something like this:
'/Users/cupcake/Documents/Workspaces/myDjangoProject/someOtherFolderPerhapsIfYouWant/static',
Also, you could simplify and "fix" the need of having a hardcoded path like that which I used for illustration and do like this
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
STATICFILES_DIRS = (
PROJECT_ROOT + '/static/'
)
This would fix the portability problem as well. A good Stackoverflow post about that is found here
I hope I made it a bit clearer, otherwise please correct me if I'm wrong ^_^!
For collecting and how to manage static files in the newer versions of Django read this link
The staticfiles app
Change
STATIC_URL = '/static/'
set
STATIC_URL = 'http://yourdomain.com/static/'
it's unbelievable but, after 1 hour searching it solution solve my problem with static files and remove STATIC_ROOT from STATICFILES_DIRS.
STATICFILES_DIRS is just for collecting all the static in modules and store it in STATIC_ROOT.