Pegasus is on sale!
Through November 30 you can use Pegasus—the Django boilerplate for SaaS apps—on unlimited sites, with lifetime updates, for 50% off—a $375 savings.
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: June 2021

JavaScript is the lifeblood of the modern web application. You need it to do anything remotely complex on the web.

And these days, if you want a modern, responsive, interactive application—and who doesn't?—your front-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 JavaScript codebases. Tools like npm, webpack and babel. Frameworks like React, Vue, Angular, and Svelte. And changes to the language itself, including ES6, TypeScript and JSX.

const element = <h1>Hello, world!</h1>;
Is this JavaScript? It is according to Facebook...

Sadly, for many Django developers, the modern JavaScript ecosystem is intimidating. The tools feel complex. There are often several ways to achieve the same goals. It's hard to choose a framework—and then once you do, it's hard to know exactly how to integrate it into a Django project.

The result is confusion and frustration—and sometimes even a general grumpiness about JavaScript itself. Python makes sense. Django makes sense. JavaScript? JavaScript is more like that annoying cousin that you tolerate but secretly you just wish they'd to go away.

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—and later Vue, Sass and other front-end technologies—into my own Django projects. It 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.

Part 1 covers our big-picture setup. We'll discuss two common ways of organizing front-end code in a Django project—which we'll call server-first, and client-first. Then we'll outline why neither of these are perfect, and learn how a hybrid architecture can help provide us with the best of both worlds.

In Part 2 we'll shift gears to the fundamentals of modern JavaScript tooling. The aim here is to demystify terms like "yarn", "webpack" and "babel". We're not trying to present the entire JavaScript ecosystem—that would be impossible (not to mention out of date the moment it was published)—but instead provide enough practical knowledge to 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 Django 1.0 was released.

In Part 3 we'll start putting things together—setting 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, and go through a few "hello world" examples in Django using React and Vue.

Finally, in Part 4 we'll go deep on some real-world examples of a hybrid architecture. We'll discuss many of the common issues that come up and offer design patterns that help address them.

Ready to go? Let's roll up our sleeves and dive in!

Up next: Part 1: Organizing your Front-End Codebase in a Django Project. Or view the complete series below.

Part 1

Part 1

Organizing your Front-End Codebase in a Django Project

The two common ways of setting up a Django / JavaScript project—understanding their advantages, shortcomings, and finding a happy middle ground.

Part 2

Part 2

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

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—and using it to create some simple "Hello World" applications with webpack, React, and Vue.

Part 4

Part 4

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

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.

Subscribe for Updates

Sign up to get notified when I publish new articles about building SaaS applications with Django.

I don't spam and you can unsubscribe anytime.