Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Confident Asset Deployments with Webpack & Django
Search
Scott Burns
July 19, 2016
Technology
0
1.3k
Confident Asset Deployments with Webpack & Django
Presented at Djangocon US 2016 on Tuesday, July 19th 2016.
Scott Burns
July 19, 2016
Tweet
Share
More Decks by Scott Burns
See All by Scott Burns
Learning From the Pros: Modern Data Management for Clinicians and Scientists
sburns
1
43
An Introduction to Channels
sburns
0
240
Empathy-as-a-Service
sburns
0
100
Improving Research With Advanced REDCap Interfaces
sburns
1
670
ROSIE: Automated Image Processing Infrastructure
sburns
0
150
Other Decks in Technology
See All in Technology
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
1k
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
690
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
240
Wasmのエコシステムを使った ツール作成方法
askua
0
100
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
170
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
170
extension 現場で使えるXcodeショートカット一覧
ktombow
0
220
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
450
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
2
210
AWS IoT 超入門 2025
hattori
0
270
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
Featured
See All Featured
Writing Fast Ruby
sferik
629
62k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
A designer walks into a library…
pauljervisheath
209
24k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Cult of Friendly URLs
andyhume
79
6.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Why Our Code Smells
bkeepers
PRO
339
57k
GitHub's CSS Performance
jonrohan
1032
470k
How GitHub (no longer) Works
holman
315
140k
Transcript
CONFIDENT ASSET DEPLOYMENTS WITH WEBPACK & DJANGO SCOTT BURNS (@SCOTTSBURNS)
DJANGOCON US 2016 #CONFIDENT-DEPLOYS
SHHH, I HAVE A SECRET @scottsburns Confident Asset Deployments
OWAIS LONE GITHUB.COM/OWAIS
̣ PHILOSOPHY ̣ SPECIFICS ̣ PHILOSOPHY @scottsburns Confident Asset Deployments
CONFIDENT ASSET DEPLOYMENTS? @scottsburns Confident Asset Deployments
DEPLOYMENTS Confident Asset Deployments @scottsburns
̣CHANGES ̣FEATURES ̣FIXES Confident Asset Deployments @scottsburns
ASSET @scottsburns Confident Asset Deployments
̣JAVASCRIPT ̣CSS ̣IMAGES @scottsburns Confident Asset Deployments
CONFIDENT @scottsburns Confident Asset Deployments
̣EASY TO BEGIN ̣REVERSIBLE ̣FAST @scottsburns Confident Asset Deployments
̣AUTOMATED ̣FEW 3RD PARTIES ̣TESTED @scottsburns Confident Asset Deployments
WHY NOW? Confident Asset Deployments @scottsburns
TOOLCHAINS HAVE IMPROVED Confident Asset Deployments @scottsburns
COMMUNITIES MOVE AT DIFFERENT SPEEDS Confident Asset Deployments @scottsburns
BUILD BRIDGES, NOT WRAPPERS Confident Asset Deployments @scottsburns
CODE PLEASE Confident Asset Deployments @scottsburns
WEBPACK? Confident Asset Deployments @scottsburns
Confident Asset Deployments @scottsburns https://webpack.github.io/ WEBPACK
$ npm install -s -g \ webpack \ webpack-bundle-tracker Confident
Asset Deployments @scottsburns INSTALLATION
WEBPACK.CONFIG.JS Confident Asset Deployments @scottsburns var path = require("path") var
webpack = require('webpack') var BundleTracker = require('webpack-bundle-tracker') module.exports = { entry: { app: ’./static/index.js’ }, output: { path: path.resolve('./static/bundles/'), filename: "[name]-[hash].js", },...
WEBPACK.CONFIG.JS Confident Asset Deployments @scottsburns ... plugins: [ new BundleTracker(
{filename: ‘./webpack-stats.json’}), ], module: { loaders: […] // not enough time :( }, }
$ webpack —-config \ webpack.config.js Confident Asset Deployments @scottsburns BUILD
THE BUNDLE
{ “status":"done", “chunks”: { “app”: [{ “name": "app-1234567890.js", “path”: “/app/static/bundles/
app-1234567890.js”} ] } } Confident Asset Deployments @scottsburns WEBPACK-STATS.JSON
Confident Asset Deployments @scottsburns
app/ ├─ manage.py ├─ webpack.config.js ├─ webpack-stats.json ├─ static │
├─ index.js │ └─ bundles/ # git ignore │ └─ app-1234567890.js └─ app/ └─ urls.py, app.wsgi, etc… Confident Asset Deployments @scottsburns STRUCTURE
<head> ... </head> <body> <div id="root">...</div> <script src=“{% static ‘bundles/app-1234567890.js’
%}” type=“text/javascript” charset=“utf-8”> </body> Confident Asset Deployments @scottsburns INDEX.HTML
$ pip install \ django-webpack-loader Confident Asset Deployments @scottsburns
... STATICFILES_DIRS = ( ‘static’, ) ... Confident Asset Deployments
@scottsburns SETTINGS.PY
... WEBPACK_LOADER = { 'BUNDLE_DIR_NAME': 'bundles/', ‘STATS_FILE': 'webpack-stats.json', } ...
Confident Asset Deployments @scottsburns SETTINGS.PY
... INSTALLED_APPS = ( ... ‘webpack_loader', ... ) ... Confident
Asset Deployments @scottsburns SETTINGS.PY
{% load render_bundle from webpack_loader %} <head> ... </head> <body>
<div id="root">...</div> {% render_bundle ‘main' %} </body> Confident Asset Deployments @scottsburns INDEX.HTML
<head> ... </head> <body> <div id="root">...</div> <script src="/static/bundles/app-1234567890.js" type="text/javascript" charset=“utf-8">
</body> Confident Asset Deployments @scottsburns (RENDERED) INDEX.HTML
Confident Asset Deployments WEBPACK-STATS.JSON INDEX.HTML APP-1234567890.JS @scottsburns
Confident Asset Deployments WEBPACK-STATS.JSON INDEX.HTML APP-0987654321.JS @scottsburns
DON’T SERVE ASSETS FROM DJANGO Confident Asset Deployments @scottsburns
WHY NOT (PURE) STATICFILES? Confident Asset Deployments @scottsburns
̣PRODUCTION ENV ̣SLOW ̣POST-PROCESSORS @scottsburns Confident Asset Deployments
SEPARATE THE CONCERNS Confident Asset Deployments @scottsburns
FRONT-END DEVS WILL ❤ YOU Confident Asset Deployments @scottsburns
(DEV)OPS WILL ❤ YOU Confident Asset Deployments @scottsburns
NEW DEVS WILL ❤ YOU Confident Asset Deployments @scottsburns
̣BUILD ̣DEPLOY ̣REPEAT @scottsburns Confident Asset Deployments
THANK YOU ❤ @scottsburns Confident Asset Deployments