See the source code for a working example. Next.js is a popular React Framework that comes with a lot of great features such as hybrid static & server rendering, smart bundling, file system routing, and much more. I prefer it over vanilla React. When we dockerize a Next.js application, we want the final production and development images to be small, fast to build and easy to maintain. Let’s see how we can use multi-stage builds and other image optimization techniques to create the ideal images. ...

See the source code for a working example. UI testing is a critical part of any modern web application. My favorite testing framework is Cypress which enables you to write clean, fast and reliable tests. It consists of two main commands: cypress run: Runs Cypress tests from the CLI without a GUI. Used mostly in CI/CD. cypress open: Opens Cypress in an interactive GUI. Used for local development. I like to dockerize my entire application so it can be run anywhere (my machine, coworker’s machine, CI/CD, etc.) and Cypress is no exception. We’re going to dockerize the cypress run and cypress open commands for a simple Todo application written in Django and Next.js (check out the source code). ...

You can use watchman in your Django project to make auto-reloads more CPU efficient. Adam Johnson’s Efficient Reloading in Django’s Runserver With Watchman blog post does an excellent job describing how to set this up. I highly recommend giving it a read. The tutorial explains how to install watchman on macOS with brew install watchman but does not explain how to install it in a Python docker container. Considering all of my Django projects are dockerized, I decided to figure it out. ...

In Django, you can define a set of choices for any field. If you’re using a SPA frontend, such as React or Vue, then you’ll need to access these choices in a form. Let’s look at two ways to do this. As an example, we’ll use the following Device model: class Device(models.Model): class Size(models.TextChoices): SMALL = "S" MEDIUM = "M" LARGE = "L" name = models.CharField(max_length=255) size = models.CharField(max_length=255, choices=Size.choices) Hardcode choices in frontend The fastest approach is to harcode these choices in the frontend. ...

In Django, a related object is a model instance used in the one-to-many or many-to-many context. For example, let’s look at the built-in User model, which has a many-to-many relationship with the Group model. class User(models.Model): groups = models.ManyToManyField(Group, related_name="groups") For any given User object, all linked Group objects are called “related objects”. Here are 5 ways to fetch all User objects with at least one related Group object. Iterate over each object in Python users = [] for user in User.objects.prefetch_related("groups"): if user.groups.exists(): users.append(user) Probably the most popular approach but there are two problems: ...