Hola!!!😎 Hoy les quiero compartir una combinación de frameworks que nos permiten desarrollar sitios web modernos de una forma rápida y fácil, se trata de Django, Tailwind y HTMX.
- Django: Framework por excelencia para desarrollar sitios web con límites de tiempo utilizando Python.
- Tailwind: Tailwind CSS es un framework CSS que permite un desarrollo ágil, basado en clases de utilidad que se pueden aplicar con facilidad en el código HTML
- HTMX: Un framework que está dando mucho de que hablar, sobre todo porque se integra muy bien con Django y no se necesita aplicar JavaScript par su implementación.
Este tutorial estará dividido en una serie de tres artículos, así que si no quieres perderte ninguna entrega subscribete.
Crear entorno virtual con Pyenv
Lo primero que haremos será crear un proyecto con Django y utilizaremos Pyenv para el entorno virtual.
$ mkdir django-tw-htmx
$ cd django-tw-htmx
Creamos el entorno virtual del proyecto utilizando Pyenv
$ pyenv virtualenv 3.10.2 django-tw-htmx
Aquí le estamos diciendo que vamos a utilizar la versión 3.10.2 de python y que el virtualenv tendrá por nombre django-tw-htmx
Le decimos a Pyenv que el entorno virtual es local, así cada ves accedamos a la carpeta del proyecto este se activará automáticamente
$ pyenv local django-tw-htmx
(django-tw-htmx) ➜
Si quieres conocer un poco más sobre Pyenv te dejo esta pequeña guía para crear un entorno virtual en Python utilizando Pyenv
Proyecto Django
Lo primero que haremos con el virtualenv activo es instalar Django
$ pip install django
Ahora podemos crear el proyecto de Django, para el propósito de este tutoríal lo llamaremos ecomerce
$ django-admin startproject ecomerce
Accedemos a la carpeta del proyecto y lo ejecutamos
$ cd ecomerce
$ python manage.py runserver
Abrimos el navegador y accedemos a http://localhost:8000
Listo, con esto ya tenemos nuestro proyecto ejecutándose correctamente.
Aplicación del proyecto
Ahora vamos a crear una aplicación en nuestro proyecto, para el propósito de este ejemplo la llamaremos main
$ python manage.py startapp main
Activamos la aplicación en el archivo ecomerce/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'main'
]
Creamos una vista para renderizar nuestra plantilla. Editamos el archivo main/views.py y añadimos el siguiente código:
from django.shortcuts import render
def index(request):
return render(request, 'main/index.html')
Creamos la ruta en el archivo ecomerce/urls.py
from django.contrib import admin
from django.urls import path
from main.views import index # Importamos la vista
urlpatterns = [
path('admin/', admin.site.urls),
path('', index, name="index") # Creamos la ruta index
]
Por último creamos nuestra plantilla html. Para ello dentro de la aplicación main creamos la siguiente ruta : templates/main/ y dentro de main el archivo index.html con el siguiente contenido
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Integración Django + Tailwind + HTMX</h1>
</body>
</html>
Listo, nos vamos al navegador, refrescamos la página y deberíamos de estar viendo el siguiente mensaje:
Hasta aquí la primera parte, ya tenemos nuestro proyecto listo. En la próxima entrega veremos como sumar Tailwind a este proyecto para crear interfaces profesionales y modernas.
Aquí te dejo el enlace al repositorio del proyecto en GitHub