7-Creando un Layout Principal en Pug

 

Layout Principal en Pug: Organiza tu Proyecto de Bienes Raíces

Estructura del Proyecto BIENESRAICES_MVC

En este tutorial, avanzaremos en nuestro proyecto BIENESRAICES_MVC implementando un layout principal con Pug. Esto nos permitirá reutilizar código en múltiples vistas (como login y registro) y mantener una estructura limpia y escalable.

1. Estructura del Proyecto

Antes de comenzar, revisemos la organización del proyecto:

Copy
Download
BIENESRAICES_MVC/
├── controllers/
├── node_modules/
├── public/
│   ├── css/
│   │   ├── app.css
│   │   └── tailwind.css
│   ├── img/
│   └── js/
├── routes/
├── views/
│   ├── auth/
│   │   ├── login.pug
│   │   └── registro.pug
│   └── layout/
│       └── index.pug
├── package.json
└── tailwind.config.cjs

2. ¿Por qué un Layout Principal?

En aplicaciones web, elementos como el header, footer o navbar se repiten en todas las páginas. Con Pug, podemos centralizarlos en un layout base y extenderlo en cada vista, evitando duplicar código.

Beneficios:

✅ Mantenibilidad: Cambios globales se aplican en un solo archivo.
✅ Consistencia: Diseño uniforme en todas las páginas.
✅ Eficiencia: Reduce líneas de código repetitivas.

3. Creando el Layout Base

Dentro de views/layout/index.pug, definimos la estructura común:

pug
Copy
Download
// views/layout/index.pug
doctype html
html(lang="es")
  head
    meta(charset="UTF-8")
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    title Bienes Raíces | #{pagina}
    link(rel="stylesheet" href="/css/app.css")
  body(class="min-h-screen bg-gray-50")
    main(class="mx-auto container mt-10 px-2")
      block contenido

  • block contenido: Espacio reservado para que las vistas hijas inyecten su contenido único.

  • Tailwind CSS: Usamos clases utilitarias para estilos básicos (fondo gris claro, contenedor centrado, etc.).

4. Extendiendo el Layout en las Vistas

Las vistas (como login.pug) heredan el layout y rellenan el bloque contenido:

pug
Copy
Download
// views/auth/login.pug
extends ../layout/index

block contenido
  div
    h2.text-center.text-2xl.font-extrabold Inicia Sesión

¿Cómo funciona?

  1. extends: Indica que la vista usa el layout principal.

  2. block contenido: Sobrescribe el bloque con el HTML específico de la página.

⚠️ Importante:

  • Los bloques deben ser lo primero en la vista (no puede haber código antes de extends).

  • Usa la ruta correcta (../layout/index para subir un nivel de directorio).

5. Configuración Adicional

Extensiones Recomendadas para VSCode

  1. Pug: Soporte para sintaxis y autocompletado.

  2. Tailwind CSS IntelliSense: Sugiere clases de Tailwind al escribir.

Modo "Watch" para Tailwind

Para compilar automáticamente los estilos, modifica package.json:

json
Copy
Download
"scripts": {
  "dev": "tailwindcss -i ./src/css/app.css -o ./public/css/app.css --watch"
}

Ejecuta con:

bash
Copy
Download
npm run dev

Ahora, Tailwind actualizará los estilos en tiempo real al guardar cambios.

6. Resultado Final

Al acceder a /login, verás:

  • Título dinámico ("Bienes Raíces | Inicia Sesión").

  • Contenido específico centrado y con estilos de Tailwind.

Ejemplo de login con layout

Conclusión

Con este enfoque:

  • Centralizamos la estructura común en layout/index.pug.

  • Extendemos el layout en vistas hijas sin repetir código.

  • Optimizamos el flujo de trabajo con Tailwind (modo --watch).


Creando un Layout Principal en Pug: Organiza tu Proyecto de Forma Eficiente

En este tutorial, continuaremos con nuestro proyecto y aprenderemos a crear un layout principal en Pug para estructurar nuestras vistas de manera modular. Esto nos permitirá reutilizar código y mantener un diseño consistente en todas las páginas.

