Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Confident Asset Deployments with Webpack & Django

9276306717c4c0abde5f3dc85a3a68c0?s=47 Scott Burns
July 19, 2016
Technology
0
800

Confident Asset Deployments with Webpack & Django

Presented at Djangocon US 2016 on Tuesday, July 19th 2016.

9276306717c4c0abde5f3dc85a3a68c0?s=128

Scott Burns

July 19, 2016
Tweet

More Decks by Scott Burns

See All by Scott Burns
9276306717c4c0abde5f3dc85a3a68c0?s=48 sburns
1
22
9276306717c4c0abde5f3dc85a3a68c0?s=48 sburns
0
190
9276306717c4c0abde5f3dc85a3a68c0?s=48 sburns
0
71
9276306717c4c0abde5f3dc85a3a68c0?s=48 sburns
1
320
9276306717c4c0abde5f3dc85a3a68c0?s=48 sburns
0
96

Other Decks in Technology

See All in Technology
4e842bca931f66f9cf29b3fdbd2cc4d8?s=48 kamijin_fanta
0
110
7d065deebd80754be06ba6d71049f1be?s=48 apcom
1
450
19fc8f6113c5c3d86e6176362ff29479?s=48 kanaugust
PRO
0
120
11d5350db3f389d0f5749b91ee11a916?s=48 indigo13love
2
560
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
0
130
34d5dd227dad6526e026f43b42b269b6?s=48 kekeke_47
0
460
766b9aeb2d2ff4cb74afc122b77a59fa?s=48 iwask
1
190
82e639895a3a645ab676ea20d8d8dbbf?s=48 sho7650
0
300
D9e65f4b0af059ae9ba243c8c2265e4f?s=48 pohjus
1
2.1k
Cb88f765dd38cd942c39aacb5abbea06?s=48 ufoo68
0
110
24606216ae4bbee28494552cb71cc220?s=48 yosshi_
3
370
1896b034326abb4bc429d6718dc6a42e?s=48 shomaekawa
3
1.3k

Featured

See All Featured
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
19
810
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
87
3.9k
245cee81a9c424266e5e401d844ea881?s=48 lara
16
2.6k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
12k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
587
200k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
220
120k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
13
650
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
267
17k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
101
5.9k
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.5k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
13
4.2k

Transcript

  1. CONFIDENT ASSET DEPLOYMENTS WITH WEBPACK & DJANGO SCOTT BURNS (@SCOTTSBURNS)

    DJANGOCON US 2016 #CONFIDENT-DEPLOYS

  2. SHHH, I HAVE A SECRET @scottsburns Confident Asset Deployments

  3. OWAIS LONE GITHUB.COM/OWAIS

  4. ̣ PHILOSOPHY ̣ SPECIFICS ̣ PHILOSOPHY @scottsburns Confident Asset Deployments

  5. CONFIDENT ASSET DEPLOYMENTS? @scottsburns Confident Asset Deployments

  6. DEPLOYMENTS Confident Asset Deployments @scottsburns

  7. ̣CHANGES ̣FEATURES ̣FIXES Confident Asset Deployments @scottsburns

  8. ASSET @scottsburns Confident Asset Deployments

  9. ̣JAVASCRIPT ̣CSS ̣IMAGES @scottsburns Confident Asset Deployments

  10. CONFIDENT @scottsburns Confident Asset Deployments

  11. ̣EASY TO BEGIN ̣REVERSIBLE ̣FAST @scottsburns Confident Asset Deployments

  12. ̣AUTOMATED ̣FEW 3RD PARTIES ̣TESTED @scottsburns Confident Asset Deployments

  13. WHY NOW? Confident Asset Deployments @scottsburns

  14. TOOLCHAINS HAVE IMPROVED Confident Asset Deployments @scottsburns

  15. COMMUNITIES MOVE AT DIFFERENT SPEEDS Confident Asset Deployments @scottsburns

  16. BUILD BRIDGES, NOT WRAPPERS Confident Asset Deployments @scottsburns

  17. CODE PLEASE Confident Asset Deployments @scottsburns

  18. WEBPACK? Confident Asset Deployments @scottsburns

  19. Confident Asset Deployments @scottsburns https://webpack.github.io/ WEBPACK

  20. $ npm install -s -g \ webpack \ webpack-bundle-tracker Confident

    Asset Deployments @scottsburns INSTALLATION

  21. 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", },...

  22. WEBPACK.CONFIG.JS Confident Asset Deployments @scottsburns ... plugins: [ new BundleTracker(

    {filename: ‘./webpack-stats.json’}), ], module: { loaders: […] // not enough time :( }, }

  23. $ webpack —-config \ webpack.config.js Confident Asset Deployments @scottsburns BUILD

    THE BUNDLE

  24. { “status":"done", “chunks”: { “app”: [{ “name": "app-1234567890.js", “path”: “/app/static/bundles/

    app-1234567890.js”} ] } } Confident Asset Deployments @scottsburns WEBPACK-STATS.JSON

  25. Confident Asset Deployments @scottsburns

  26. 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

  27. <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

  28. $ pip install \ django-webpack-loader Confident Asset Deployments @scottsburns

  29. ... STATICFILES_DIRS = ( ‘static’, ) ... Confident Asset Deployments

    @scottsburns SETTINGS.PY

  30. ... WEBPACK_LOADER = { 'BUNDLE_DIR_NAME': 'bundles/', ‘STATS_FILE': 'webpack-stats.json', } ...

    Confident Asset Deployments @scottsburns SETTINGS.PY

  31. ... INSTALLED_APPS = ( ... ‘webpack_loader', ... ) ... Confident

    Asset Deployments @scottsburns SETTINGS.PY

  32. {% load render_bundle from webpack_loader %} <head> ... </head> <body>

    <div id="root">...</div> {% render_bundle ‘main' %} </body> Confident Asset Deployments @scottsburns INDEX.HTML

  33. <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

  34. Confident Asset Deployments WEBPACK-STATS.JSON INDEX.HTML APP-1234567890.JS @scottsburns

  35. Confident Asset Deployments WEBPACK-STATS.JSON INDEX.HTML APP-0987654321.JS @scottsburns

  36. DON’T SERVE ASSETS FROM DJANGO Confident Asset Deployments @scottsburns

  37. WHY NOT (PURE) STATICFILES? Confident Asset Deployments @scottsburns

  38. ̣PRODUCTION ENV ̣SLOW ̣POST-PROCESSORS @scottsburns Confident Asset Deployments

  39. SEPARATE THE CONCERNS Confident Asset Deployments @scottsburns

  40. FRONT-END DEVS WILL ❤ YOU Confident Asset Deployments @scottsburns

  41. (DEV)OPS WILL ❤ YOU Confident Asset Deployments @scottsburns

  42. NEW DEVS WILL ❤ YOU Confident Asset Deployments @scottsburns

  43. ̣BUILD ̣DEPLOY ̣REPEAT @scottsburns Confident Asset Deployments

  44. THANK YOU ❤ @scottsburns Confident Asset Deployments