generator-politico-django

generator-politico-django

A Yeoman generator to scaffold a static assets development environment inside a Django app.

What it does:

• Scaffolds your development directory.
• Compiles SCSS and bundles JS written in modular ES2015 using browserify to the standard static directory for your Django app.

What you'll need installed

Make sure you have node installed as well as the yarn package manager.

Then install gulp, yeoman and this generator, globally*:

$ npm install -g gulp-cli yo generator-politico-interactives generator-politico-django

* You may need to prefix with sudo

How to use

Inside your Django app, create a fresh directory called staticapp at the root of your app and move into it:

$ mkdir staticapp
$ cd staticapp

Now run the generator and answer the questions it asks to build your dev environment.

$ yo politico-django

After the generator is finished, run gulp to start the development server.

$ gulp

Develop files in the src directory and they will be automatically compiled to the static directory of your app, assuming a structure like this:

• <app_name>/static/<app_name>/js/
• <app_name>/static/<app_name>/css/

Then you can simply use the standard static template tag to include your built assets in your Django templates:

{%load staticfiles%}
<link href="{%static '<app_name>/css/styles.css'%}" rel="stylesheet">

Javascript module naming convention

Browserify will watch for javascript files prefixed with main-*.js to bundle into modules. It will ignore all other files in the staticapp/src/js directory, but of course you can include those files in your main- scripts.

For example:

// my-sub-modules.js
modules.exports = () => {
    console.log('Hello world.');
}

// main-my-module.js
import myThing from 'my-sub-module.js';

myThing();

This helps you write more modular code.

Developing

To develop, clone this repository and use npm link to test changes locally before publishing updates.