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

Confident Asset Deployments with Webpack & Django

Confident Asset Deployments with Webpack & Django

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

Scott Burns

July 19, 2016
Tweet

More Decks by Scott Burns

Other Decks in Technology

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