DEV Community: Pedro Campos

Django project - Part 5 Dev Tools

Pedro Campos — Thu, 19 Dec 2024 19:40:19 +0000

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

echo "Starting marimo"
exec marimo edit --host 0.0.0.0 -p 2718 --no-token --headless &> /dev/null &

# -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='email@asdf.asdf')
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.

Django project - Part 4 HTMX, TailwindCSS and AlpineJS

Pedro Campos — Fri, 29 Nov 2024 12:29:18 +0000

Introduction

Now is the fun part, add HTMX, TailwindCSS, AlpineJS and change the home page to test the three libs.

The source code from this part

Tailwind

We are going to install the Tailwind through the container instance and then add the generated the json files to the Dockerfile, so it will be installed on the next build. This is made only once.

# install npm on image
RUN apk add --no-cache npm

Enter on the container to install Taiwind. let's add a just command to help in the future
justfile:

...
# Enter in the container shell
shell:
  docker compose run --rm web sh

Execute the command
$ just shell
Enter on the container to install Taiwind. let's add a just command to help in the future
justfile:

# npm install -D tailwindcss
# npx tailwindcss init

That will create 3 files: package.json, package-lock.json and tailwind.config.js. Let's add them to the Dockerfile and rebuild the container, except the tailwind.config.js, which will be added with the rest of the code.

...
# install npm on image
RUN apk add --no-cache npm

# tailwind stuff
COPY package*.json ./
# use the json to install the Tailwind
RUN npm install
...

Create the file palindrome/static/css/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

and config the tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./palindrome/templates/**/*.{html,js}",
    "./palindrome/static/**/*.{html,js}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add STATICFILES_DIRS to the settings.py to reflect the custom directory.

...
STATICFILES_DIRS = [BASE_DIR / 'palindrome/static']

Now we need to add the tailwind start on the start script, on docker/dev/start:

# -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 &

You can add a tailwind tag to a header, in the palindrome/templates/base/home.html, to test the configuration:

<head>
    ...
    <!-- Tailwind output file -->
    <link
            href="{% static 'css/output.css' %}"
            rel="stylesheet">
    ...
</head>
...

<h1>Simple Header</h1>  
<h1 class="text-3xl font-bold underline p-10">Simple Tailwind header</h1>  
<hr>

...

AlpineJS

AlpineJS it's very simple, just download the lib and add to the page.

Go to the alpine.dev, download the lib cdn.mim.js in the palindrome/static/css and change the name to alpine.min.js . Should be something like this:

$ wget https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js
$ mv cdn.min.js alpine.min.js

Add to the home header and write a test code.

