The 500 error handler template won't load CSS even if typed everything correctly.
For example, my home template loads CSS properly using the same method
Here's the 500.html template
<html>
<head>
{%load static%}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>500</title>
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"/>
</head>
<body>
html code here
</body>
</html>
This should load the style.css file from the static folder
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"/>
In the terminal it looks like everything is OK, but it still doesn't load.
"GET /static/style.css HTTP/1.1" 200 734
if I try to access 127.0.0.1:8000/static/main.css (the one for the homepage) it shows it how it should
if I try to access 127.0.0.1:8000/static/style.css it gives me an error
I don't know if it matters but I'm doing this with DEBUG = False
Edit: I solved the error by running the server with py manage.py runserver --insecure
At this point I wonder how could I get around this if I wanted to host the website on a server? Why doesn't it load static files for error pages without running the server like that?
The manage.py runserver command starts the Django development server, a server which it is not intended to be used in production and which, as a result, stops to serve the static files when DEBUG=FALSE.
As you point out in your edit, you can bypass this security by using the --insecure option when you start the server (see the documentation here). But this is clearly an insecure and inefficient solution.
So you can serve the static files with a real HTTP server (some examples and tutorials are given here) or you can have a look to the very popular WhiteNoise application to help you doing that.
this is usually i render django template tags : {% load static %}. sometimes pay attention to spaces. and also, I include static on the top of the page.
Keep DEBUG=TRUE in setting.py
Documentation: https://docs.djangoproject.com/en/3.2/ref/settings/
Static files are served via Django on when DEBUG is True.
Related
css located in my_blog/my_blog/blog/static/blog/style.css
manage.py in my_blog/my_blog
head of html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static 'blog/style.css' %}">
<title>{% block title%} My blog {% endblock %}</title>
</head>
I'm using pycharm pro. Browser successfully load css file, but it's empty. Why this is happenning?
I don't see css loading in django console log, when pages load. I changed name of css file. And it's loaded, but once.
When I add new rule to it and reload server, browser still get old version of css.
Now it's works fine. Css loaded properly. I didn't change anything, so I don't know what did happen.
Add this to your settings.py:
os.path.join(BASE_DIR, 'static')
Then move your static folder to project's folder - /my_blog/static/blog/style.css instead of the current one.
I don't believe your href is formatted properly
I have a trivial app where I'm trying to redirect the favicon per:
http://flask.pocoo.org/docs/0.10/patterns/favicon/
app = flask.Flask(__name__)
app.add_url_rule('/favicon.ico', redirect_to=flask.url_for('static', filename='favicon.ico'))
But this fails with:
RuntimeError: Attempted to generate a URL without the application context being pushed. This has to be executed when application context is available.
So, guessing, I try this:
app = flask.Flask(__name__)
with app.app_context():
flask.current_app.add_url_rule('/favicon.ico', redirect_to=flask.url_for('static', filename='favicon.ico'))
But get a different error:
RuntimeError: Application was not able to create a URL adapter for request independent URL generation. You might be able to fix this by setting the SERVER_NAME config variable.
What is going on?
According to the doc:
Setting a SERVER_NAME also by default enables URL generation without a request context but with an application context.
since you're using app_context, you may set the SERVER_NAME Configuration Value.
By the way, as the doc:Adding a favicon says:
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
the above line should be enough for most browsers, we don't have to do any other things.
Late answer, I've just run into the same problem. I don't see a big downside in handling the redirect like this instead:
#app.route('/favicon.ico')
def favicon():
return redirect(url_for('static', filename='favicon.ico'))
This prevents url_for from being called before the application is ready.
To give a counterpoint to using a link in the HTML only, it's a good practice for every site to have a favicon.ico and robots.txt at the root level - even if they're empty. It avoids problems like this and other unnecessary errors that adds noise to logs.
Don't put this in the app but in the html file
<html lang="en">
<head>
<title>{{ title }}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width/2, initial-scale=1">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
I have created documentation for my Django app using apidoc library.
It creates docs using angular. App is running on Heroku.
Docs are working nicely when I open index.html file, but I cannot open them via http://localhost:5000/docs.
Firstly I got this error:
"Variables and attributes may not begin with underscores: '__' "
, which I was able to bypass by putting {% verbatim %} and {% endverbatim %} into the index.html file. (Which I'm not very happy with in the first place and would like to do it some other way).
Then the page is stuck on the loading screen, but when I open it in Chrome I have the following error:
"Uncaught SyntaxError: Unexpected token <" in polyfill.js:1 and
require.min.js:1
And also 3 warnings:
"Resource interpreted as Stylesheet but transferred with MIME type
text/html"
in vendor/bootstrap.min.cs, vendor/prettify.css and css/style.css
We are using apidocs also in other project with Node where it works perfectly, so I think it's an issue with Django. Since the documentation is generated automatically, I would prefer to introduce changes into the app, not docs.
I tried it on Chrome and Safari.
My questions
1. What can I do to make it work?
2. How can I make Django compatible with Angular without putting {%verbatim%} tags into index.html?
Here is my controller:
from django.shortcuts import render
def show_docs(request):
return render(request, 'index.html')
and url_pattern:
from django.conf.urls import include, url
from django.contrib import admin
admin.autodiscover()
import my_app.controller
from django.views.decorators.csrf import csrf_exempt
urlpatterns = [
url(r'^docs/', my_app.controller.show_docs),
]
index.html head:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Loading...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="vendor/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="vendor/prettify.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen, print">
<link href="img/favicon.ico" rel="icon" type="image/x-icon">
<link href="css/apidoccustom.css" rel="stylesheet" media="screen, print">
<script src="vendor/polyfill.js"></script>
</head>
edit:
Thanks to answer from hubert, I was able to find the source of the problem.
It turns out, that Django doesn't work that good with RequireJS, which is used by api docs.
I had to add the following changes to the generated code to make it work:
Points 1-4 are for index.html, point 5, 6 are for main.js:
Add this line above tag:
{% load static %}
Add "{% static" + " %}" tags to all tags so it looks like this:
<link href="{% static "vendor/bootstrap.min.css" %}" rel="stylesheet" media="screen">
Add the same static tags to tags with polyfill.js and require.min.js:
<script src="{% static "vendor/polyfill.js" %}"></script>
<script data-main="{% static "main.js" %}" src="{% static "vendor/require.min.js" %}"></script>
Add {% verbatim %} at the beginning of and {% endverbatim %} at the end of , BUT BEFORE with require.min.js!
In main.js add following lines to paths at the beginning of the file:
apiProject: './api_project.js',
apiData: './api_data.js',
Change lines:
'./api_project.js',
'./api_data.js',
to:
'api_project',
'api_data',
From this two errors:
"Uncaught SyntaxError: Unexpected token <" in polyfill.js:1 and require.min.js:1
"Resource interpreted as Stylesheet but transferred with MIME type text/html"
I would assume that there is something wrong with loading your static files. Probably you have 404 or 500 on them and django loads then default route.
Check if you have correct routing for static files.
You guys were able to help me with last issue involving Django so I thought I'd ask another that has been killing me for the past couple days!
I have a small one app project with about 6 different pages, and I can get them to show however my style.css is not "showing" on the web page, I have followed countless guides including the Django's website and I just can't seem to get this working correctly. Here are some files that I think are relevant:
public_html/mysite/nfl/templates/home.html:
{% load staticfiles %}
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Draftr Home Page </title>
<meta charset="utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<!-- Using Bootstrap 3 framework with permission from getbootstrap.com -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Custom Style Sheet -->
<link href="{% static 'style.css' %}" rel="stylesheet" media="screen">
style.css is located here public_html/mysite/nfl/static AND /home/gobelogic/public_html/mysite/static(alongside admin/)
/home/gobelogic/public_html/mysite/mysite:
import os.path
import sys
PROJECT_ROOT = os.path.normpath(os.path.dirname(__file__))
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
INSTALLED_APPS = (
#other
'django.contrib.staticfiles',
'nfl'
)
TEMPLATE_DIRS =
"nfl/templates",
)
STATICFILES_DIRS = (
'/home/gobelogic/public_html/mysite/nfl/static',
)
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static')
Ok I'm going to try and explain how I think django handles static files, please correct me where I'm wrong:
so in settings.py django is locating all static directories in my project and placing their contents in a single directory static/ next to manange.py(which is done when I run manage.py collectstatic
in the html file I tell django to load all the static files so that i can use them at the top by using {% load staticfiles %} and then i say which one in particular by using <link href="{% static 'style.css' %}" rel="stylesheet" media="screen"> by doing this, django uses the settings.py(?) to find where I put these static files and then loads up the stylesheet that way
Again I am running this on my production server so none of this is run through django built in server, idk if that matters or not
Thanks for any help
EDIT using django 1.8
Since you are not using Django internal server (rightly so), you need to make your production web server aware of the static file location. There is an example in Django docs for Apache (https://docs.djangoproject.com/en/1.8/howto/deployment/wsgi/modwsgi/#serving-files). Even if you are not using apache, generally you need to make sure that /static/ or whatever your STATIC_URL points to is served from the place where your STATIC_ROOT points to.
I wanted to use a third-party html/css example in Django, but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head>
<body>
EXAMPLE CODE
</body>
</html>
I have used just this example, and commented all other code. Django recognizes the css file, I checked it. However, I don't get a sticky footer and header. They transform in a plain text, just like the main body.
I put this example in the codeacademy engine and it works there as well.
What hidden stones of Django I might be missing?
there is no hidden stones in django. there is no such option as recognize css file for django. Django has nothing to do with css files.
I recommend u to open network panel in browser developer tools console and check, was the css file downloaded successfully by browser or not.
in some case if u use django development server there is manual how to serve static files in development mode
https://docs.djangoproject.com/en/1.2/howto/static-files/
another cases are, misspelled css file name or misspelled/incorrect path to css file
https://docs.djangoproject.com/en/dev/howto/static-files/