Confident Asset Deployments with Webpack & Django

CONFIDENT ASSET DEPLOYMENTS WITH WEBPACK & DJANGO SCOTT BURNS (@SCOTTSBURNS)
DJANGOCON US 2016 #CONFIDENT-DEPLOYS

SHHH, I HAVE A SECRET @scottsburns Conﬁdent Asset Deployments

OWAIS LONE GITHUB.COM/OWAIS

̣ PHILOSOPHY ̣ SPECIFICS ̣ PHILOSOPHY @scottsburns Conﬁdent Asset Deployments

CONFIDENT ASSET DEPLOYMENTS? @scottsburns Conﬁdent Asset Deployments

DEPLOYMENTS Conﬁdent Asset Deployments @scottsburns

̣CHANGES ̣FEATURES ̣FIXES Conﬁdent Asset Deployments @scottsburns

ASSET @scottsburns Conﬁdent Asset Deployments

̣JAVASCRIPT ̣CSS ̣IMAGES @scottsburns Conﬁdent Asset Deployments

CONFIDENT @scottsburns Conﬁdent Asset Deployments

̣EASY TO BEGIN ̣REVERSIBLE ̣FAST @scottsburns Conﬁdent Asset Deployments

̣AUTOMATED ̣FEW 3RD PARTIES ̣TESTED @scottsburns Conﬁdent Asset Deployments

WHY NOW? Conﬁdent Asset Deployments @scottsburns

TOOLCHAINS HAVE IMPROVED Conﬁdent Asset Deployments @scottsburns

COMMUNITIES MOVE AT DIFFERENT SPEEDS Conﬁdent Asset Deployments @scottsburns

BUILD BRIDGES, NOT WRAPPERS Conﬁdent Asset Deployments @scottsburns

CODE PLEASE Conﬁdent Asset Deployments @scottsburns

WEBPACK? Conﬁdent Asset Deployments @scottsburns

Conﬁdent Asset Deployments @scottsburns https://webpack.github.io/ WEBPACK

$ npm install -s -g \ webpack \ webpack-bundle-tracker Conﬁdent
Asset Deployments @scottsburns INSTALLATION

WEBPACK.CONFIG.JS Conﬁdent 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 Conﬁdent Asset Deployments @scottsburns ... plugins: [ new BundleTracker(
{filename: ‘./webpack-stats.json’}), ], module: { loaders: […] // not enough time :( }, }

$ webpack —-config \ webpack.config.js Conﬁdent Asset Deployments @scottsburns BUILD
THE BUNDLE

{ “status":"done", “chunks”: { “app”: [{ “name": "app-1234567890.js", “path”: “/app/static/bundles/
app-1234567890.js”} ] } } Conﬁdent Asset Deployments @scottsburns WEBPACK-STATS.JSON

Conﬁdent 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… Conﬁdent 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> Conﬁdent Asset Deployments @scottsburns INDEX.HTML

$ pip install \ django-webpack-loader Conﬁdent Asset Deployments @scottsburns

... STATICFILES_DIRS = ( ‘static’, ) ... Conﬁdent Asset Deployments
@scottsburns SETTINGS.PY

... WEBPACK_LOADER = { 'BUNDLE_DIR_NAME': 'bundles/', ‘STATS_FILE': 'webpack-stats.json', } ...
Conﬁdent Asset Deployments @scottsburns SETTINGS.PY

... INSTALLED_APPS = ( ... ‘webpack_loader', ... ) ... Conﬁdent
Asset Deployments @scottsburns SETTINGS.PY

{% load render_bundle from webpack_loader %} <head> ... </head> <body>
<div id="root">...</div> {% render_bundle ‘main' %} </body> Conﬁdent 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> Conﬁdent Asset Deployments @scottsburns (RENDERED) INDEX.HTML

Conﬁdent Asset Deployments WEBPACK-STATS.JSON INDEX.HTML APP-1234567890.JS @scottsburns

Conﬁdent Asset Deployments WEBPACK-STATS.JSON INDEX.HTML APP-0987654321.JS @scottsburns

DON’T SERVE ASSETS FROM DJANGO Conﬁdent Asset Deployments @scottsburns

WHY NOT (PURE) STATICFILES? Conﬁdent Asset Deployments @scottsburns

̣PRODUCTION ENV ̣SLOW ̣POST-PROCESSORS @scottsburns Conﬁdent Asset Deployments

SEPARATE THE CONCERNS Conﬁdent Asset Deployments @scottsburns

FRONT-END DEVS WILL ❤ YOU Conﬁdent Asset Deployments @scottsburns

(DEV)OPS WILL ❤ YOU Conﬁdent Asset Deployments @scottsburns

NEW DEVS WILL ❤ YOU Conﬁdent Asset Deployments @scottsburns

̣BUILD ̣DEPLOY ̣REPEAT @scottsburns Conﬁdent Asset Deployments

THANK YOU ❤ @scottsburns Conﬁdent Asset Deployments

Confident Asset Deployments with Webpack & Django

Confident Asset Deployments with Webpack & Django

More Decks by Scott Burns

Other Decks in Technology

Featured

Transcript