Confident Asset Deployments with Webpack & Django

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

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

Want more?

9276306717c4c0abde5f3dc85a3a68c0?s=48 sburns
1
22
9276306717c4c0abde5f3dc85a3a68c0?s=48 sburns
0
190
9276306717c4c0abde5f3dc85a3a68c0?s=48 sburns
0
71
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
11
590
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
2
300
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
200
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
6
380
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
7
230
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
320
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
610
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
180
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
260

Transcript

  1. 1.

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

    DJANGOCON US 2016 #CONFIDENT-DEPLOYS
  2. 2.

    SHHH, I HAVE A SECRET @scottsburns Confident Asset Deployments

  3. 3.

    OWAIS LONE GITHUB.COM/OWAIS

  4. 4.

    ̣ PHILOSOPHY ̣ SPECIFICS ̣ PHILOSOPHY @scottsburns Confident Asset Deployments

  5. 5.

    CONFIDENT ASSET DEPLOYMENTS? @scottsburns Confident Asset Deployments

  6. 6.

    DEPLOYMENTS Confident Asset Deployments @scottsburns

  7. 7.

    ̣CHANGES ̣FEATURES ̣FIXES Confident Asset Deployments @scottsburns

  8. 8.

    ASSET @scottsburns Confident Asset Deployments

  9. 9.

    ̣JAVASCRIPT ̣CSS ̣IMAGES @scottsburns Confident Asset Deployments

  10. 10.

    CONFIDENT @scottsburns Confident Asset Deployments

  11. 11.

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

  12. 12.

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

  13. 13.

    WHY NOW? Confident Asset Deployments @scottsburns

  14. 14.

    TOOLCHAINS HAVE IMPROVED Confident Asset Deployments @scottsburns

  15. 15.

    COMMUNITIES MOVE AT DIFFERENT SPEEDS Confident Asset Deployments @scottsburns

  16. 16.

    BUILD BRIDGES, NOT WRAPPERS Confident Asset Deployments @scottsburns

  17. 17.

    CODE PLEASE Confident Asset Deployments @scottsburns

  18. 18.

    WEBPACK? Confident Asset Deployments @scottsburns

  19. 19.

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

  20. 20.

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

    Asset Deployments @scottsburns INSTALLATION
  21. 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. 22.

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

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

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

    THE BUNDLE
  24. 24.

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

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

    Confident Asset Deployments @scottsburns

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

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

  29. 29.

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

    @scottsburns SETTINGS.PY
  30. 30.

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

    Confident Asset Deployments @scottsburns SETTINGS.PY
  31. 31.

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

    Asset Deployments @scottsburns SETTINGS.PY
  32. 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. 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. 34.

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

  35. 35.

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

  36. 36.

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

  37. 37.

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

  38. 38.

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

  39. 39.

    SEPARATE THE CONCERNS Confident Asset Deployments @scottsburns

  40. 40.

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

  41. 41.

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

  42. 42.

    NEW DEVS WILL ❤ YOU Confident Asset Deployments @scottsburns

  43. 43.

    ̣BUILD ̣DEPLOY ̣REPEAT @scottsburns Confident Asset Deployments

  44. 44.

    THANK YOU ❤ @scottsburns Confident Asset Deployments