How to Webpack your Django!

How to Webpack
your Django!
David Gibbons
PyCon Ireland, October 2019

About Me
Many time PyCon Ireland attendee (many t-shirts! 👕👕), 1st time PyCon
speaker
Working with Python (and JavaScript) for over seven years 🐍
Software engineer at OpenApp, creating bespoke Web applications
Server and client-side Web development
2
@davgibbs
@davgibbs

About OpenApp
Founded in 2002, 45 staff employed
Web applications for industries such as Healthcare and Postal. Patient registries,
health data analytics
Always interested in interesting CVs (Software engineers, Project managers, QA
and test automation, etc). hr@openapp.ie
Recent greenﬁeld project, an address cleaning application
Decided on Vue.js and webpack - origin of this talk
3

About Talk
Django (without webpack)
Webpack introduction
Integration of webpack into Django
Added webpack extras
4

Talk goals
1. Webpack worth learning
The latest JavaScript features can improve your application
2. Straightforward to incorporate into Django
Simple architecture works for local development and production
5

Django
A high-level Python Web framework that encourages rapid development and
clean pragmatic design
MTV separation with models-template-views architecture
● Models deﬁne what is created in database
● Templates contain presentation logic
● Views contain business logic
Django static (eg js, css, images) stored in static ﬁle directories and referenced
in HTML Template code.
9

Example application
Small example application:
PyCon Ireland 2019 theme: “Environment”.
Django API provides a random “Environment” related quote.
Result: Request and display quote and corresponding author.
10

11
Models and views for Django API.
HTML template references
frontend ﬁles
A frontend directory with static (js,
css, images)

Models
Store the quote text and the author
12
from django.db import models
class Quote(models.Model):
text = models.CharField(max_length=1000, help_text="The quote text")
author = models.CharField(max_length=100, help_text="The quote author")

Django ﬁxtures
Fixture ﬁle environment.json contains a list of famous environment quotes
13
{
"model": "quotes.Quote",
"pk": 1,
"fields": {
"text": "The Earth is what we all have in common.",
"author": "Wendell Berry"
}
},

Send request to URL “/random-quote” to get a random Environment quote
Views
14
from django.http import JsonResponse
from django.forms.models import model_to_dict
from .models import Quote
def random_quote(request):
quote = Quote.objects.order_by('?').first()
return JsonResponse(model_to_dict(quote))

15
{% load static %}
<html>
<head>
<link rel="stylesheet" href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
<div id="app">
<div><img src="{% static 'img/environment.png' %}" height="200px"></div>
<div><h1>Environment Random Quote</h1></div>
<div class="quote">
<div><p>[[ quoteText ]]</p></div>
<div><p>- <i>[[ quoteAuthor ]]</i></p></div>
</div>
<div><button class="btn btn-clear button" @click="getQuote()">Next</button></div>
</div>
<script src="{% static 'vue/dist/vue.min.js' %}"></script>
<script src="{% static 'js/script.js' %}"></script>
</body>
</html>

16
{% load static %}
<html>
<head>
</head>
<body>
<div id="app">
<div class="quote">
</div>
</div>
</body>
</html>

17
{% load static %}
<html>
<head>
</head>
<body>
<div id="app">
<div class="quote">
</div>
</div>
</body>
</html>

That is great, my Web application is working.
20
So why do I need this webpack?

Missing frontend requirements
● On production, minified JavaScript code with any comments removed
● Unique hash in file names to let browser cache know file updated
● On development, page refresh on code change while retaining state
● Code splitting so that only minimal code downloaded to browser
21

Static module bundler for modern JavaScript
Initial release in 2012. Currently version 4.
Pete Hunt spoke at OSCON 2014 on how Instagram use webpack.
Can add/remove functionality as you need it
Enter webpack
23
“Best asset manager is webpack“
~ PyCon 2019 talk by Django co-creator Jacob Kaplan-Moss

webpack
webpack.config.js contains all config needed.
Configure webpack for your specific needs: React.js, Vue.js, etc.
Contains information on the mode, input and output along with any plugins or
loaders used.
24
npm install webpack webpack-cli

webpack
Webpack bundles modules with dependencies into ﬁles for browser.
25

Webpack.config.js - core concepts
1. mode: “development” or “production” enables the built-in optimizations
2. entry: this is the file(s) which is the starting point for webpack
3. output: this configuration is the place where webpack will place the bundles
26
mode: 'production',
entry: { app: './apps/frontend/js/index.js'},
output: { filename: '[name].[hash].bundle.js',
path: __dirname + '/apps/frontend/dist/',
publicPath: '/static/dist/' },

Webpack.conﬁg.js - core concepts
4. plugins: are used for wide range of tasks such as asset management
5. loaders: allow processing of other types of ﬁles. (css, etc)
27
plugins: [new VueLoaderPlugin()],
module: {rules: [
{ test: /.css$/, use: ['style-loader', 'css-loader']},
{ test: /.vue$/, use: 'vue-loader'},
{ test: /.*.(png|jpe?g)$/, use: 'file-loader'}]}

