Book Image

Building SPAs with Django and HTML Over the Wire

By : Andros Fenollosa
Book Image

Building SPAs with Django and HTML Over the Wire

By: Andros Fenollosa

Overview of this book

The HTML over WebSockets approach simplifies single-page application (SPA) development and lets you bypass learning a JavaScript rendering framework such as React, Vue, or Angular, moving the logic to Python. This web application development book provides you with all the Django tools you need to simplify your developments with real-time results. You’ll learn state-of-the-art WebSocket techniques to realize real-time applications with minimal reliance on JavaScript. This book will also show you how to create a project with Docker from the ground up, test it, and deploy it on a server. You’ll learn how to create a project, add Docker, and discover development libraries, Django channels, and bidirectional communication, and from then, on you’ll create real projects of all kinds using HTML over WebSockets as a chat app or a blog with real-time comments. In addition, you’ll modernize your development techniques by moving from using an SSR model to creating web pages using WebSockets over HTML. With Django, you’ll be able to create SPAs with professional real-time projects where the logic is in Python. By the end of this Django book, you’ll be able to build real-time applications, as well as gaining a solid understanding of WebSockets with Django.
Table of Contents (14 chapters)
Part 1: Getting Started with Python
Part 2: WebSockets in Django
Part 3: HTML over WebSockets
Part 4: Simplifying the frontend with Stimulus

Exploring the software required

In this section, we will take a look at the software that we’ll be using throughout the book and how to install it. The code for this chapter can be found at

Operating system

You should work on an operating system that supports Docker, such as one of the following:

  • Linux distribution, preferably Ubuntu or Debian
  • macOS in its latest version
  • Windows 10 or higher, preferably with the Linux subsystem active and Ubuntu or Debian installed
  • BSD descendants, preferably FreeBSD

Code editor

I assume that if you are reading this book, you already have experience with Python and you have an IDE or rich editor that is ready. If you need to change the IDE, I have recommended, from most to least highly recommended, in the following list some that I consider perfect for working with Python:

  • PyCharm Professional: If you are a student at a recognized school, you can claim a free student license from JetBrains. Otherwise, I encourage you to pay for the license or use their demo. There is a free version of the IDE, PyCharm Community Edition, but you will not be able to use the Docker interpreter, as this is a feature of the Professional version. You can download this editor from
  • Visual Studio Code (VSCode): This is a very popular editor in web development, created and maintained by Microsoft. You can download this editor from
  • Emacs: This is very easy to use with a preconfigured framework such as Spacemacs or Doom. You can download this editor from
  • Sublime Text with the Djaneiro package: This is the easiest option if you are not looking for complications. You can download this editor from

Don’t force yourself to change. A code editor is a very personal thing, like choosing a brand of underwear: once you find one that fits your way of being, you don’t want to change. I understand that you may not feel like learning new shortcuts or workflows either. Otherwise, if you have no preference, you are free to visit the website of any of the preceding editors to download and install it on your computer.

All the examples, activities, and snippets in the book will work with whatever your editor or IDE of choice is. They will mainly help you with syntax errors, autocompletion, and hints, but your code will be self-contained since it is always stored in plain text. A Python programmer is a Python programmer in any editor but not all editors work well with Python.


You don’t need to install it. You’re reading correctly; the editor didn’t make a mistake in the review. We’ll use Docker to install a Python container capable of launching basic commands in Django, such as creating a project or an app or launching the development server.

I assume that if you are here, it is because you feel comfortable programming with Python. If not, I would recommend you read some of Packt’s books:

  • Learn Python Programming – Third Edition, Fabrizio Romano and Heinrich Kruger, Packt Publishing (
  • Expert Python Programming – Fourth Edition, Michał Jaworski and Tarek Ziadé, Packt Publishing (


The fastest way to install Docker is through Docker Desktop.. It’s available on Windows, macOS, and Linux (in beta as I write this). Just go to the official website, download, and install:

In the case that you want to install it directly through the terminal, you will need to search for Docker Engine ( This is highly recommended if you use Linux or BSD.

Also install Docker Compose, which will simplify the declaration and management of images and services:


There is no development that does not involve a versioning system. Git is the most popular option and is almost mandatory to learn.

If you have no knowledge or relatively basic experience with it, I recommend looking at another of Packt’s books, such as Git Essentials – Second Edition, Ferdinando Santacroce, Packt Publishing (

Alternatively, you can opt to review the more extensive documentation from the official Git website:


We will avoid focusing on the visual aspect of the browser, which means frontend implementation features such as CSS compatibility or JavaScript features do not matter. The most important thing is to feel comfortable when debugging the backend. Most of the time, we will be in the console checking that the requests (GET, POST, and the like) work as expected, watching the communication over WebSocket to make it smooth, and sporadically manipulating the rendered HTML.


WebSocket is a bidirectional communication protocol, different from HTTP, which facilitates the sending of data in real time between a server and a client, in our case, between a Django server and a frontend client.

In this book, I will use the Firefox Developer Edition ( browser because it is so convenient to manage the aspects mentioned using it. You are free to use any other browser, such as Chrome, Safari, or Edge, but I’m not sure whether all the features I will use are available with those browsers.

With the software installed, we can start working with the preparations around Python and Docker to run Django or future Python code.