¿Por qué usar un Layout Principal?

En proyectos web, es común que ciertos elementos (como headers, footers o barras de navegación) se repitan en múltiples páginas. Con Pug, podemos crear un layout base y extenderlo en cada vista, evitando duplicar código y facilitando las actualizaciones.

Paso 1: Estructura del Layout

Creamos una carpeta layout y dentro un archivo index.pug con la estructura base:

pug
Copy
Download
// layout/index.pug
doctype html
html(lang="es")
  head
    meta(charset="UTF-8")
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    title Bienes Raíces | #{pagina}
    link(rel="stylesheet" href="/css/app.css")
  body(class="min-h-screen bg-gray-50")
    main(class="mx-auto container mt-10 px-2")
      block contenido

  • block contenido: Define un espacio dinámico que las vistas hijas podrán rellenar.

  • Clases de Tailwind: Usamos clases utilitarias para estilos básicos (fondo gris claro, contenedor centrado, etc.).

Paso 2: Extender el Layout en las Vistas

Cada vista (como login.pug o registro.pug) heredará el layout y añadirá su contenido único:

pug
Copy
Download
// views/auth/login.pug
extends ../layout/index

block contenido
  div
    h2.text-center.text-2xl.font-extrabold Inicia Sesión

  • extends: Indica que la vista usa el layout principal.

  • block contenido: Sobrescribe el bloque definido en el layout con el HTML específico de la página.

⚠️ Importante:

  • Todo el contenido debe estar dentro de un block.

  • Los bloques deben ser lo primero en la vista (no puede haber código antes de extends).

Paso 3: Configuración Adicional

Extensiones Recomendadas para VSCode

  1. Pug: Soporte para sintaxis y autocompletado.

  2. Tailwind CSS IntelliSense: Sugiere clases de Tailwind mientras escribes.

Modo "Watch" para Tailwind

Para que los estilos se actualicen automáticamente, agrega en package.json:

json
Copy
Download
"scripts": {
  "dev": "tailwindcss -i ./src/css/app.css -o ./public/css/app.css --watch"
}

Ejecuta con npm run dev. Ahora, cada cambio en tus clases se reflejará al guardar.

Resultado Final

Al acceder a /login, verás:

  • El título "Bienes Raíces" heredado del layout.

  • El contenido específico ("Inicia Sesión") inyectado en el bloque.

Ejemplo de login con layout

Conclusión

Usar layouts en Pug optimiza tu flujo de trabajo:
✅ Evita repetir código (DRY: Don’t Repeat Yourself).
✅ Facilita mantenimiento (cambios globales se aplican en un solo archivo).
✅ Integra Tailwind de manera eficiente con el modo "watch"


Automatizando la Compilación de CSS con Tailwind y Pug

El Problema: Cambios que no se Aplican

Al modificar clases de Tailwind en nuestros archivos Pug, es común que los cambios no se reflejen inmediatamente en el navegador. Esto ocurre porque:

  1. Tailwind necesita recompilar el CSS cada vez que agregamos nuevas clases.

  2. El archivo app.css no se actualiza automáticamente a menos que lo indiquemos.

La Solución: Modo Watch

Para evitar tener que recompilar manualmente cada cambio, configuraremos el modo watch en nuestro proyecto. Así, Tailwind observará los archivos y recompilará automáticamente cuando detecte modificaciones.

Paso 1: Configurar el Script en package.json

Abre tu package.json y modifica (o agrega) el script css:

json
Copy
Download
"scripts": {
  "css": "postcss public/css/tailwind.css -o public/css/app.css --watch"
}

Paso 2: Ejecutar el Comando Watch

Ahora, en tu terminal, ejecuta:

bash
Copy
Download
npm run css

Esto iniciará el proceso en segundo plano y Tailwind estará atento a:

  • ✅ Nuevas clases en archivos .pug.

  • ✅ Cambios en tailwind.config.cjs.

  • ✅ Cualquier modificación en los estilos.

¿Qué Logramos con Esto?

  1. Automatización total: Ya no necesitas correr npm run css cada vez que haces un cambio.

  2. Desarrollo más rápido: Los estilos se actualizan en tiempo real.

  3. Menos errores: Evitas olvidar recompilar antes de probar los cambios.

