django-manifest-loader 0.1.0

A Django app to load webpack assets.

Django Manifest Loader

Always have access to the latest webpack assets, with minimal configuration. Wraps Django's built in {% static %} templatetag to allow you to link to assets according to a webpack manifest file. Handles webpack's split chunks.

Turns this

{% load manifest %}
<script src="{% manifest 'main.js' %}" />

Into this

<script src="/static/main.8f7705adfa281590b8dd.js" />

• For an in-depth look at this package, check out this blog post here
• Quick start guide

Installation

pip install django-manifest-loader

Django Setup

# settings.py

INSTALLED_APPS = [
    ...
    'manifest_loader',  # add to installed apps
    ...
]

STATICFILES_DIRS = [
    BASE_DIR / 'dist'  # the directory webpack outputs to
]

You must add webpack's output directory to the STATICFILES_DIRS list. The above example assumes that your webpack configuration is setup to output all files into a directory dist/ that is in the BASE_DIR of your project.

BASE_DIR's default value, as set by $ djagno-admin startproject is BASE_DIR = Path(__file__).resolve().parent.parent, in general you shouldn't be modifying it.

Optional settings, default values shown.

# settings.py

MANIFEST_LOADER = {
    'output_dir': None,  # where webpack outputs to, if not set will search in STATICFILES_DIRS for the manifest. 
    'manifest_file': 'manifest.json',  # name of your manifest file
    'cache': False,  # recommended True for production, requires a server restart to pickup new values from the manifest.
}

Webpack configuration

You must install the WebpackManifestPlugin. Optionally, but recommended, is to install the CleanWebpackPlugin.

npm i --save-dev webpack-manifest-plugin clean-webpack-plugin

// webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
  ...
  plugins: [
      new CleanWebpackPlugin(),  // removes outdated assets from the output dir
      new ManifestPlugin(),  // generates the required manifest.json file
  ],
  ...
};

Usage

Django Manifest Loader comes with two template tags that house all logic. The manifest tag takes a single string input, such as 'main.js', looks it up against the webpack manifest, and then outputs the url to that compiled file. It works just like Django's built it static tag, except it's finding the correct filename.

The manifest_match tag takes two arguments, a sting to pattern match filenames against, and a string to embed matched file urls into. See the manifest_match section for more information.

Single file use (for cache busting) (manifest tag)

{% load manifest %}

<script src="{% manifest 'main.js' %}"></script>

turns into

<script src="/static/main.8f7705adfa281590b8dd.js"></script>

Where the argument to the tag will be the original filename of a file processed by webpack. If in doubt, check your manifest.json file generated by webpack to see what files are available.

The reason this is worth while is because of the content hash after the original filename, which will invalidate the browser cache every time the file is updated. This ensures that your users always have the latest assets.

Split chunks (manifest_match tag)

{% load manifest %}

{% manifest_match '*.js' '<script src="{match}"/>' %}

turns into

<script src="/static/vendors~main.3ad032adfa281590f2a21.js"/>
<script src="/static/main.8f7705adfa281590b8dd.js"/>

This tag takes two arguments, a pattern to match against, according to the rules of the python fnmatch package, and a string to input the file urls into. The second argument must contain the string {match}, as it is what is replaced with the urls.

About

At it's heart Django Manifest Loader is an extension to Django's built-in static templatetag. When you use the provided {% manifest %} templatetag, all the manifest loader is doing is taking the input string, looking it up against the manifest file, modifying the value, and then passing along the result to the {% static %} template tag. The {% manifest_match %} tag works similarly, just with a bit of additional logic to find all the necessary files and to render the output.

Suggested Project Structure

BASE_DIR
├── dist
│   ├── main.f82c02a005f7f383003c.js
│   └── manifest.json
├── frontend
│   ├── apps.py
│   ├── src
│   │   └── index.js
│   ├── templates
│   │   └── frontend
│   │       └── index.html
│   └── views.py
├── manage.py
├── package.json
├── project
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── requirements.txt
└── webpack.config.js

Cache Busting and Split Chunks (the problem this package solves)

• What is cache busting?
• The 100% correct way to split your chunks with Webpack

Tests and Code Coverage

Run unit tests and verify 100% code coverage with:

git clone https://github.com/shonin/django-manifest-loader.git
cd django-manifest-loader
pip install -e .

# run tests
python runtests.py

# check code coverage
pip install coverage
coverage run --source=manifest_loader/ runtests.py
coverage report

Contributing

Do it. Please feel free to file an issue or open a pull request. The code of conduct is basic human kindness.

License

Django Manifest Loader is distributed under the 3-clause BSD license. This is an open source license granting broad permissions to modify and redistribute the software.