Confident Asset Deployments with Webpack & Django

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

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