Roylan Suarez Reyes
Roylans.dev - Blog sobre desarrollo web

Follow

Roylans.dev - Blog sobre desarrollo web

Follow

Como integrar Django con Tailwind y HTMX

Roylan Suarez Reyes's photo
Roylan Suarez Reyes
·Sep 25, 2022·

3 min read

Como integrar Django con Tailwind y HTMX

Table of contents

  • Crear entorno virtual con Pyenv
  • Proyecto Django
  • Aplicaci√≥n del proyecto

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 Roylan Suarez Reyes by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this