generator-dmndjango

Built for pairing Django with client-side frameworks like Backbone and React, this Yeoman generator creates a gulp and browserify-based staticapp for transpiling, bundling, and rendering scss, js and responsive image sets into the static files directory of a Django app. It is designed to work with our django-project-template, but can be used in any standard Django app.

Installation

Requires the same dependencies used in generator-dmninteractives, namely:

$ npm install -g gulp
$ npm install -g yo
$ npm install -g generator-dmndjango

As well as ImageMagik for image processing:

# Mac
brew install imagemagick
# Ubuntu/Linux
apt-get install imagemagick

Generating the staticapp

If you're using our django-project-template, your app will contain an empty staticapp directory. If not, create one at the root of your Django app.

Move into the staticapp directory then generate the app:

$ yo dmndjango

The generator will ask for the app's name and for which module pattern you'd like to use, which will determine which subgenerator builds the app. (Currently supports CommonJS and ES6.)

CommonJS for Backbone/Marionette apps

The CommonJS subgenerator produces an app pre-architected for use with Backbone/Marionette apps.

ES6 for React/Redux apps

The ES6 subgenerator includes browserify JSX and ES6 babel transforms for use with React/Redux apps. It also includes starter files with useful boilerplate and airbnb's eslint configuration to keep your code squeaky clean.

Note: If you're using Atom's linter-eslint, you will experience errors if your editor is not opened at the staticapp root directory. Open a second project folder at the staticapp root while developing to get around the issue.

Using the staticapp

The staticapp presumes your Django app's static directory is structured like this:

your_app/
  static/
    your_app/
      js/
      css/
      img/

After the staticapp is installed, you can simply run gulp in its root directory while developing your Django project. Any changes made to javascript and scss files will be automatically rendered into your app's local static file directory. Images must be processed explicitly.

$ gulp

JS

The ES6 and CommonJS patterns bundle any javascript files prefixed with main-, allowing you to create multiple bundles for different Django views.

To uglify scripts in ES6, run:

gulp --production

SCSS

The staticapp offers support for SCSS, only.

IMG

Images must be processed explicitly by running:

$ gulp img

License

MIT © Jon McClure