{
"archive_path": "archive/1736957295.703285",
"base_url": "www.saaspegasus.com/guides/modern-javascript-for-django-developers",
"basename": "",
"bookmarked_date": "2025-01-15 16:08",
"canonical": {
"archive_org_path": "https://web.archive.org/web/www.saaspegasus.com/guides/modern-javascript-for-django-developers",
"dom_path": "output.html",
"favicon_path": "favicon.ico",
"git_path": "git/",
"google_favicon_path": "https://www.google.com/s2/favicons?domain=www.saaspegasus.com",
"headers_path": "headers.json",
"htmltotext_path": "htmltotext.txt",
"index_path": "index.html",
"media_path": "media/",
"mercury_path": "mercury/content.html",
"pdf_path": "output.pdf",
"readability_path": "readability/content.html",
"screenshot_path": "screenshot.png",
"singlefile_path": "singlefile.html",
"warc_path": "warc/",
"wget_path": null
},
"domain": "www.saaspegasus.com",
"downloaded_at": "2025-01-15T16:08:17.562215+00:00",
"downloaded_datestr": "2025-01-15 16:08",
"extension": "",
"hash": "14MXW0KREPKM5CY0XHS7",
"history": {
"archive_org": [
{
"cmd": [
"/usr/bin/curl",
"--silent",
"--location",
"--compressed",
"--proxy",
"socks5://tor-socks-proxy:9150",
"--head",
"--max-time",
"60",
"--user-agent",
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 ArchiveBox/{VERSION} (+https://github.com/ArchiveBox/ArchiveBox/)",
"https://web.archive.org/save/https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/"
],
"cmd_version": "8.10.1",
"end_ts": "2025-01-15T16:09:15.245556+00:00",
"index_texts": null,
"output": "ArchiveError: Failed to find \"content-location\" URL header in Archive.org response.",
"pwd": "/data/archive/1736957295.703285",
"schema": "ArchiveResult",
"start_ts": "2025-01-15T16:09:13.618011+00:00",
"status": "failed"
}
],
"dom": [
{
"cmd": [
"/usr/bin/chromium-browser",
"--proxy-server=socks5://tor-socks-proxy:9150",
"--disable-features=DarkMode",
"--run-all-compositor-stages-before-draw",
"--hide-scrollbars",
"--autoplay-policy=no-user-gesture-required",
"--no-first-run",
"--use-fake-ui-for-media-stream",
"--use-fake-device-for-media-stream",
"--simulate-outdated-no-au='Tue, 31 Dec 2099 23:59:59 GMT'",
"--headless=new",
"--no-sandbox",
"--no-zygote",
"--disable-dev-shm-usage",
"--disable-software-rasterizer",
"--disable-sync",
"--window-size=1440,2000",
"--user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 ArchiveBox/{VERSION} (+https://github.com/ArchiveBox/ArchiveBox/)",
"--user-data-dir=/data/personas/Default/chrome_profile",
"--profile-directory=Default",
"--dump-dom",
"https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/"
],
"cmd_version": "131.0.6778",
"end_ts": "2025-01-15T16:08:43.542851+00:00",
"index_texts": null,
"output": "output.html",
"pwd": "/data/archive/1736957295.703285",
"schema": "ArchiveResult",
"start_ts": "2025-01-15T16:08:26.265100+00:00",
"status": "succeeded"
}
],
"favicon": [
{
"cmd": [
"/usr/bin/curl",
"--silent",
"--location",
"--compressed",
"--proxy",
"socks5://tor-socks-proxy:9150",
"--max-time",
"60",
"--output",
"favicon.ico",
"--user-agent",
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 ArchiveBox/{VERSION} (+https://github.com/ArchiveBox/ArchiveBox/)",
"https://www.google.com/s2/favicons?domain=www.saaspegasus.com"
],
"cmd_version": "8.10.1",
"end_ts": "2025-01-15T16:08:21.251935+00:00",
"index_texts": null,
"output": "favicon.ico",
"pwd": "/data/archive/1736957295.703285",
"schema": "ArchiveResult",
"start_ts": "2025-01-15T16:08:18.137127+00:00",
"status": "succeeded"
}
],
"git": [],
"headers": [
{
"cmd": [
"/usr/bin/curl",
"--silent",
"--location",
"--compressed",
"--proxy",
"socks5://tor-socks-proxy:9150",
"--head",
"--max-time",
"60",
"--user-agent",
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 ArchiveBox/{VERSION} (+https://github.com/ArchiveBox/ArchiveBox/)",
"https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/"
],
"cmd_version": "8.10.1",
"end_ts": "2025-01-15T16:08:21.832045+00:00",
"index_texts": null,
"output": "headers.json",
"pwd": "/data/archive/1736957295.703285",
"schema": "ArchiveResult",
"start_ts": "2025-01-15T16:08:21.292335+00:00",
"status": "succeeded"
}
],
"htmltotext": [
{
"cmd": [
"(internal) archivebox.extractors.htmltotext",
"./{singlefile,dom}.html"
],
"cmd_version": "0.8.5rc51",
"end_ts": "2025-01-15T16:08:59.216600+00:00",
"index_texts": [
"Modern JavaScript for Django Developers (https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/) (/static/images/favicons/apple-touch-icon.a8ad3027f2b5.png) (/static/images/favicons/favicon-32x32.91c899b07bbc.png) (/static/images/favicons/favicon-16x16.f64cfc0ada4b.png) (/static/images/favicons/site.fdac6ff62a97.webmanifest) (/static/images/favicons/safari-pinned-tab.5387dcbb5b1e.svg) (/static/images/favicons/favicon.641c3fa8bb10.ico) (/static/css/site-base.7fd67206bd55.css) (/static/css/site-bulma.8be135ff00cf.css) (/static/css/site-tailwind.f210bd84b96c.css) (https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css) (https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/v4-shims.min.css) (/) SaaS Pegasus (/pricing/) Pricing (/guides/) Guides (/store/) Marketplace (https://docs.saaspegasus.com/) Documentation (/) (Logo) SaaS Pegasus (/pricing/) Pricing (/guides/) Guides (/store/) Marketplace (https://docs.saaspegasus.com/) Documentation (/accounts/signup/) Sign Up (/accounts/login/) Sign In Modern JavaScript for Django Developers (/guides/modern-javascript-for-django-developers/client-server-architectures/) Part 1: Organizing your Front-End Codebase in a Django Project (/guides/modern-javascript-for-django-developers/javascript-tooling/) Part 2: A Crash Course in Modern JavaScript Tooling (/guides/modern-javascript-for-django-developers/integrating-javascript-pipeline/) Part 3: Integrating a Modern JavaScript Pipeline into a Django Application (/guides/modern-javascript-for-django-developers/integrating-django-react/) Part 4: How to build a React application in a Django project (/guides/modern-javascript-for-django-developers/htmx-alpine/) Part 5: Django, HTMX and Alpine.js: Modern websites, JavaScript optional (/guides/modern-javascript-for-django-developers/apis/) Part 6: Django and OpenAPI: Front end the better way. Modern JavaScript for Django Developers Working with Django in the modern JavaScript ecosystem without giving up the things that make it great (Django + JavaScript) Last Updated: October 2022 JavaScript is the lifeblood of the modern web application .\nYou need it to do anything remotely complex on the web. And these days, if you want a modern , responsive , interactive application\u2014and who doesn't?\u2014your \nfront-end codebase may end up as large and complex as your back end. In the last decade, an entire ecosystem of tooling and frameworks has sprung up to combat the complexities of big\nJavaScript codebases.\nTools like (https://www.npmjs.com/) npm , (https://webpack.js.org/) webpack and (https://babeljs.io/) babel .\nFrameworks like (https://reactjs.org/) React , (https://vuejs.org/) Vue , (https://angular.io/) Angular , \nand (https://svelte.dev/) Svelte .\nAnd changes to the language itself, including (https://www.w3schools.com/Js/js_es6.asp) ES6 , (https://www.typescriptlang.org/) TypeScript and (https://reactjs.org/docs/introducing-jsx.html) JSX . const element = Hello, world!
; Is this JavaScript? It is (https://reactjs.org/docs/introducing-jsx.html) according to Facebook ... At the same time, a competing set of low- or no-JavaScript tools have emerged.\nLightweight frameworks like (https://alpinejs.dev/) Alpine.js and (https://htmx.org/) HTMX allow\nyou to leverage the power of JavaScript without having to write much of it yourself! Sadly, for many (https://www.djangoproject.com/) Django developers, the modern JavaScript ecosystem is intimidating. The tools feel complex. \nThere are often several ways to achieve the same goals.\nIt's hard to choose a framework\u2014and then once you do, it's hard to know exactly how to integrate it into a Django project. The result is confusion and frustration\u2014and sometimes even a general grumpiness about JavaScript itself.\nPython makes sense. Django makes sense.\nJavaScript?\nJavaScript is to be tolerated . Not enjoyed. If this sounds like you, then you've found the right place! This guide aims to remove those barriers and provide a clear, frustration-free way of doing modern JavaScript development with Django. It's the guide I wish I had when I first started bringing React\u2014and later Vue, Sass, HTMX and other front-end technologies\u2014into\nmy own Django projects.\nIt contains the knowledge I've accrued from 10+ years of working on Django projects big and small. People who will get the most value from this guide are people like me: Django developers getting up to speed on the latest in the JavaScript world. That said, any web developer looking to brush up on modern JavaScript should benefit from the early parts. The guide is broad in scope and so it's broken into several parts.\nParts 1-4 are best read together, but Part 5 can be read on its own\u2014and if you know you\ndon't want to use JavaScript you should start there! Part 1 covers our big-picture setup .\nWe'll discuss two common ways of organizing front-end code in a Django project\u2014which we'll call server-first , and client-first .\nThen we'll outline why neither of these are perfect, and learn how a hybrid architecture can help provide\nus with the best of both worlds. In Part 2 we'll shift gears to the fundamentals of modern JavaScript tooling .\nThe aim here is to demystify terms like \"yarn\", \"webpack\" and \"babel\".\nWe're not trying to present the entire JavaScript ecosystem\u2014that would be impossible \n(not to mention out of date the moment it was published)\u2014but instead provide enough practical knowledge\nto make good choices and understand Parts 3 and 4. (JS Meme) In case you hadn't noticed, things have gotten complicated in the JavaScript world in the decade since\nDjango 1.0 was released. In Part 3 we'll start putting things together\u2014setting up a JavaScript build pipeline inside a Django project. We'll use the information we learned in Part 2 to start building out the hybrid architecture from Part 1,\nand go through a few \"hello world\" examples in Django using React and Vue. In Part 4 we'll cover the real-world scenario of building hybrid React app in a Django project. We'll discuss many of the common issues that come up and offer patterns and code that help address them. And in Part 6, dive deeper into working with APIs in your front end using modern standards\nlike OpenAPI, filling in some gaps left in Part 4. Finally, in Part 5, we throw everything out the window and talk about when you might not need JavaScript at all. We'll cover two of the most popular low-JavaScript frameworks out there: Alpine.js and HTMX\u2014and you'll learn\nhow you can use them to build modern websites in a Django project without writing JavaScript at all. Up next: (/guides/modern-javascript-for-django-developers/client-server-architectures/) Part 1: Organizing your Front-End Codebase in a Django Project . \nOr view the complete series below. (Part 1) Part 1 (/guides/modern-javascript-for-django-developers/client-server-architectures/) Organizing your Front-End Codebase in a Django Project The two common ways of setting up a Django / JavaScript project\u2014understanding their advantages, shortcomings, and finding a happy middle ground. (Part 2) Part 2 (/guides/modern-javascript-for-django-developers/javascript-tooling/) A Crash Course in Modern JavaScript Tooling Demystifying npm, webpack, babel, and rest of the JavaScript tooling ecosystem so we can get down to building modern web applications. (Part 3) Part 3 (/guides/modern-javascript-for-django-developers/integrating-javascript-pipeline/) Integrating a Modern JavaScript Pipeline into a Django Application The nuts and bolts of integrating our shiny new front-end pipeline into our Django project\u2014and using it to create some simple \"Hello World\" applications with webpack, React, and Vue. (Part 4) Part 4 (/guides/modern-javascript-for-django-developers/integrating-django-react/) How to build a React application in a Django project Learning about hybrid applications by creating a single-page React app. Exploring the common issues that come up and how to solve them. (Part 5) Part 5 (/guides/modern-javascript-for-django-developers/htmx-alpine/) Django, HTMX and Alpine.js: Modern websites, JavaScript optional Building a modern front end in Django without reaching for a full-blown JavaScript framework. Choosing the right tools for the job, and bringing them into your project. (Part 6) Part 6 (/guides/modern-javascript-for-django-developers/apis/) Django and OpenAPI: Front end the better way. How to work with Django APIs and JavaScript in a way that doesn't suck. Subscribe for Updates Sign up to get notified when I publish new articles about building\n SaaS applications with Django. I don't spam and you can unsubscribe anytime. (First name) (Email address) (Page) () (Subscribe) (reCAPTCHA) Powered by (https://emailoctopus.com/?utm_source=powered_by_form&utm_medium=user_referral) EmailOctopus SaaS Pegasus \u2014 Copyright 2025 \ud83e\udd84 Built with (https://www.saaspegasus.com/) SaaS Pegasus (https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css) (recaptcha challenge expires in two minutes) "
],
"output": "htmltotext.txt",
"pwd": "/data/archive/1736957295.703285",
"schema": "ArchiveResult",
"start_ts": "2025-01-15T16:08:59.166407+00:00",
"status": "succeeded"
}
],
"media": [
{
"cmd": [
"/usr/local/bin/yt-dlp",
"--restrict-filenames",
"--trim-filenames",
"128",
"--write-description",
"--write-info-json",
"--write-annotations",
"--write-thumbnail",
"--no-call-home",
"--write-sub",
"--write-auto-subs",
"--convert-subs=srt",
"--yes-playlist",
"--continue",
"--no-abort-on-error",
"--ignore-errors",
"--geo-bypass",
"--add-metadata",
"--format=(bv*+ba/b)[filesize<=750m][filesize_approx<=?750m]/(bv*+ba/b)",
"--skip-download",
"--cache-dir=/data/yt-dlp-cache/",
"--cookies=/data/yt-dlp-cache/cookies.txt",
"--proxy=socks5://tor-socks-proxy:9150",
"--no-playlist",
"https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/"
],
"cmd_version": "2024.10.7",
"end_ts": "2025-01-15T16:09:13.314175+00:00",
"index_texts": [],
"output": "media/",
"pwd": "/data/archive/1736957295.703285",
"schema": "ArchiveResult",
"start_ts": "2025-01-15T16:09:02.883520+00:00",
"status": "succeeded"
}
],
"mercury": [
{
"cmd": [
"/home/archivebox/.npm/bin/postlight-parser",
"https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/"
],
"cmd_version": "2.2.3",
"end_ts": "2025-01-15T16:08:59.128522+00:00",
"index_texts": null,
"output": "mercury/",
"pwd": "/data/archive/1736957295.703285",
"schema": "ArchiveResult",
"start_ts": "2025-01-15T16:08:55.867204+00:00",
"status": "succeeded"
}
],
"pdf": [],
"readability": [
{
"cmd": [
"/home/archivebox/.npm/bin/readability-extractor",
"/tmp/tmp317zpkd_",
"https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/"
],
"cmd_version": "0.0.11",
"end_ts": "2025-01-15T16:08:47.073057+00:00",
"index_texts": [
"Modern JavaScript for Django Developers\n \n \n \n Working with Django in the modern JavaScript ecosystem without giving up the things that make it great\n \n \n \n \nLast Updated: October 2022\nJavaScript is the lifeblood of the modern web application.\nYou need it to do anything remotely complex on the web.\nAnd these days, if you want a modern, responsive, interactive application\u2014and who doesn't?\u2014your \nfront-end codebase may end up as large and complex as your back end.\nIn the last decade, an entire ecosystem of tooling and frameworks has sprung up to combat the complexities of big\nJavaScript codebases.\nTools like npm, webpack and babel.\nFrameworks like React, Vue, Angular, \nand Svelte.\nAnd changes to the language itself, including ES6, TypeScript\nand JSX.\nconst element = Hello, world!
;\n\nIs this JavaScript? It is according to Facebook...\n\nAt the same time, a competing set of low- or no-JavaScript tools have emerged.\nLightweight frameworks like Alpine.js and HTMX allow\nyou to leverage the power of JavaScript without having to write much of it yourself!\nSadly, for many Django developers, the modern JavaScript ecosystem is intimidating.\nThe tools feel complex. \nThere are often several ways to achieve the same goals.\nIt's hard to choose a framework\u2014and then once you do, it's hard to know exactly how to integrate it into a Django project.\nThe result is confusion and frustration\u2014and sometimes even a general grumpiness about JavaScript itself.\nPython makes sense. Django makes sense.\nJavaScript?\nJavaScript is to be tolerated. Not enjoyed.\nIf this sounds like you, then you've found the right place!\nThis guide aims to remove those barriers and provide a clear, frustration-free way of doing modern JavaScript development with Django.\nIt's the guide I wish I had when I first started bringing React\u2014and later Vue, Sass, HTMX and other front-end technologies\u2014into\nmy own Django projects.\nIt contains the knowledge I've accrued from 10+ years of working on Django projects big and small. \nPeople who will get the most value from this guide are people like me:\nDjango developers getting up to speed on the latest in the JavaScript world.\nThat said, any web developer looking to brush up on modern JavaScript should benefit from the early parts.\nThe guide is broad in scope and so it's broken into several parts.\nParts 1-4 are best read together, but Part 5 can be read on its own\u2014and if you know you\ndon't want to use JavaScript you should start there!\nPart 1 covers our big-picture setup.\nWe'll discuss two common ways of organizing front-end code in a Django project\u2014which we'll call server-first, and client-first.\nThen we'll outline why neither of these are perfect, and learn how a hybrid architecture can help provide\nus with the best of both worlds.\nIn Part 2 we'll shift gears to the fundamentals of modern JavaScript tooling.\nThe aim here is to demystify terms like \"yarn\", \"webpack\" and \"babel\".\nWe're not trying to present the entire JavaScript ecosystem\u2014that would be impossible \n(not to mention out of date the moment it was published)\u2014but instead provide enough practical knowledge\nto make good choices and understand Parts 3 and 4.\n\n\nIn case you hadn't noticed, things have gotten complicated in the JavaScript world in the decade since\nDjango 1.0 was released. \n\n\nIn Part 3 we'll start putting things together\u2014setting up a JavaScript build pipeline inside a Django project.\nWe'll use the information we learned in Part 2 to start building out the hybrid architecture from Part 1,\nand go through a few \"hello world\" examples in Django using React and Vue.\nIn Part 4 we'll cover the real-world scenario of building hybrid React app in a Django project.\nWe'll discuss many of the common issues that come up and offer patterns and code that help address them.\nAnd in Part 6, dive deeper into working with APIs in your front end using modern standards\nlike OpenAPI, filling in some gaps left in Part 4.\nFinally, in Part 5, we throw everything out the window and talk about when you might not need JavaScript at all.\nWe'll cover two of the most popular low-JavaScript frameworks out there: Alpine.js and HTMX\u2014and you'll learn\nhow you can use them to build modern websites in a Django project without writing JavaScript at all.\nUp next: Part 1: Organizing your Front-End Codebase in a Django Project. \nOr view the complete series below.\n \n \n \n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n \n\n\n \n \n Subscribe for Updates\n \n Sign up to get notified when I publish new articles about building\n SaaS applications with Django.\n \n I don't spam and you can unsubscribe anytime."
],
"output": "readability/",
"pwd": "/data/archive/1736957295.703285",
"schema": "ArchiveResult",
"start_ts": "2025-01-15T16:08:44.751477+00:00",
"status": "succeeded"
}
],
"screenshot": [],
"singlefile": [],
"title": [
{
"cmd": [
"/usr/bin/curl",
"--silent",
"--location",
"--compressed",
"--proxy",
"socks5://tor-socks-proxy:9150",
"--max-time",
"60",
"--user-agent",
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 ArchiveBox/{VERSION} (+https://github.com/ArchiveBox/ArchiveBox/)",
"https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/"
],
"cmd_version": "8.10.1",
"end_ts": "2025-01-15T16:08:43.817879+00:00",
"index_texts": null,
"output": "Modern JavaScript for Django Developers",
"pwd": "/data/archive/1736957295.703285",
"schema": "ArchiveResult",
"start_ts": "2025-01-15T16:08:43.765018+00:00",
"status": "succeeded"
}
],
"wget": []
},
"icons": null,
"is_archived": true,
"is_static": false,
"latest": {
"archive_org": "ArchiveError: Failed to find \"content-location\" URL header in Archive.org response.",
"dom": "output.html",
"favicon": "favicon.ico",
"git": null,
"media": "media/",
"pdf": null,
"screenshot": null,
"singlefile": null,
"title": "Modern JavaScript for Django Developers",
"warc": null,
"wget": null
},
"link_dir": "/data/archive/1736957295.703285",
"newest_archive_date": "2025-01-15T16:09:13.618011+00:00",
"num_failures": 1,
"num_outputs": 8,
"oldest_archive_date": "2025-01-15T16:08:18.137127+00:00",
"path": "/guides/modern-javascript-for-django-developers/",
"schema": "Link",
"scheme": "https",
"snapshot_abid": "snp_01JHNBHZ46579BABBA01109DCY",
"snapshot_id": "ecc6267e-d637-44d9-bf95-b564c204b59e",
"sources": [
"/data/sources/1736957294-import.txt"
],
"tags": null,
"tags_str": "",
"timestamp": "1736957295.703285",
"title": "Modern JavaScript for Django Developers",
"url": "https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/"
}