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.
should yield > v4.2.2
should yield > 2.14.7
should yeild > 13.1.0
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:
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.
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:
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.
Create an Initial Bundle
To test our config we can run the build script which should create
npm run build
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.
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
- 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