Following is the my static folder structure:
ProjectABC
- App1
- App2
- App3
- ProjectABC
- resources
- static
- imgs
- css
- templates
This is how the project structure looks like.
This is how the static configuration in settings.py looks like:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
This is how the base.html looks like:
<!doctype html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-
scale=1, user-scalable=0">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Open+Sans:400,600,800">
<title>{{SITE_NAME}}</title>
<link rel='shortcut icon' href= "{% static 'img/favicon.png' %}"/>
<link href="{{STATIC_URL}}css/application.css" media="screen" rel="stylesheet"
type="text/css" />
<link href="{{STATIC_URL}}css/style.css" media="screen" rel="stylesheet"
type="text/css" />
<script src="{{STATIC_URL}}js/application.js" type="text/javascript"></script>
{% block extracss %}
{% endblock %}
</head>
<body>
<div class="container">
<h1>Hello</h1>
</div>
</body>
</html>
All the static files are being loaded as seen in terminal, but in browser its just loading bare html without any css or img:
Please lemme know if i am missing something.
Thnk You!
<link href="{%static 'css/style.css' %}" media="screen" rel="stylesheet"
type="text/css" />
add settings.py
STATIC_URL = "/static/"
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
Project App Url
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Static directory must be under the app itself. Create a 'static' directory directly to your app and for better practice, you can also create another directory to the static directory with your app name (static/[app_name]).
Also, {% load static %} must be above doctype in your base.html
change the static config in your settings.py to this:
STATIC_ROOT = os.path.join(BASE_DIR, 'resources/static')
STATIC_URL = 'resources/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'ProjectABC')
]
then run python manage.py collectstatic
and when you call the static file do it like this {% static 'css/style.css' %}
Related
For a long time I tried to solve the problem with loading all my static files. When I found a working solution, all svg started loading, but css files didn't.
Here is my settings.py (showing you only main things)
import mimetypes
mimetypes.add_type("text/css", ".css", True)
BASE_DIR = Path(__file__).resolve().parent.parent
DEBUG = False
STATIC_URL = '/static/'
if DEBUG: STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
else: STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Here is my urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf.urls import url
from django.conf import settings
from django.views.static import serve
urlpatterns = [
path('', include('main.urls')),
url(r'^static/(?P<path>.*)$', serve,{'document_root': settings.STATIC_ROOT}),
]
Here is an example of using css files in my templates
{% load static %}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-v4-grid-only#1.0.0/dist/bootstrap-grid.min.css">
<link rel="stylesheet" type="text/css" href=" {% static 'css/reset.css' %}">
<link rel="stylesheet" type="text/css" href=" {% static 'css/main.css' %}">
And this is the error in Chrome Console
Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
And also i cant open css files in a new tab. I am getting that error
Also, if you remove %20 from the address bar, then I will open the css file
P.S.
I am trying to deploy it
1- Try to replace a slash forward path
<link rel="stylesheet" type="text/css" href=" {% static '/css/reset.css' %}">
2- whitenoise
pip install whitenoise
Then, set it to "MIDDLEWARE" in "settings.py". Finally, CSS is loaded successfully:
MIDDLEWARE = [
# ...
"django.middleware.security.SecurityMiddleware",
"whitenoise.middleware.WhiteNoiseMiddleware", # Here
# "whitenoise" will solve "MIME type" error then CSS is loaded successfully:
]
3- change your static URL like that:
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)
I think your mistake is that you put in a space in front of your static link
<link rel="stylesheet" type="text/css" href=" {% static 'css/reset.css' %}">
Try removing the space in front of {% so it will become
<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
%20 is translated to a space character in URL's, so that why I think that's the issue
I stored my static files in project root directory but I can't make them load on the browser.
configurations
settings.py
STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIR = [
STATIC_DIR,
]
template file
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<h1>{{temp}}</h1>
<h2>Click here to veiw user details</h2>
<img src="{% static "user/images/smile.png"%}" alt="oh oh didn't show"/>
</body>
</html>
In the file urls.py add the static url.
urlpatterns = [
path('admin/', admin.site.urls),
...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
I'm running a project with an Angular front-end and a Django back-end. Today when I changed some code in the templates the ng build didn't update. I have discovered that it neither updates template changes nor component changes. However, when I run ng serve instead and go to 127.0.0.1:4200 instead of the Django port 8000 the new updates versions are rendered.
The way I have it set up is that I have a template that Django points to with TemplateViev :
{% load static %}
{% csrf_token %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularWebapp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
{% block javascript %}
<script type="text/javascript" src="{% static 'runtime.js' %}"></script><script type="text/javascript" src="{% static 'polyfills.js' %}"></script><script type="text/javascript" src="{% static 'styles.js' %}"></script><script type="text/javascript" src="{% static 'vendor.js' %}"></script><script type="text/javascript" src="{% static 'main.js' %}"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>
And the static directory layout looks like this in settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'angular', 'static'),
os.path.join(BASE_DIR, 'angular-webapp', 'dist', 'angular-webapp'),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
And urls.py:
from django.contrib import admin
from django.urls import path, re_path, include
from django.views.generic import TemplateView
from rest_framework import routers
from authentication.views import AccountViewSet, LoginView
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.contrib.staticfiles import views
router=routers.SimpleRouter()
router.register('accounts', AccountViewSet)
class IndexView(TemplateView):
template_name = 'index.html'
urlpatterns = [
path('admin/', admin.site.urls),
path('api/v1/', include(router.urls)),
re_path(r'^api/v1/auth/login/$', LoginView.as_view(), name='login'),
re_path(r'^.*/$', IndexView.as_view()),
path('', IndexView.as_view()),
]
Which is the only place I have static files, and which is where the files from ng build is put, IE. the static load loads the runtime.js etc. from the folder where it's output when i ng build.
However, from yesterday the changes I make to my app in the angular-webapp/src/app folder doesn't get updated when I ng build. I have tried removing the dist folder to create a fresh one, but that doesn't change anything. When it comes back and I run the project it still somehow uses the old layout while ng serve works perfectly.
Is it something about how ng build works that I am missing?
It's probably a cache busting issue : your files still have the same name, and since they're cached by the browser, it doesn't reload them.
consider building with the --prod flag, which contains several other flags such as --aot, but to correct your issue, try building with --output-hashing=all.
Directly from ng build --help :
--output-hashing=none|all|media|bundles
(String) Define the output filename cache-busting hashing mode.
aliases: -oh <value>, --outputHashing <value>
I am using Django 1.8 for my project but the problem is my static files are not loading into the template. I have followed each steps in detail, but still don't know why it is not loading.
Template file
{% load staticfiles %}
<!DOCTYPE html>
<html>
<!-- This code is only meant for previewing your Reflow design. -->
<head>
<link rel="stylesheet" href='{% static "css/boilerplate.css" %}'>
<link rel="stylesheet" href='{% static "css/index.css" %}'>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
</head>
<body>
Settings.py
STATIC_URL = '/static/'
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static_cdn', 'staticfiles')
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static_cdn', 'media')
STATICFILES_DIR = (
os.path.join(BASE_DIR, 'static'),
)
Project Directory
Could anyone tell me why the static files are not loading? The page source in browser is accurately showing the file path. When i click on it, it is showing me the css content but it is not loading when I run the server.
Page Source:
<!DOCTYPE html>
<html>
<!-- This code is only meant for previewing your Reflow design. -->
<head>
<link rel="stylesheet" href='/static/css/boilerplate.css'>
<link rel="stylesheet" href='/static/css/index.css'>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0">
</head>
<body>
urls.py file
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^', AboutView.as_view(), name='index-template'),
url(r'^register/', RegistrationListView.as_view(), name='register'),
url(r'^form/', RegistrationForm.as_view(), name=''),
]
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Inspect Element Result:
You are missing an 'S' in the spelling of STATICFILES_DIRS.
Once you correct that, do a python manage.py collectstatic and restart the dev server.
i 've the following folder structure
src\BAT\templates\admin\base.html
src\BAT\media\base.css
src\BAT\media\admin-media\base.css
settings.py
MEDIA_ROOT = os.path.join( APP_DIR, 'media' )
MEDIA_URL = '/media/'
ADMIN_MEDIA_PREFIX = '/admin-media/'
TEMPLATE_DIRS = (
os.path.join( APP_DIR, 'templates' )
)
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.messages',
'django.contrib.admin',
'django.contrib.admindocs',
)
urls.py
urlpatterns = patterns('',
(r'^admin/doc/', include('django.contrib.admindocs.urls')),
(r'^admin/', include(admin.site.urls)),
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}),
)
I need to get both the CSS files in my application. my base.html contains
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{{ MEDIA_URL }}css/base.css" rel="stylesheet" type="text/css" />
<link href="{{ MEDIA_URL }}{{ADMIN_MEDIA_PREFIX}}css/base.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% load adminmedia %}{% admin_media_prefix %}css/base.css{% endblock %}" />
{% block extrastyle %}{% endblock %}
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="{% block stylesheet_ie %}{% load adminmedia %}{% admin_media_prefix %}css/ie.css{% endblock %}" /><![endif]-->
{% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% admin_media_prefix %}css/rtl.css{% endblock %}" />{% endif %}
<script type="text/javascript">window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";</script>
{% block extrahead %}{% endblock %}
{% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE" />{% endblock %}
</head>
I want to get the following output for URL http://localhost:8000/admin
<head>
<title>Site administration | My site admin</title>
<link href="/media/css/base.css" rel="stylesheet" type="text/css" />
<link href="/media/admin-media/css/base.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/media/admin/css/base.css" />
<link rel="stylesheet" type="text/css" href="/media/admin/css/dashboard.css" />
But I always getting
<head>
<title>Site administration | My site admin</title>
<link href="/media/css/base.css" rel="stylesheet" type="text/css" />
<link href="/media/css/base.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/admin-media/css/base.css" />
<link rel="stylesheet" type="text/css" href="/admin-media/css/dashboard.css" />
while direct accessing http://localhost:8000/admin-media/css/base.css shows css file from Python site-packages/django/contrib/admin/media/css
while direct accessing http://localhost:8000/media/admin-media/css/base.css shows css file from src/media/admin-media/css/
while direct accessing http://localhost:8000/media/css/base.css shows css file from src/media/css/
Important for Django 1.4 and newer (see here):
Starting in Django 1.4, the admin’s static files also follow this convention, to make the files easier to deploy. In previous versions of Django, it was also common to define an ADMIN_MEDIA_PREFIX setting to point to the URL where the admin’s static files live on a Web server. This setting has now been deprecated and replaced by the more general setting STATIC_URL. Django will now expect to find the admin static files under the URL <STATIC_URL>/admin/.
Previous answer, for older Django releases:
ADMIN_MEDIA_PREFIX is meant to be an absolute URL prefix, it has nothing to do with the MEDIA_URL - both can point to completely different points. Admittedly, the (bad) choice of "_PREFIX" in the name somewhat suggests that.
So, instead of {{ MEDIA_URL }}{{ADMIN_MEDIA_PREFIX}}css/base.css it must be {% admin_media_prefix %}css/base.css. And then you have to ensure that the web server serves the admin media files on '/admin-media/'.
Note that I used the admin_media_prefix tag above, which needs {% load adminmedia %} at the beginning of the template. The regular media context processor only gives you the MEDIA_URL variable, unfortunately.
In order to override the vanilla admin media serving, try something like this in your URLconf:
# A handy helper function I always use for site-relative paths
def fromRelativePath(*relativeComponents):
return os.path.join(os.path.dirname(__file__), *relativeComponents).replace("\\","/")
[...]
url("^admin-media/(?P<path>.*)$",
"django.views.static.serve",
{"document_root": fromRelativePath("media", "admin-media")})
Django 1.4 uses a new strategy for loading static media files, those using it will want to read over https://docs.djangoproject.com/en/dev/howto/static-files/
The executive summary of the above link is that two new settings variables, STATIC_URL and STATIC_ROOT, are used together with a newly included app (django.contrib.staticfiles) to collect and serve static files which are included on a per app basis.
When upgrading my django installation I had to set my STATIC_ROOT equal to my previous MEDIA_URL.
Under this system templates should now use {{ STATIC_URL }}.