Import Polymer with Bower in Django

Question

Import Polymer with Bower in Django

Navigation

#1 by (2 votes)

1

I'm using cloud9, and I have a project in Django where I have to perform the view with Polymer. I follow the bower installation manual: link

I install bower correctly, and I install polymer (google maps) with bower correctly (I see that the folder structure is generated, following this example ( link ).

    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="bower_components/google-map/google-map.html">

But you can not find the url: link Failed to load resource: the server respond with a status of 404 (Not Found)

The path where the compomenents are is: / home / ubuntu / workspace, this route being the route of the project.

How do I indicate to the template that it has to load bower components from that route?

Thank you very much.

django polymer bower

asked by Jfhs19 24.05.2016 в 19:10

source

1 answer

How to activate the BroadcastReceiver after rebooting? Javascript onLoad does not load

score 2 · Accepted Answer

Django has his way of handling static files (css, javascript, images, etc) you have to understand it well first: Static Files Django . It can be a little complicated to understand at the beginning but when you understand it you see that it makes a lot of sense.

In summary, in django so that you can load static files they have to be in a special directory by default 'static' because of that you have to configure bower using the file .bowerrc so bower will 'install' the libraries in your corresponding static folder so you'll have something like this: / static / bower_components /... you see that done You will be able to upload your files like this:

{% load staticfiles %}

<script src="{% static 'bower_components/webcomponentsjs/webcomponents-lite.min.js' %}"></script>
<link rel="import" href="{% static 'bower_components/google-map/google-map.html' %}">

at the end when django renders the template using the default configuration for static files this:

<script src="{% static 'bower_components/webcomponentsjs/webcomponents-lite.min.js' %}"></script>

it becomes this:

<script src="/static/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>