Django project - Part 5 Dev Tools

The source code from this part

Introduction

In this part we are going to add a few tools to help in the development phase, like a hot reload for template when adding a tailwind class.

There is more tools, but this three I judge to be essential for a development.

Django extension

Documentation

"Django Extensions is a collection of custom extensions for the Django Framework." - Documentation.
This lib can be used in production too.

Install:

$ poetry add django-extensions

Add the app to the INSTALLED_APPS:

INSTALLED_APPS = [  
    ...
    'django_extensions',  
    ... 
]

Simple as that, now we can use all the extensions features
We can test an extension command, this prints the settings configuration variables:

$ just mng print_settings

Django browser reload

Documentation

Check if a template has changed and refresh the browser. It's a way for the server notify the page that something has been change and it's need to reload. Very, very useful when editing a template layout. Only works on DEBUG=True

Install:

$ poetry add django-browser-reload

Add to INSTALLED_APPS, it works only in DEBUG true:

INSTALLED_APPS = [
    ...
    'django_browser_reload',
]

We need to add to the url in the base urls.py endpoint for the js script talk to.

urlpatterns = [
    path('admin/', admin.site.urls),
    path('accounts/', include('allauth.urls')),
    path('', include('palindrome.base.urls')),
    path("__reload__/", include("django_browser_reload.urls")),
]

Add the middleware so the js script will be injected on the page, for the server communication and reload action.

MIDDLEWARE = [
    ...
    'django_browser_reload.middleware.BrowserReloadMiddleware'
]

Rebuild the image, run the container and make a change on the home.html, you will see the page reloading itself:

$ just build
$ just runserver

Marimo

Documentation

My favorite; it's like Jupyter Notebook, but using it for development is much better. I don't know about data science. 

You can test a function, inspect forms, models, or whatever.

It's a little more complex to install than the above libs, but it's worth it.

$ poetry add marimo

We need that our marimo server start in development like runserver and tailwindCSS, for that we need to edit our start script to add the marimo command.

#!/bin/bash

set -o errexit
set -o pipefail
set -o nounset

# Apply migrations if has new one.
echo "Running migrations..."
python manage.py migrate

# -i the input.css for some tailwind directives or pure css,
# it will be added to the -o output.css in the
# tailwind processing, --watch=always is the hot reload.
echo "Starting tailwindcss watcher"
exec npx tailwindcss -i ./palindrome/static/css/input.css -o ./palindrome/static/css/output.css --watch=always &

echo "Starting runserver"
exec python manage.py runserver 0.0.0.0:8000

We need to install psutils on the container through Dockerfile, It's a dependency for Marimo.

# Pull official base image
FROM python:3.12.6-alpine3.20

# Set working directory
WORKDIR /app

# Set env variables

# Don't write out pyc files
ENV PYTHONDONTWRITEBYTECODE 1
# No buffering stdin/stdout
ENV PYTHONUNBUFFERED 1

# update the alpine linux
RUN apk update
# install bash on image, could be the ash but the bash is more agnostic
RUN apk add --no-cache bash
# install npm on image
RUN apk add --no-cache npm

# NEW LINE
# for psutil, a dependencie of marimo
RUN apk add --no-cache gcc python3-dev musl-dev linux-headers

...

Open the marimo port on compose.yaml:

services:
# The service to be created on docker
  web:
    ... 
    # Open the port in localhost:8000 and 2718 for external access
    ports:
      - "8000:8000"
      - "2718:2718" # marimo
    ...

Build and run:

$ just build
$ just runserver

Marimo will be running on localhost:2718 and the Django app on localhost:8000 as usual.

Configure a Marimo notebook for django

To use Django in the notebook, like models, forms, etc, we need to make some code in the first cell of all notebooks.

Create a local folder on the project for hosting the notebooks.

$ mkdir local

Create a new notebook using marimo and save in the local folder as template.py

This is the code for the template.py to run the django:
First cell to configure the django for marimo.

import marimo as mo
import os
import django
import sys
# The templete it's on /local, whe need
sys.path.insert(0,'/app')
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "palindrome.settings")
os.environ.setdefault("DJANGO_ALLOW_ASYNC_UNSAFE", "true")
django.setup()

Second cell, is just for testing if everything is working.

from django.contrib.auth import get_user_model
User=get_user_model()
user, created = User.objects.get_or_create(username='Pedro', email='[e-mail]')
if created:
    user.set_password('password')
    user.save()
print(user)

If you google, you will find many other tools. Add as you need, not because it's shine.

The next post will be about the scary deployment, buuuu.