Ejemplo Práctico

Si en login.pug modificas:

pug
Copy
Download
h2.text-center.text-6xl Inicia Sesión

por:

pug
Copy
Download
h2.text-center.text-2xl.font-bold Inicia Sesión

Tailwind detectará el cambio al guardar el archivo y regenerará app.css sin que tengas que hacer nada más.

Conclusión

Configurar el modo --watch es esencial para un flujo de trabajo ágil con Tailwind y Pug. Con este ajuste:

  • 🚀 Ahorras tiempo al evitar compilaciones manuales.

  • 🛠 Trabajas más eficientemente con actualizaciones en vivo.

  • 🔄 Mantienes consistencia en tus estilos sin esfuerzo.

¡Prueba este método y cuéntame cómo te va en los comentarios! ¿Tienes dudas sobre la configuración? Estoy aquí para ayudar. 👇

Comentarios

Publicar un comentario

Entradas más populares de este blog

4- Template Engines

Introducción a los Template Engines en Node.js - Pug y EJS ¿Qué son los Template Engines en Node.js?  Estructura del Proyecto Antes de comenzar, revisemos la organización del proyecto: Copy Download BIENESRAICES_MVC/ ├── controllers/ ├── node_modules/ ├── public/ │ ├── css/ │ │ ├── app.css │ │ └── tailwind.css │ ├── img/ │ └── js/ ├── routes/ ├── views/ │ ├── auth/ │ │ ├── login.pug │ │ └── registro.pug │ └── layout/ │ └── index.pug ├── package.json └── tailwind.config.cjs Los motores de plantillas (Template Engines) son herramientas fundamentales en el desarrollo con Node.js que nos permiten generar HTML dinámico de manera eficiente. En este post exploraremos dos de los más populares: EJS y Pug. Configurando EJS (Embedded JavaScript) Para comenzar con EJS, primero debemos instalarlo: bash Copy Download npm install ejs Luego, en nuestro archivo principal (generalmente  index.js  o  app.js ), configuramos EJS como nuestro motor de vi...
Leer más

2-Iniciando un Servidor

  Iniciando un Servidor con Express en Node.js En este post, aprenderemos cómo configurar un servidor básico usando  Express , uno de los frameworks más populares para Node.js. Además, veremos cómo importar módulos tanto en  CommonJS  como en  ECMAScript Modules (ESM) . 1. Importando Express Existen dos formas de importar módulos en Node.js:  CommonJS  (el estándar tradicional) y  ECMAScript Modules  (el sistema moderno). CommonJS (Sintaxis tradicional) javascript Copy Download const express = require ( 'express' ) ; // Importamos Express ECMAScript Modules (ESM) Para usar  import  en lugar de  require , debemos configurar nuestro  package.json : json Copy Download { "type" : "module" // Habilita ES Modules } Luego, podemos importar Express así: javascript Copy Download import express from 'express' ; // Sintaxis moderna (ESM) 2. Creando la Aplicación Express Una vez importado Express, inicializamos la aplicaci...
Leer más

1-Iniciar un Proyecto en Node.js

   Iniciar un Proyecto en Node.js Configurando tu proyecto desde cero Cuando comenzamos un proyecto en Node.js, lo primero que necesitamos es crear nuestro archivo  package.json , que contendrá toda la información y dependencias de nuestro proyecto. Creando el package.json Ejecuta el siguiente comando en tu terminal: bash Copy Download npm init Este comando te guiará a través de la creación básica del archivo  package.json . Instalando dependencias Las dependencias son paquetes externos que tu proyecto necesita para funcionar. Para instalarlas: Dependencia regular: bash Copy Download npm i dependencia Para instalar Express (framework web popular): bash Copy Download npm i express Dependencias de desarrollo Estas son dependencias que solo necesitas durante el desarrollo, no en producción: bash Copy Download npm i -D express Nota importante:  Si necesitas, puedes eliminar la carpeta  node_modules  y reconstruirla luego con  npm install . Creand...
Leer más