#Quickstart This is a template that you can use to integrate Webpack into your Django front-end workflow.
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
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.
If you don't have Django set up yet, follow along with the quick setup guide below, or head to my blog post for a more detailed overview.
###Setting up the Development Environment Webpack requires NodeJS. We're not actually serving our project from Node, but we're using it to run a 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.
But for your dev environment, verify that you 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)
###Create a New Virtualenv For Django 1.9 we're going to use Python 3.
virtualenv -p python3 projectname && cd projectname
Activate the virtualenv using the command:
source bin/activate
###Install Django First install Django so that we can use django-admin.
pip install django==1.9.6
###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)
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
Test our config. This 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
- Start the node dev server by running
npm run watch - When ready to commit your changes, run
npm run buildto build a static bundle - When ready to push to production, run
npm run build-productionto create a compressed, minified version in /static/dist/ - Push to production and run
python manage.py collectstaticto apply the changes to the static files