django-systemjs 0.1

Brings SystemJS to Django staticfiles

Django SystemJS
=====================

.. image:: https://travis-ci.org/sergei-maertens/django-systemjs.svg?branch=master
:target: https://travis-ci.org/sergei-maertens/django-systemjs


.. image:: https://coveralls.io/repos/sergei-maertens/django-systemjs/badge.svg
:target: https://coveralls.io/r/sergei-maertens/django-systemjs


.. image:: https://readthedocs.org/projects/django-systemjs/badge/?version=latest
:target: https://readthedocs.org/projects/django-systemjs/?badge=latest


Django SystemJS brings the Javascript of tomorrow to Django, today.

It leverages JSPM (https://jspm.io) to do the heavy lifting for your
client side code, while keeping development flow easy and deployment
without worries. In DEBUG mode, your Javascript modules are loaded
asynchronously. In production, your app is nicely bundled via JSPM
and ties in perfectly with `django.contrib.staticfiles`.


Installation
------------
You will need to add 'systemjs' to your `INSTALLED_APPS` to be able
to use the templetag and management command.

JSPM has to be installed and configured correctly - you will need npm for
that. Refer to the JSPM installation documentation.

Some notable configuation options:

* set the base url to your `STATIC_URL`.
* set the base path to your `STATIC_ROOT`.

Usage
-----

Template tag
************

Usually, in your template you would write something like::

```
<script src="/path/to/system.js"></script>
<script src="/path/to/config.js"></script>
<script>System.import('my/awesome/app');</script>
```

With Django SystemJS you can replace this by::

```
{% load system_tags %}
<script src="/path/to/system.js"></script>
<script src="/path/to/config.js"></script>
{% system_import 'my/awesome/app' %}
```

If `SYSTEMJS_ENABLED` is `False` (default value is `not DEBUG`),
the tag will output the previous `System.import` statement. Otherwise,
it will output something like::

```
<script src="/static/SYSTEMJS/my/awesome/app.js"></script>
```

This url is generated by the configured static files backend, so if you
use the `CachedStaticFilesStorage`, all will be well.

Management command
******************

Django SystemJS comes with a management command to create all the
bundles. It does so by checking all your template files and
extracting the `{% system_import '...' %}` template tags.

```
python manage.py systemjs_bundle
```

By default it will look at all templates in your app directories, and
additionally the additional template dirs for the vanilla Django
template engine.

Example workflow
----------------
Django SystemJS is designed as a non-intrusive library in development mode,
so that it won't sit in your way to much. Simply using the template tag
will be all you have to do as long as you're running with `DEBUG=True`.

Assuming nothing is installed, what follows is an example step-by-step
to deploy your application.

Install npm dependencies from package.json. This should pull in `jspm`.
```
npm install
```

Install `jspm` dependencies from package.json
```
jspm install
```

Run collectstatic so all files can be found by the webserver. This
must be done before you run `systemjs_bundle`, because (with the
proposed `config.js`) jspm will look for the modules in `STATIC_ROOT`.
```
python manage.py collectstatic --link --noinput
```

(Re)generate the bundles
```
python manage.py systemjs_bundle
```

That's it! It should work!

Contact
-------
If you run into any issues, miss certain features or want to contribute,
the central point is the github repo: https://github.com/sergei-maertens/django-systemjs