A template that provides a project structure and workflow for building your Django project's front end with Webpack
JavaScript HTML Python CSS
Latest commit 95646ba Nov 7, 2016 John Faithorn update readme
Failed to load latest commit information.
project_name added changes to readme Nov 1, 2016
static_src add src May 8, 2016
templates add src May 8, 2016
.gitignore alterations to the settings config, and readme fixes May 11, 2016
manage.py-tpl update manage.py python path May 9, 2016
package.json Updated package.json with current babel, tested with Django 1.10.3 an… Nov 1, 2016
requirements.txt Updated package.json with current babel, tested with Django 1.10.3 an… Nov 1, 2016



This is a template that you can use to integrate Webpack into your Django front-end workflow. http://blog.toymakerlabs.com/getting-started-with-webpack-and-django/

Development Environment Overview

Webpack requires NodeJS. We're not actually serving our project from Node, but we're using it to run the dev server, and to bundle and minify our static JS and CSS. Technically, we don't need node on our production server since we're building locally and following Django's normal collectstatic process.

Let's verify that we have Node, npm, and virtualenv installed.

node -v should yield > v4.2.2 npm -v should yield > 2.14.7 virtualenv --version should yeild > 13.1.0

Node installation
Virtualenv installation (OSX)

Start by creating a new Virtualenv

For Django 1.9 and above we're going to use Python 3. Make sure to use python3, python 2.4 will throw errors when you run an initial migration.

virtualenv -p python3 projectname && cd projectname

Activate the virtualenv using the command: source bin/activate

Install Django

Install Django so that we can use the django-admin.

pip install django

If you already have a virtualenv with django ready, you can use the Django admin to install the template with this command:

django-admin startproject projectname --template=https://github.com/toymakerlabs/django-webpack-scaffolding.zip --extension=js,json

Dont forget the --extension=js,json parameter. That will affect your package.json file and webpack config.

For more information on Webpack and Webpack with Django, check out these links below:

Run Startproject

The startproject command accepts a parameter called template. Replace projectname in the command with the name of your project.

django-admin startproject projectname --template=https://github.com/toymakerlabs/django-webpack-scaffolding/archive/master.zip --extension=js,json

Install Django Dependencies

Now we need to install Django dependencies, which right now is just: django-webpack-loader

cd projectname
pip install -r requirements.txt

Update the Virtualenv Activate Script

This will tell Django which environment settings file to use; production or development.

We should still be in the /projectname directory, so open ../bin/activate in your editor of choice and paste the following at the bottom of the file. (Again change projectname to the name of your project)

vim ../bin/activate

Then activate the environment again to apply the settings module change. From the projectname folder:

source ../bin/activate

Tip: Verify the value of DJANGO_SETTINGS_MODULE by echoing it in the terminal:echo $DJANGO_SETTINGS_MODULE. It should print: projectname.config.settings_development

Install Node Dependencies

Now we need to install Webpack and Webpack's supporting modules from package.json.

npm install

Create an Initial Bundle

To test our config we can run the build script which should create ./webpack-stats.json

npm run build

Start Webpack

npm run watch

If successfull the terminal should read that the dev server is running on

Run the Django Development Server

We need Webpack Dev Server to keep running for it to serve our static files. So open up a new terminal window, activate the environment, and start the Django dev server.

source ../bin/activate

Sincen Django will ouput a warning, we might as well create an initial migration first.

python manage.py migrate

Run the dev server

python manage.py runserver

Check it in the browser

Open your browser and paste:

Build a Production Version

Create a production ready bundle by running:

npm run build-production

Workflow Overview

  1. Start the node dev server by running npm run watch
  2. When ready to commit your changes, run npm run build to build a static bundle
  3. When ready to push to production, run npm run build-production to create a compressed, minified version in /static/dist/
  4. Push to production and run python manage.py collectstatic to apply the changes to the static files