django-fe-manager

Manage front end dependencies in Django

Usage

Create a FE_MANAGER variable in your project settings defining the modules that can be used in your project. An example:

FE_MANAGER = {
    'bootstrap': {
        'version': '4.0.0',
        'js': ['/static/js/bootstrap.bundle.min.js'],
        'css': ['/static/css/bootstrap.css', '/static/css/custom.css'],
        'dependencies': {'jquery'}
    },
    'jquery': {
        'version': '3.2.1',
        'js': ['/static/private/js/vendors/jquery-3.2.1.min.js']
    },
    'moment': {
        'version': '2.24.0',
        'js': ['https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js']
    },
    'chartjs': {
        'version': '2.9.3',
        'js': ['https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js'],
        'dependencies': {'moment'}
    }
}

In your base view load the module, declare your dependencies, declare a dummy block at the beggining and add the css and js output tags:

{% load fe_manager %}
{% fe_manager_add_module 'bootstrap' %}
{% fe_manager_add_module 'jquery' %}
{% block fe_manager %}{% endblock fe_manager %}
<!DOCTYPE html>
<html>
<head>
    <!-- Title and other HTML code... -->
    <!-- Output CSS -->
    {% fe_manager_output_css %}
</head>
<body>
    <!-- Content and other stuff... -->
    {% block content %}{% endblock content%}
    <!-- Output JS -->
    {% fe_manager_output_js %}
</body>
</html>

Every child view can now add its dependencies in the following way...

{% extends 'base.html' %}

{% load fe_manager %}

{% block fe_manager %}
{% fe_manager_add_module 'chartjs' %}
{% endblock fe_manager %}

{% block content %}
Content here!
{% endblock content %}

The plugin will take care of dependency ordering and outputting both JS and CSS to your base template!

0.0.3

• Add some documentation

0.0.2

• Fix packaging (utils package not being included previously).

0.0.1

• Initial release on PyPi.