Privacy Policy
Snippets index

  Use Bower in a Django project

Author: morlandi@brainstorm.it
Creato: Mercoledì 25 Aprile 2018 08:38
Tags: bower

Requirements

pip install django-bower==5.2.0

Settings

INSTALLED_APPS = [
    ...
    'djangobower',
    ...
]

#
# Bower configuration
#

STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'djangobower.finders.BowerFinder',
]

or:

STATICFILES_FINDERS.append('djangobower.finders.BowerFinder')


BOWER_COMPONENTS_ROOT = os.path.join(BASE_DIR, 'components')

BOWER_INSTALLED_APPS = (
    'jquery#1.9',
    'underscore',
    "font-awesome#4.7.0",
    "moment#2.20.1",
    "pnotify#3.2.1",
    "datatables.net#1.10.16",
    "datatables.net-fixedheader#3.1.3",
    "datatables.net-responsive#2.2.0",
    "datatables.net-rowgroup#1.0.2",
    "datatables.net-scroller#1.4.3",
    "animate.css#3.5.2",
    "datatables.net-dt#3.2.2",
    "datatables.net-se#1.10.16",
    "datatables.net-scroller-se#1.4.3",
    "datatables.net-fixedheader-se#3.1.3",
    "datatables.net-responsive-se#2.2.0",
    "semantic-ui#2.2",
)

#BOWER_PATH = '/usr/bin/bower'

.gitignore

/components/

Provisioning

#
# Provisioning variables
#

system_packages:
    ...
    - nodejs
    - npm
    - nodejs-legacy

#
# Install bower
#

- name: Install "bower" node.js package globally
  become: true
  npm:
    name: bower
    global: yes

Deployment

- name: Run django management commands
  become: true
  become_user: "{{username}}"
  django_manage:
      command: "{{item}}"
      app_path: "{{project.website_home}}"
      settings: "{{project_name}}.settings"
      virtualenv: "{{project.virtualenv}}"
      pythonpath: "{{project.pythonpath}}"
  with_items:
      - migrate
      - bower_install
      - collectstatic
      - compress

base.html

<!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, shrink-to-fit=no">
        <title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>

        {% block extrahead %}
        {% endblock extrahead %}

        {% compress css file frontend %}
            <!-- Bower components -->
            <link rel='stylesheet' href="{% static 'semantic/dist/semantic.min.css' %}">
            <link rel='stylesheet' href="{% static 'font-awesome/css/font-awesome.min.css' %}">
            <link rel='stylesheet' href="{% static 'pnotify/dist/pnotify.css' %}">
            <link rel='stylesheet' href="{% static 'datatables.net-se/css/dataTables.semanticui.min.css' %}">
            <link rel="stylesheet" href="{% static 'datatables.net-fixedheader-se/css/fixedHeader.semanticui.min.css' %}">
            <link rel="stylesheet" href="{% static 'datatables.net-responsive-se/css/responsive.semanticui.min.css' %}">
            <link rel="stylesheet" href="{% static 'datatables.net-scroller-se/css/scroller.semanticui.min.css' %}">

            <!-- project -->
            <link rel="stylesheet" type="text/css" href="{% static 'hijack/hijack-styles.css' %}" />
            <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
            {# <link rel="stylesheet" href="{% static 'css/style.scss' %}" type="text/x-scss" charset="utf-8" /> #}
        {% endcompress %}

        {% hijack_notification %}

    </head>

    ...
    ...

        {% compress js file gui %}
            <!-- Bower components -->
            <script type="text/javascript" src="{% static 'jquery/dist/jquery.js' %}"></script>
            <script type="text/javascript" src="{% static 'nuex_scheduler/js/utils.js' %}"></script>
            <script type="text/javascript" src="{% static 'semantic/dist/semantic.min.js' %}"></script>
            <script type="text/javascript" src="{% static 'pnotify/dist/pnotify.js' %}"></script>
            <script type="text/javascript" src="{% static 'moment/min/moment.min.js' %}"></script>
            <script type="text/javascript" src="{% static 'datatables.net/js/jquery.dataTables.min.js' %}"></script>
            <script type="text/javascript" src="{% static 'datatables.net-se/js/dataTables.semanticui.min.js' %}"></script>
            <script type="text/javascript" src="{% static 'datatables.net-fixedheader/js/dataTables.fixedHeader.min.js' %}"></script>
            <script type="text/javascript" src="{% static 'datatables.net-responsive/js/dataTables.responsive.min.js' %}"></script>
            <script type="text/javascript" src="{% static 'datatables.net-responsive-se/js/responsive.semanticui.min.js' %}"></script>
            <script type="text/javascript" src="{% static 'datatables.net-scroller/js/dataTables.scroller.min.js' %}"></script>

            <script type="text/javascript" src="{% static 'datatables_view/js/datatables_utils.js' %}"></script>
        {% endcompress %}

        {# Additional JS files in footer, right before </body> #}
        {% block extrajs %}
            {% comment %}
            <script type="text/javascript" src="{% static 'js/my_project.js' %}"></script>
            <script language="javascript">
                $( document ).ready(function() {
                });
            </script>
            {% endcomment %}
        {% endblock %}

    </body>
</html>

Interactive usage

  1. Install bower:

    sudo npm install --save -g bower

"ERR! Error: CERT_UNTRUSTED" workaround:

sudo npm install --save -g --ca=null --strict-ssl=false bower

  1. Download bower dependencies:

    python manage.py bower_install