{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0">
    <!-- Tailwind output file -->
    <link
            href="{% static 'css/output.css' %}"
            rel="stylesheet">
    <script
            src="{% static 'js/alpine.min.js' %}"
            defer></script>
    <title>Title</title>
</head>
<body>
<h1>Simple Header</h1>
<h1 class="text-3xl font-bold underline p-10">Simple Tailwind header</h1>
<hr>
<h1 class="text-3xl font-bold underline pt-10 px-10">Simple AlpineJS counter</h1>
<div x-data="{ count: 0 }"
     class="text-3xl font-bold underline pb-10 px-10">
    <button x-on:click="count++">Increment</button>

    <span x-text="count"></span>
</div>
<hr>
</body>
</html>

Now you have an increment button to test the Alpine configuration

HTMX

Almost as easy as the AlpineJS, but with a little more work.
Download the HTMX lib from HTMX website in the palindrome/static/js folder:

$ wget https://unpkg.com/browse/htmx.org@2.0.3/dist/htmx.min.js

Install an extension for django, the django-htmx, it has a Middleware that provides a request.htmx, which in used in htmx partial views.
Create a View on the base/view.py to respond to the HTMX call from the browser.

from django.http import HttpResponse

...

def htmx(request):  
    """  
    A simple htmx view that return a partial html.    
    """    
    return HttpResponse('<span id="click-test">HTMX is working</span>')

Add the View in the url.py

from django.urls import path

from palindrome.base.views import HomeView, htmx

app_name = 'base'
urlpatterns = [
    path('', HomeView.as_view(), name='home'),
    path('htmx/', htmx, name='htmx'),
]

Create a HTMX call from the home.html.

{% load static %}  
<html lang="en">  
<head>  
   ...
    <script            
            src="{% static 'js/htmx.min.js' %}"  
            defer></script>  
    <title>Title</title>  
</head>  
<body>  
...
<hr>  
<h1 class="text-3xl font-bold underline pt-10 px-10">Simple HTMX</h1>  
<div class="flex flex-row">  
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold  
        py-2 px-4 mb-10 mx-10 rounded w-fit"            
            hx-get="{% url 'base:htmx' %}"  
            hx-trigger="click"  
            hx-target="#click-test"  
            hx-swap="outerHTML"  
    >  
        Click Me!  
    </button>  
    <span id="click-test"></span>  
</div>  
</body>  
</html>

Wraping up

Add /node_modules/ to the .gitignore.
prepare for commit:

$ just format
$ git add .
$ git commit -m 'nice description'

Django project - Part 2 Postgres

Pedro Campos — Fri, 29 Nov 2024 12:28:24 +0000

This is the part 2 of a serie of posts on how to structure a Dango project. This is the link to part 1.

The source code from this part

Introduction

Ok, we have our Django project running on docker, let's now configure the Postgres. Dispite the fact that we can use sqlite in production, we are going to use the Postgres.

Update compose.yaml

We are going to add a new service for postgres and configure as a dependence to our web service.

services:
# The service to be created on docker
  web:
    ...
    # Only start this image after postgres
    depends_on:
      - postgres

  postgres:
    # The postgres image from docker hub
    image: postgres:16.2
    container_name: palindrome_postgres
    # The volume that will be used by this image
    volumes:
      - palindrome_postgres_data:/var/lib/postgresql/data
    # Open the port in localhost:5432 for external access
    ports:
      - "5432:5432"
    # db NAME, USER and HOST are by default 'postgres', just configure the password here
    environment:
      POSTGRES_PASSWORD: postgres

volumes:
    # Volume used by the postgres container
    palindrome_postgres_data: { }

Update .env file

...
# DB_PASSWORD is configured on compose.yaml, the others is the image default 
DB_NAME=postgres
DB_USER=postgres
DB_PASSWORD=postgres
DB_HOST=postgres
DB_PORT=5432

Update the .env.template for first setup refenrece

Add the template on git

... 
DB_NAME=
DB_USER=
DB_PASSWORD=
DB_HOST=
DB_PORT=

Add psycopg on Poetry

Add psycopg, a python adapter to postgres, so we can talk to the database.

$ poetry add psycopg[binary]

Update settings.py

Configure settings.py for using postgres and remove the sqlite.

DATABASES = {
    # Remove the sqlite configuration
    # 'default': {
    #     'ENGINE': 'django.db.backends.sqlite3',
    #     'NAME': BASE_DIR / 'db.sqlite3',
    # }

    # Add the postgres configuration
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': env('DB_NAME'),
        'USER': env('DB_USER'),
        'PASSWORD': env('DB_PASSWORD'),
        'HOST': env('DB_HOST'),
        'PORT': env('DB_PORT'),
    }

}

Update README.md

Yes, this is part of the job. Just add the psycopg

# Palindrome project

