#Quickstart 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/](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 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:
- 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
- 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