Crear un projecto con Django y HTMX
Dependencias
Primero instale las dependencias necesarias.
Python 3
apt-get update -y
apt-get install git python3 python3-pip -y
DBMS
Quizás quiera instalar también un DBMS, recomendamos PostgreSQL:
apt-get update -y
apt-get install postgresql libpq-dev -y
Crear el Entorno de Proyecto
mkdir django_htmx_project
cd django_htmx_project
python3 -m venv .
Instalar Requerimientos de PIP
pip install django django-admin django-htmx
Configurar Django
Una vez estén instaladas nuestras dependencias básicas, podemos proceder a:
- Inicializr el Proyecto Django.
- Configurar los directorios
templateystatic. - Añadir HTMX.
Inicializar el Proyecto con Django Admin
django-admin startproject core
# Movemos todo dentro de la inicialización un directorio hacia arriba
mv core/* . 2>/dev/null
mv core/core/* core/
rmdir core/core/
# Arreglamos el Directorio Base
sed -i "s/parent.parent/parent/g" core/settings.py
Añadir HTMX a Django
Añada app y middleware, junto con su módulo de aplicación core:
# File: core/settings.py
INSTALLED_APPS = [
...,
"django_htmx",
"core",
...,
]
MIDDLEWARE = [
...,
"django_htmx.middleware.HtmxMiddleware",
...,
]
Congelar Dependencias Iniciales
Quizás quiera congelar sus dependencias iniciales.
pip freeze > requirements.txt
Definir un directorio de recursos estáticos
Añada lo siguiente a su archivo settings.py.
# core/settings.py
STATICFILES_DIRS = [BASE_DIR / "static"]
Luego cree el directorio:
mkdir -p core/static
Añadir un directorio de Plantillas
Añada la línea comentada para incluir un directorio con sus plantillas en su app Django.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
f'{BASE_DIR}/views/templates' # ¡Añada esta línea!
],
'APP_DIRS': True,
'OPTIONS': {...},
},
]
Luego cree el directorio:
mkdir -p core/views/templates
Descargar HTMX Min JS
Una vez configurado el proyecto básico deberá descargar el Min JS de HTMX.
Source: https://htmx.org/docs/#installing
wget -O core/static/htmx.min.js https://unpkg.com/htmx.org/dist/htmx.min.js
Recuerde añadir el tag de script a su archivo de layout/plantilla principal.
<script src="{% static 'htmx.min.js' %}" defer></script>
¡Que comience la diversión!
Authors:
- Martín Vilche
- Dylan Blanqué