Quickstart

This is a template that you can use to integrate Webpack into your Django front-end workflow. See my article for more details

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

Choose your Python version according to the version of Django. See Django's (documentation)[https://docs.djangoproject.com/en/1.10/faq/install/] for details. I chose Python3 but you can also use Python 2.7.

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:

• What is Webpack: An overview of Webpack
• Webpack with Django: A detailed overview of the nuts-and-bolts of using Django with Webpack. By Owais Lone.

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
GG

DJANGO_SETTINGS_MODULE="projectname.config.settings_development"
export DJANGO_SETTINGS_MODULE

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 0.0.0.0:3000

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:http://127.0.0.1:8000/

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