Django-node-assets

The Django application that allows to install and to serve static assets via Node.js package manager infrastructure. The application exposes management command to install dependencies from your package.json and several static files finders to find files from installed node packages and exclude metadata of node packages and unwanted files when static files will be collected via Django`s collectstatic management command execution.

Features

• Avoiding vendoring static assets in your repository like jQuery plugins, Bootstrap toolkit, etc
• Avoiding mess in STATIC_ROOT through exclusion node packages` metatadata and unwanted files
• Installing dependencies by Django`s management command

Installation

$ pip install django-node-assets

Configuration

Add 'django_node_assets' to your INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    'django_node_assets',
]

Add NodeModulesFinder to STATICFILES_FINDERS:

STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'django_node_assets.finders.NodeModulesFinder',
]

Specify absolute path to the package.json file:

NODE_PACKAGE_JSON = '/var/assets/package.json'

{
    "dependencies": {
        "jquery": "^3.2.1",
        "bootstrap": "^3.3.5",
    }
}

Specify the absolute path to a directory where the nmpinstall management command will install assets:

NODE_MODULES_ROOT = '/var/assets/node_modules'

Override path to the node package manager executable (optional)

NODE_PACKAGE_MANAGER_EXECUTABLE = '/usr/local/bin/npm'

Usage

Call the nmpinstall management command to install dependencies specified in the package.json

$ python manage.py npminstall

Use Django`s static template tag to link installed assets

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}">
<!-- Some amazing markup -->
<script src="{% static 'jquery/dist/jquery.min.js' %}"></script>
<script src="{% static 'bootstrap/dist/js/bootstrap.js' %}"></script>