Project used to explain my view on a django project architecture, explained on my [series of posts](https://dev.to/pcampos119104/django-project-setup-part-1-2e7a)

## Tools, libs, etc. Some time related files.

Versions on Poetry.

- [Python](https://www.python.org/) Programming languange
- [django-environ](https://django-environ.readthedocs.io) Manage .envs in Django
- [Poetry](https://python-poetry.org/) Python packaging and dependency management
    - poetry.lock
    - pyproject.toml
- [Django](https://www.djangoproject.com/) Web framework written in Python
- [Docker](https://www.docker.com/) Manage containers for dev environment
    - compose.yaml
    - compose/dev/Dockerfile
    - compose/dev/start
    - .env
- [Just](https://just.systems/) encapsulate commands for easier use
    - justfile
- [psycopg](https://www.psycopg.org/) Python adapter for Postgres # <-- new line

## Dev environment setup

1. Install Just, Docker and Poetry(opcional).
2. Copie .env.example to .env, no need for edtion. 
3. `$ just build`

## Run the server for development

1. Certified that docker is up and running
2. `$ just runserver`

You can access on http://0.0.0.0:8000/

Rebuild an run the project

$ just build
$ just runserver

Django project - Part 3 Continuous Integration

Pedro Campos — Thu, 17 Oct 2024 12:06:10 +0000

This is the part 3 of a serie of posts on how to structure a Django project.

Introduction

If you worked on a project with at least one other developer, you know the problems of sharing the same codebase on Github. One of them (and the worst one) is when someone updates a new feature and breaks a working code. Tests solve most of that problem, but we need a way to force the tests to run before merging to the main and refuse any changes that don't pass the test. That is the GitHub Action.

We are going to add a test and make that run on Github action.

The finished source code from this part

We will add pytest and pytest-django, write a test, make it run in the container for local validation, and run on github actions to protect the main branch. I'll assume you are familiar with pytest, pytest-django and github

Install pytest and pytest-django

We add the pytest dependence in the dev group on poetry, we don't need that in production, but only in development.

$ poetry add --group dev pytest pytest-django

That makes a separate block on poetry

...
[tool.poetry.dependencies]  
python = "^3.11"  
Django = "^5.0.3"  
django-environ = "^0.11.2"  
django-allauth = "^65.0.2"  
psycopg = {extras = ["binary"], version = "^3.2.3"}  

[tool.poetry.group.dev.dependencies]  
pytest = "^8.3.3"  
pytest-django = "^4.9.0"
...

On Dockerfile we already have the flag to install the dev dependeces.

...
# Copy our poetry artifacts to the building image  
COPY poetry.lock pyproject.toml /app  

RUN pip3 install poetry  
# No need to create a virtual env in the container  
RUN poetry config virtualenvs.create false  
# Install dependencies with the dev dependecies  
RUN poetry install --with dev
...

Create a test for the homepage

Let's make a test for our homepage, just check if return a 200. We need that for our test on Github Action.
Delete this file, if exists:
/project/app/test.py

Create the file:
/project/app/tests/init.py
/project/app/tests/test_views.py

In test_views.py

import pytest
from django.urls import reverse


class TestBaseViews:
    def test_home(self, client):
        """
        Test if home page works
        """
        # I'll assume you know how to configure an url in django 
        resp = client.get(reverse('base:home'))
        assert resp.status_code == 200

Add a pytest configuration block on pyproject.toml.

...
# Configurations for pystest  
[tool.pytest.ini_options]  
DJANGO_SETTINGS_MODULE = "project.settings"  

# find the tests:  
python_files = ["test_*.py", "*_test.py", "testing/python/*.py"]

Add Ruff

Let's add ruff, configure it, and add the command in justfile.

$ poetry add --group dev ruff

Add the configuration to pyproject.toml

...
# Configuration for Ruff
[tool.ruff]
# 80 it's the default but nowadays the common sense it's 120.
line-length = 120
# Show an enumeration of all fixed lint violations
show-fixes = true

[tool.ruff.lint]
# https://docs.astral.sh/ruff/linter/#rule-selection
# which linter to run
select = [
    # isort
    "I",
    # pycodestyle
    "E",
]

[tool.ruff.format]
# https://docs.astral.sh/ruff/settings/#format_quote-style
# There is a lot discussion on the internet about it, I use single quotes.
quote-style = "single"

Create an alias on Just

To simplify running the tests we need to update our justfile.

...
# Run the tests
test:
  docker compose run --rm web ruff check
  docker compose run --rm web pytest

# Run Ruff for fix errors
format:
  docker compose run --rm web ruff check --fix
  docker compose run --rm web ruff format

The test command runs a ruff check without changing the code. This is going to be used on github actions for code quality, as the pytest command.

The format command is used on development to fix the code before the Pull Request. Always run before the last commit before the PR

Create the .github files

Now we need to run this just test on github every time we make a Pull Request to main branch, or dev branch, that is up to you or the company to choose a process.

First, create the files.
.github/workflows/ci.yml

# The name that will be show in Github
name: CI

# Enable Buildkit and let compose use it to speed up image building
env:
  DOCKER_BUILDKIT: 1
  COMPOSE_DOCKER_CLI_BUILD: 1

# This jobs will run when a pull request is made for the main branch.
on:
  pull_request:
    branches: [ "main" ]


jobs:
  # This is the job that is going to run the `just test` command.
  test:
    runs-on: ubuntu-latest

    steps:

      # git clone the repo in this ubuntu runner
      - name: Checkout Code Repository
        uses: actions/checkout@v3

      # Add just command for running the tests
      - name: Add just
        uses: extractions/setup-just@v2

      # The .env is on .gitignore, so it's needed to be created here
      - name: Create env file
        run: |
          touch .env
          echo DEBUG=true > .env
          echo SECRET_KEY=0m8HMl9crvazciYYD58znKmuQaQAFT8q >> .env
          echo ENVIRONMENT=dev >> .env
          echo ALLOWED_HOSTS=* >> .env
          echo DB_NAME=postgres >> .env
          echo DB_USER=postgres >> .env
          echo DB_PASSWORD=postgres >> .env
          echo DB_HOST=postgres >> .env
          echo DB_PORT=5432 >> .env
          cat .env

      - name: Build the Stack
        run: docker compose build

      - name: Run DB Migrations
        run: docker compose run --rm web python manage.py migrate

      - name: Run tests
        run: just test

      - name: Tear down the Stack
        run: docker compose down

Run the test locally

Rebuild the image to update the changes on pyproject.toml
just build
Run the tests, should works.
just test

Config the Github branchs.

Protect your main branch from accepting a direct push, configure the PR to only pass if the Action concludes without errors, so it will only accept updates through PR after running and passing the tests.
The example below is a simple one:
On github go to the Settings > Rules > Rulesets > New rulesets > New branch rulesets
The important configuration is Target branches, choose to Include by pattern and add main. Another configuration is Branch rules, check at least Require a pull request before merging.
This is a complex subject you can dive into if you want to.

Open a Pull Request for test

Make the push to your working branch, like new_feature, and open a Pull Request to main. You will see on the PR page the GitHub action working next to the merge/rebase button and if you click on it, it will open the logs of the Actions, in 'Run tests' should be printed something like this:

Run just test
docker compose run --rm web ruff check
 Container palindrome_postgres  Running
All checks passed!
docker compose run --rm web pytest
 Container palindrome_postgres  Running
============================= test session starts ==============================
platform linux -- Python 3.12.6, pytest-8.3.3, pluggy-1.5.0
django: version: 5.0.3, settings: palindrome.settings (from ini)
rootdir: /app
configfile: pyproject.toml
plugins: django-4.9.0
collected 1 item
palindrome/base/tests/test_view.py .                                     [100%]
============================== 1 passed in 0.20s ===============================

You can merge the PR to the main now.

The CI is configured, we can work as adults now.

Django project - Part 2 Postgres

Pedro Campos — Fri, 04 Oct 2024 15:13:42 +0000

This is the part 2 of a serie of posts on how to structure a Dango project. This is the link to part 1.

The source code from this part

Introduction

Ok, we have our Django project running on docker, let's now configure the Postgres. Dispite the fact that we can use sqlite in production, we are going to use the Postgres.

Update compose.yaml

We are going to add a new service for postgres and configure as a dependence to our web service.

services:
# The service to be created on docker
  web:
    ...
    # Only start this image after postgres
    depends_on:
      - postgres

  postgres:
    # The postgres image from docker hub
    image: postgres:16.2
    container_name: palindrome_postgres
    # The volume that will be used by this image
    volumes:
      - palindrome_postgres_data:/var/lib/postgresql/data
    # Open the port in localhost:5432 for external access
    ports:
      - "5432:5432"
    # db NAME, USER and HOST are by default 'postgres', just configure the password here
    environment:
      POSTGRES_PASSWORD: postgres

volumes:
    # Volume used by the postgres container
    palindrome_postgres_data: { }

Update .env file

...
# DB_PASSWORD is configured on compose.yaml, the others is the image default 
DB_NAME=postgres
DB_USER=postgres
DB_PASSWORD=postgres
DB_HOST=postgres
DB_PORT=5432

Update the .env.template for first setup refenrece

Add the template on git

... 
DB_NAME=
DB_USER=
DB_PASSWORD=
DB_HOST=
DB_PORT=

Add psycopg on Poetry

Add psycopg, a python adapter to postgres, so we can talk to the database.

$ poetry add psycopg[binary]

Update settings.py

Configure settings.py for using postgres and remove the sqlite.

DATABASES = {
    # Remove the sqlite configuration
    # 'default': {
    #     'ENGINE': 'django.db.backends.sqlite3',
    #     'NAME': BASE_DIR / 'db.sqlite3',
    # }

    # Add the postgres configuration
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': env('DB_NAME'),
        'USER': env('DB_USER'),
        'PASSWORD': env('DB_PASSWORD'),
        'HOST': env('DB_HOST'),
        'PORT': env('DB_PORT'),
    }

}

Update README.md

Yes, this is part of the job. Just add the psycopg

# Palindrome project

Project used to explain my view on a django project architecture, explained on my [series of posts](https://dev.to/pcampos119104/django-project-setup-part-1-2e7a)

## Tools, libs, etc. Some time related files.

Versions on Poetry.

- [Python](https://www.python.org/) Programming languange
- [django-environ](https://django-environ.readthedocs.io) Manage .envs in Django
- [Poetry](https://python-poetry.org/) Python packaging and dependency management
    - poetry.lock
    - pyproject.toml
- [Django](https://www.djangoproject.com/) Web framework written in Python
- [Docker](https://www.docker.com/) Manage containers for dev environment
    - compose.yaml
    - compose/dev/Dockerfile
    - compose/dev/start
    - .env
- [Just](https://just.systems/) encapsulate commands for easier use
    - justfile
- [psycopg](https://www.psycopg.org/) Python adapter for Postgres # <-- new line

## Dev environment setup

1. Install Just, Docker and Poetry(opcional).
2. Copie .env.example to .env, no need for edtion. 
3. `$ just build`

## Run the server for development

1. Certified that docker is up and running
2. `$ just runserver`

You can access on http://0.0.0.0:8000/

Rebuild an run the project

$ just build
$ just runserver

You should be able to create a superuser normally now. Just run just mng createsuperuser

Django project - Part 1 Docker

Pedro Campos — Mon, 30 Sep 2024 19:03:19 +0000

Introduction

This is advanced content on how I structure my django for a new project. I've skipped the basic startproject and startapp, there are plenty of content on that. So, the project started with Poetry, django, .gitignore, git repo, simple home page and django-allauth.

This is for small/medium applications, like a startup/ or small business. After the business grows, you need to evolve the architecture.

The source code from this part

In this series of posts we are going to set up a django project for an efficient development environment(in my opinion). In the end, we are going to have a setup with:

Python
Poetry
Django
django-environ
django-extentions
django-allauth
Just
marimo
ruff
django-debug-toolbar
pytest
pytest-django
gunicorn
whitenoise
sentry-sdk
django-browser-reload
htmx
django-htmx
tailwindcss
alpinejs
Docker
Postgres
README.md, yes it's one of the pillars.
git, github and github actions
Deploy the app on fly.io
Deploy the postgres on neon.tech ... and possible more

This is a serie with 8 parts, this is the first one.

Take note that not all parts are published yet, it's an ongoing work.

Part 1: Docker setup. Simple dockerization, even before Postgres configuration.
Part 2: Postgres. Configure Postgres to be used in Django and the configuration in the compose.yml.
Part 3: Continuos integration. Add Pytest, ruff, and run it on github action on PR to prevent broken code and ensure code quality.
Part 4: HTMX, TailwindCSS and AlpineJS. Configure HTMX in the project, there is a few tricks for django. Configure nodejs on the container and the tailwind watcher in development. Configure AlpineJS, more simple than HTMX and TailwindCSS.
Part 5: Dev Tools, Add tools like Marimo, django-extensions, django-toolbar, django-browser-reload.
Part 6: Continuos Delivery. Configure staticfiles, in this case with whitenoise. Deploy on fly.io and neon.tech and, of course, using github action for that.

Part 1 Docker setup

I'm not going to explain what Docker is and why you should use it. I assume you know the basics.

What do we need to start?

For now, install the Docker and Just and, of course, our django project with already a simple home page, in this case using poetry.

Just encapsulate commands for easier use. Here is an example of a justfile:

build:
  docker compose build
runserver:
  docker compose up --build
mng command:
  docker compose run --rm web python manage.py {{command}}
sh:
  docker compose run --rm web sh

and then we can run
$ just build
$ just runserver
$ just mng createsuperuser

Ok, let's create the files.

Don't worry, I'll explain each one of them.

First create all those empty files:

docker/dev/Dockerfile - Steps to create the image
docker/dev/start - Bash file to start the container through entrypoint on docker-compose
compose.yml - Simple orchestration of the containers, just one for now.
.env - Our environment variables injected into the container by compose.yml, add on .gitignore.
.env.template - Same key as .env but with empty values for reference, this one stays on the repo.
justfile - Wrapper for the commands.
README.md - You know why, don't play dead.

Install django-environ

django-environ - To manage env var
$ poetry add django-environ

The Dockerfile file

# Pull official base image
FROM python:3.12.6-alpine3.19
# Set working directory in the image
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, alpine uses ash, but we have a script that uses bash
RUN apk add --no-cache bash

# Copy our poetry artifacts to the building image
COPY poetry.lock pyproject.toml /app

RUN pip3 install poetry
# No need to create a virtual env in the container
RUN poetry config virtualenvs.create false
# Install dependencies with the dev dependecies
RUN poetry install --with dev

# Copy start bash script with the instruction on how to start and serve Django.
COPY ./docker/dev/start /start
RUN sed -i 's/\r$//g' /start
RUN chmod +x /start

# Copy all project files to the image.
COPY . /app

# Not used, the app are going to be running through docker compose
CMD ["manage.py", "runserver", "0.0.0.0:8000"]

start

#!/bin/bash

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

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

# Start the server for development
echo "Starting runserver"
exec python manage.py runserver 0.0.0.0:8000

compose.yml

services:
# The service to be created on docker
  web:
    # how to build the image for this service
    build:
      # Where is the directory to work on...
      context: .
      # ... with what Dockerfile instructions
      dockerfile: ./docker/dev/Dockerfile
    image: palindrome_local
    container_name: palindrome_local
    volumes:
      - .:/app:z
    env_file:
      - .env
    ports:
      - "8000:8000"
    # The bash file to execute, the one created above and added to Dockerfile
    command: /start

justfile

# List all just commands
default:
  just --list

# Build the docker image
build:
  docker compose build

# Run the Django app in development mode
runserver:
  docker compose up --build

# Run manage.py inside the container like createsuperuser
mng command:
  docker compose run --rm web python manage.py {{command}}

.env

DEBUG=True
SECRET_KEY='dev-key-(g!%yi9at$h6$*sz**^ld6+j)r305*=6i^3ho1bq=z@8c#b7ml'
ALLOWED_HOSTS=*

.env.template

Can be the same for now.

DEBUG=True
SECRET_KEY='dev-key-(g!%yi9at$h6$*sz**^ld6+j)r305*=6i^3ho1bq=z@8c#b7ml'
ALLOWED_HOSTS=*

Update settings.py

For now just these settings, the value come from .env file:

import environ

...
env = environ.Env()
SECRET_KEY = env('SECRET_KEY')
DEBUG = env.bool('DEBUG', False)
ALLOWED_HOSTS = env.list('ALLOWED_HOSTS')
...

Update README.md

# Palindrome project

Project used to explain my view on a django project architecture

## Tools, libs, etc. Some time related files.

Versions on Poetry.

- [Python](https://www.python.org/) Programming languange
- [django-environ](https://django-environ.readthedocs.io) Manage .envs in Django
- [Poetry](https://python-poetry.org/) Python packaging and dependency management
    - poetry.lock
    - pyproject.toml
- [Django](https://www.djangoproject.com/) Web framework written in Python
- [Docker](https://www.docker.com/) Manage containers for dev environment
    - compose.yaml
    - compose/dev/Dockerfile
    - compose/dev/start
    - .env
- [Just](https://just.systems/) encapsulate commands for easier use
    - justfile

## Dev environment setup

1. Install Just, Docker and Poetry(opcional).
2. Copy .env.example to .env, no need for edition. 
3. Certified that docker is up and running
4. $ just build

## Run the server for development

1. Certified that docker is up and running
2. $ just runserver

You can access on http://0.0.0.0:8000/

Build and run

Well, with your docker running and everything setup, we can now go to part 2: Postgres, configure Postgres on settings, docker etc.

Good luck and remember what happened in 1971.