I'm using cherrypy with jinja2 templates from a 'views' directory like this:
env = Environment(loader = FileSystemLoader('views'))
When I render the index page:
index = env.get_template('index.html')
it shows up fine, but referenced css, javascripts and images (inside the index.html) are not resolved:
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/web.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
the file system is organized like: views/css , views/js , views/img
What is a robust way to obtain working file resolution?
Static paths in Jinja's templates have nothing to do with Jinja. It's all about the configuration of the web server. If you're using flask, use SharedDataMiddleware dispatcher for static files, i.e.
from werkzeug import SharedDataMiddleware
app.wsgi_app = SharedDataMiddleware(app.wsgi_app,
{ '/static': '/path/to/static/files' } )
The structure of the static directory:
.../static/
img/
css/
js/
etc/
Don't forget to add slash at the beginning of the paths:
<link rel="shortcut icon" type="image/png" href="/static/img/favicon.png">
It is strongly discouraged to use SharedDataMiddleware on production servers. Nginx is the right thing.
Related
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.
I have the following structure in my Django project. As you can see, there is one app called "blog" as well as the main app that is eponymous with the project itself.
The problem I am having has to do with serving static files from the static directory of the main project. The blog app has its own static directory and those files are served properly (when the pertinent URL routes are traversed).
Could someone tell me what I am doing wrong? Also, what is the best practice of serving static files when dealing with multiple apps? Is it prudent to dump all styles and scripts into a common static directory in the root of the project or is it better to keep things entirely separated from app to app?
settings.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, "..", "django_by_example_blog", "static")
STATIC_URL = '/static/'
urls.py
urlpatterns = [
url(r'^$', TemplateView.as_view(template_name="base.html")),
url(r'^admin/', include(admin.site.urls)),
url(r'^blog/', include('blog.urls', namespace='blog', app_name='blog')),
]
base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Home | Triangle</title>
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/font-awesome.min.css" %}" rel="stylesheet">
<link href="{% static "css/animate.min.css" %}" rel="stylesheet">
<link href="{% static "css/lightbox.css" %}" rel="stylesheet">
<link href="{% static "css/main.css" %}" rel="stylesheet">
<link href="{% static "css/responsive.css" %}" rel="stylesheet">
<!--[if lt IE 9]>
<script src="{% static "js/html5shiv.js" %}></script>
<script src="{% static "js/respond.min.js" %}"></script>
<![endif]-->
<link rel="shortcut icon" href="{% static "images/ico/favicon.ico" %}">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{% static "images/ico/apple-touch-icon-144-precomposed.png" %}">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{% static "images/ico/apple-touch-icon-114-precomposed.png" %}">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{% static "images/ico/apple-touch-icon-72-precomposed.png" %}">
<link rel="apple-touch-icon-precomposed" href="{% static "images/ico/apple-touch-icon-57-precomposed.png" %}">
</head><!--/head-->
<body>
STATIC_ROOT specifies the folder into which all static files will be dumped when you run the collectstatic command
python manage.py collectstatic
You seem to have specified one of your app's static folder as the static_root.
It would be preferable to give another folder for holding all your static files.
STATIC_ROOT = os.path.join(BASE_DIR, "static")
when you run the collectstatic command it would collect all your static files and place them into the STATIC_ROOT folder.
Although, while running in DEBUG=True you needn't worry about any of this.
Django will serve all the static content (including from within individual apps), but in a production environment this is not recommended and it would be the job of the web server to serve static content.
EDIT:
You also need to specify in your base urls.py
from django.conf.urls.static import static
from django.conf import settings
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
"Dumping all styles and scripts into a common static directory" is exactly what the collectstatic command does. You should run that, and configure your server to serve the files from there.
First though you should set your STATIC_ROOT setting to point to that common directory, rather than inside your app.
I'm new to Django, and facing issues rendering bootstrap on a django page.
This is my base html,
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Dropbox Web App Prototype</title>
<!-- Bootstrap -->
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
The static file is at the same level as the project directory and has the following structure,
I've also added the following line, to my settings.py file
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
The CSS is not rendering on the home page. Any help appreciated.
You are using an older syntax that's probably doesn't match your version of Django.
In your html file change:
{% load staticfiles %}
to
{% load static %}
Also, replace the single quote with a double quote :
"{% static 'bootstrap/css/bootstrap.min.css' %}"
to:
"{% static "bootstrap/css/bootstrap.min.css" %}"
you can see the exact syntax of dealing with static files here
BASE_DIR is defined by default to:
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
Here __file__ is actually settings.py, so BASE_DIR is on the parent directory, the one that contains manage.py.
It seems your static folder is on another level, so just move it to the same level as manage.py and it should work.
CDN:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
Static
In urls for django runserver:
if settings.DEBUG:
urlpatterns += [url(r'^static/(?P<path>.*)$', views.serve),]
When running from the webserver, you need to config an alias. Nginx example:
location /static {
alias /home/username/mysite/static;}
settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
In the html
replace this
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
with this
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
and check this is in the settings.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
just define additioaly static url in your settings as follow somewhere on the bottom:
STATIC_URL = '/static/'
and check again if your bootstrap is served
can you paste your BASE_DIR ? Can you set it to: BASE_DIR to BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
Problem
I have the css files in /static/ and the html files in /templates/.
When I use simple routing, its works well.
#app.route('/newuser', methods=['GET'])
def newuserform():
return render_template("newuser.html")
But in this code, Flask doesn't render correctly the .CSS files, why?
#app.route('/new/user', methods=['GET'])
def newuserform():
return render_template("newuser.html")
Loading .css files in html,
<!-- Bootstrap core CSS -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
Set the link as
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
Or better use static urls generator for Jinja2
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
I have a simple flask application. I have all my css inside static/css directory. I have created a master template in which I want to include css from that directory. Following is what I have tried so far.
<link rel="stylesheet" href="/static/css/justified-nav.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/justified-nav.css') }}" media="screen">
<link rel="stylesheet" type="text/css" href="http://127.0.0.1/static/css/justified-nav.css" media="screen">
In all the cases the file gets loaded but with mime-type text/plain. I have tried putting the css file directly into the static folder as well but no results.
What am I doing wrong? How can I include a css file in a template?
Flask uses the mimetypes module to determine the MIME type of a file, based on its extension. If you get text/plain for a CSS file it means this module returns the wrong MIME type.
On Windows it uses data from the registry, so if the "Content Type" value in HKCR/.css is not set to the proper MIME type it can cause your problem.
Try this and it should work.
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}"/>