Como integrar Django con Tailwind y HTMX

Como integrar Django con Tailwind y HTMX

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

image.png

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:

image.png

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

Did you find this article valuable?

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