Como integrar Django con Tailwind y HTMX - Parte 3

Como integrar Django con Tailwind y HTMX - Parte 3

Hola queridos lectores, esta es la última entrega de esta serie donde veremos como integrar HTMX con Django y Tailwind en un proyecto. Si te perdiste las entradas anteriores aquí te dejo los links:

Continuando con el proyecto de las entradas anteriores hoy veremos como integrar HTMX utilizando npm.

Instalar HTMX

Nos vamos a la consola y ejecutamos el siguiente comando para instalar HTMX:

npm install htmx.org

Seguido editamos el archivo package.json y le añadimos el siguiente comando al script build : cp node_modules/htmx.org/dist/htmx.min.js public/static_dev/js/htmx.min.js de forma que quede así:

...
"scripts": {
    "build": "postcss public/static_dev/css/main.css -o public/static_dev/css/main.min.css; cp node_modules/htmx.org/dist/htmx.min.js public/static_dev/js/htmx.min.js",
    "watch": "npm-watch"
  },
...

con esto nos aseguramos que en cada build copiamos el archivo htmx.min.js a la carpeta public/static_dev/js/

Integrar HTMX

El última paso es integrar la librería en el archivo index.html, para eso editamos el archivo y añadimos el siguiente script antes de la etiqueta de cierre del body:

...
<body class="container mx-auto px-4">
    <h1 class="bg-red-600">Integración Django + Tailwind + HTMX</h1>

    <script src="{% static 'js/htmx.min.js'%}"></script>
</body>
...

Para comprobar que todo está correcto nos vamos al navegador, activamos la consola y refrescamos la página para asegurarnos que el archivo se está cargando correctamente:

image.png

HTMX en acción

Para comprobar que HTMX está funcionando correctamente vamos a crear una pequeña vista en nuestro proyecto:

Editamos el archivo ecomerce/urls.py y añadimos la siguiente ruta:

path('list', list_htmx, name="list_htmx")

Editamos el archivo main/views.py y añadimos la siguiente vista:

def list_htmx(request):
    return render(request, 'main/list-htmx.html')

Creamos la plantilla main/templates/main/list-htmx.html y añadimos el siguiente contenido:

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

Ahora que tenemos la vista lista, editamos el archivo main/templates/main/index.html y reemplazamos la etiqueta body con el siguiente código:

<body class="container mx-auto px-4 py-2">
    <h1 class="bg-blue-200 text-4xl text-center rounded">Integración Django + Tailwind + HTMX</h1>

    <div class="py-4">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full" hx-get="/list"
            hx-target="#parent-div">
            Ver Listado
        </button>

        <div class="mx-auto px-4 py-4" id="parent-div"></div>
    </div>
    <script src="{% static 'js/htmx.min.js'%}"></script>
</body>

Nos vamos al navegador y actualizamos la página y si todo va bien el contenido de la plantilla list-htmx.html se debe renderizar en el elemento parent-div del DOM.

image.png

Esto es un ejemplo muy básico para comprobar que la integración de HTMX está funcionando correctamente.

Como podemos ver la integración entre Django, Tailwind y HTMX es bastante sencilla, es poco tiempo podemos automatizar todo el proceso para comenzar a desarrollar un nuevo proyecto.

Espero que esta pequeña serie sea de utilidad y recuerda subscribirte si quieres seguir recibiendo contenidos de este tipo.

Did you find this article valuable?

Support Roylans.dev - Blog sobre desarrollo web by becoming a sponsor. Any amount is appreciated!