Google's Polymer relies on HTML imports like this:
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
Right now I'm keeping all the custom web components in the static folder and loading them like this:
template.html
<link rel="import" href="{% static 'polymer/my-custom-element.html' %}">
In the web component I import things using paths relative to the file:
my-custom-element.html
<link rel="import" href="../bower_components/polymer/polymer.html">
Is this the recommended way to import web components when using Django or is there a better way?
Better to use absolute path where possible.
Also I advice you use django-bower. It can handle bower statics in best way.
Use django-bower (https://github.com/nvbn/django-bower), importing its also bit tricky cause 'static' in django template will add all import url pattern, for example yours import url it must be
<link rel="import" href="../polymer.html">
Related
I am trying to implement websockets using channels in Django project. I am getting 404 for webscoketbridge.js Below is html template.
{% load staticfiles %}
{% block title %}Delivery{% endblock %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="{% static 'channels/js/websocketbridge.js' %}" type="text/javascript"></script>
Also, I tried to have a look in the virtualenv/lib/python3.5/site-packages/channels path, there is no js folder or any file named websocketbridge.js
Has anyone solved this issue?
The javascript bridge was removed in v2.1.4. Here's the commit: https://github.com/django/channels/commit/2a9d764ad03927581aa2bfcadccc3e953949cb98#diff-b582cbb2f8294afa8bbe26c4c360a01d
This bit me, in my book that breaks semantic versioning.
As #tobyspark said, the javascript wrapper has been completely removed in the Django-channels 2. You can read more on how the js WebSocket wrapper was working in channels 1 here.
the simplest workaround to clear that error in your browser is to create a file called websocketbridge.js in the path shown in the error, "static/channels/js/", or you can specify any other path in your HTML src attribute matching the location of the static files and then add the code from here.
But you have to find a better implementation. You can use ReconnectingWebSocket. In the channels 2 release documentation, it is stated there might be other third-party packages for the binding but I don't know any other.
I had an html file using Foundation to display a simple signup login template that was working as desired before using Django. I made a Django project and app and was able to get everything displaying as it was before except for modals. The section looks like this:
<a data-open="signup" class="button">Sign up</a>
<div class="reveal" id="signup" data-reveal>
I've used this http://foundation.zurb.com/sites/docs/reveal.html but it's not actually displaying the modal when I run the Django server.
I also have the following lines in my html page:
<link rel="stylesheet" href="{% static "MyApp/foundation.css"%}">
<link rel="script" href="{%static"MyApp/js/jquery/vendor/foundation.js"%}">
Along with this <script> $(document).foundation(); </script>
These are all in my static directory. I also have tried adding 'foundation' to INSTALLED_APPS in my settings but I get an error saying no module was found. However, I'm using other CSS from foundation and it's working fine so I'm wondering if this issue has something to do with using foundation in my static directory vs. using this package: https://pypi.python.org/pypi/django-zurb-foundation
Any help is appreciated!
I want to know how can I get the absolute URL of my static file directly in my template in Django ?
For now in my template :
<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
return
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
How can I get on dev:
<link rel="stylesheet" href="http://127.0.0.1:8000/static/css/bootstrap.min.css">
on production
<link rel="stylesheet" href="https://mycompany.com/static/css/bootstrap.min.css">
There are two options:
recommended: use the sites framework to render the appropriate domain
not recommended: store your current domain as a Django setting in the settings file you use depending on your environment
I usually go for (1), the only downside being that you have to update the current domain in the DB, but that usually happens just once per deployment.
Then the appropriate domain will be displayed irrelevant of where code is running; you should always use the static tag in your template, rather than handling the display of the domain manually.
I'm hosting my Django project on my own server, and exactly as the docs say, the Django admin media stop showing up.
The solution is simply to host it yourself, which I'm doing. The problem I'm having is that the url the Django admin is using to try to find them is incorrect. Specifically, Django is looking at
<link rel="stylesheet" type="text/css" href="/ceasarb-cfa/admin/css/base.css">
when I want it to look at
<link rel="stylesheet" type="text/css" href="/ceasarb-cfa/static/admin/css/base.css">
My question is, how can I change that path?
Intuitively, I've tried adjust the ADMIN_MEDIA_PREFIX file in settings.py (currently set to /ceasarb-cfa/static/admin) but fiddling with that value didn't seem to change anything.
My guess is that your settomgs.py you have:
STATIC_URL = "/ceasarb-cfa/"
but it should be
STATIC_URL = "/ceasarb-cfa/static/".
Here's more documentation on that setting:
https://docs.djangoproject.com/en/dev/ref/settings/#std:setting-STATIC_URL
When this one runs everything goes fine:
(r"^newobject$", "views.myobjects.newobject"),
All the CSS + JS files are properly fetched from:
static/css/...
static/js/...
When this one runs:
(r"^mybjects/(([a-z]|[A-Z]|[0-9])+)$","views.myobjects.loadobject"),
All the css and JS files that are being fetched, are run trough the urlpatterns and are returning my defailt page:
(r"", 'views.main.index'),
This makes all my CSS and JS code to actualy be HTML. My guess is that i'm giving some noob mistake. Is there any common reason why this should happen? And how to fix it?
Edit:
Css example:
<link href="static/css/style.css" type="text/css" rel="stylesheet">
JS example:
<script src="static/js/libs/date.js" type="text/javascript"></script>
See the difference:
when you access *some url*/newobject the static/css/style.css refers *some url*/static/css/style.css*
when you access *some url*/newobject/whatever the static/css/style.css refers *some url*/newobject/static/css/style.css*
If your URL will always be floating around in depth, include your javascript and CSS using URLs relative to the server root (start them by /) instead of relative to the current dir.