28
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'production',
entry: { app: './apps/frontend/js/index.js'},
output: { filename: '[name].[hash].bundle.js',
path: __dirname + '/apps/frontend/dist/',
publicPath: '/static/dist/' },
plugins: [
new VueLoaderPlugin(),
],
module: {rules: [
{ test: /.css$/, use: ['style-loader', 'css-loader']},
{ test: /.vue$/, use: 'vue-loader'},
{ test: /.*.(png|jpe?g)$/, use: 'file-loader'},],},
};
Additional
requires
Additional
plugins
Additional
loaders

Update Vue.js code
Webpack also enables the use of Single File Components (SFCs) in vue.js
Really useful as the project expands to create reusable and isolated components
Create new ﬁle App.vue. html, javascript and css for app in one ﬁle. File index.js
is entry point to App.vue.
29

30
NPM scripts: build command
In package.json “scripts” section add a line for “build” command:
scripts: {"build": "webpack"}

● On production, minified JavaScript code with any comments removed
● Unique hash in file names to let browser cache know file updated
31

Library to transparently use webpack with django
Metadata file, produced by webpack plugin, tells Django where the generated
files are located.
33
Enter “django-webpack-loader”
“One of the core principles of django-webpack-loader is to not manage webpack
itself in order to give you the flexibility to run webpack the way you want.“
~ django-webpack-loader documentation

34
Update JavaScript side
const BundleTracker = require('webpack-bundle-tracker');]
plugins: [
<other plugins>...
new BundleTracker({filename: './apps/webpack-stats.json'}),
]
1. npm install webpack-bundle-tracker
2. Add BundleTracker to webpack.conﬁg.js which will write to ﬁle on build

1. pip install django-webpack-loader
2. Update Django’s settings.py
a. Add “webpack_loader” to INSTALLED_APPS
b. Add in a section WEBPACK_LOADER:
3. Use “render_bundle” template tag rather then “static” in templates. This
links to the ﬁles generated in dist/ directory
35
Update Django side
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'dist/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json')}}

Integrated!
npm run build is run first to create the bundles
● Bundles in “dist” directory. webpack-stats.json contains the filenames
python manager.py runserver follows to run Django
● Django template will include the bundled files from webpack
36

● On production, minified JavaScript code with any comments removed -> Set
the mode to ‘production’
● Unique hash in file names to let browser cache know file updated -> Include
unique hash in each filename
● On development, page refresh on code change while retaining state
● Code splitting so that only minimal code downloaded to browser
38

Extra webpack configuration
40
The following additional configurations can be added as needed:
Eslint, Babel, clean old bundles plugin, bundle analyzer plugin, …
Chosen extras:
1. Webpack-dev-server: Hot-reload for local development
2. Code splitting: define multiple entry points to avoid downloading the same
code to the browser twice

Webpack-dev-server
On a code change, re-run build and update Browser display for quicker
development.
Webpack-dev-server runs in one terminal tab and Django development server in
another tab.
41
webpack-dev-server
Save to File
system
Watch for
changes
Update
display
Browser

Webpack-dev-server
Hot reload to refresh page the part of the page that has changed.
npm install webpack-dev-server webpack-merge
Add a 2nd entry to the “scripts” section of package.json:
42
scripts: {"build": "webpack"
"start": "webpack-dev-server --config webpack.dev.js"}

Webpack-dev-server
43
Add new config webpack.dev.js for development specific config
const merge = require('webpack-merge');
const common = require('./webpack.config.js');
module.exports = merge(common, {
mode: 'development',
output: {publicPath: 'http://localhost:3000/static/dist/'},
devServer: {
port: 3000,
hot: true,
headers: {'Access-Control-Allow-Origin': '*'}}
});

Code Splitting
Powerful webpack feature to split code into various bundles which can then be
loaded on demand or in parallel to help improve page load time.
44

Code Splitting
Prevent Duplication: Split out “vendor” code so when a new entry point is added,
no need for browser to re-download vendor (Vue.js, bootstrap).
Separate “render_bundle” call in HTML template for “vendor” bundle
45
optimization: {
splitChunks: {
cacheGroups: { commons: {
test: /[/]node_modules[/]/,
chunks: 'initial',
name: 'vendor'}}}},

● On production, minified JavaScript code with any comments removed -> Set
the mode to ‘production’
● Unique hash in file names to let browser cache know file updated -> Include
hash in each filename
● On development, page refresh on code change while retaining state -> add
webpack-dev-server with configuration to watch source files
● Code splitting so that only minimal code downloaded to browser -> make
use of optimisation in webpack to split files
46

Talk Summary
Webpack is a tool for modern JavaScript development, handles different file
types of static files to produce bundles.
Example application which uses webpack to bundle static files and incorporated
into Django with django-webpack-loader.
Once basic webpack configuration is in place, it is easy to add functionality as
needed.
Tried-and-tested way to webpack your Django!
48

Thank you for listening!
49
Any Questions?

Links
Code from this talk: https://github.com/davgibbs/quotes-display
Django static ﬁles: https://docs.djangoproject.com/en/2.2/howto/static-ﬁles/
Webpack documentation: https://webpack.js.org/concepts/
Homepage for django-webpack-loader:
https://github.com/owais/django-webpack-loader
50

How to Webpack your Django!

Recommended

Recommended

More Related Content

Similar to How to Webpack your Django!

Similar to How to Webpack your Django! (20)

Recently uploaded

Recently uploaded (20)

How to Webpack your Django!