5-Web de Lista de Libros-layouts

Cómo Implementar Layouts en Node.js con EJS: Estructura Profesional

*16 de junio, 2025*

En este post aprenderás a implementar un sistema de layouts en Node.js usando EJS, creando componentes reutilizables como headers y footers. Esta estructura te permitirá mantener un código organizado y escalable.

🏗️ Estructura del Proyecto Actualizada

text

mi-app/

├── node_modules/

├── public/

│   ├── css/

│   ├── js/

│   └── images/

├── routes/

│   └── index.js

├── views/

│   ├── layouts/       ← Nueva carpeta para layouts

│   │   ├

│   │   ├── header.ejs ← Componente header

│   │   └── footer.ejs ← Componente footer

│   └── index.ejs ← Layout principal

├── app.js

├── package.json

└── .gitignore

🚀 Inicialización del Proyecto

bash

# Crear proyecto e inicializar Git

mkdir mi-app

cd mi-app

git init


# Inicializar Node.js

npm init -y


# Instalar dependencias principales

npm install express ejs morgan nodemon


# Crear estructura de carpetas

mkdir -p public/{css,js,images} views/layouts routes

📦 Configuración de package.json

json

{

  "name": "mi-app",

  "version": "1.0.0",

  "description": "Aplicación web con layouts en Node.js",

  "main": "app.js",

  "scripts": {

    "start": "node app.js",

    "dev": "nodemon app.js"

  },

  "dependencies": {

    "ejs": "^3.1.9",

    "express": "^4.18.2",

    "morgan": "^1.10.0"

  },

  "devDependencies": {

    "nodemon": "^3.1.0"

  }

}

🖥️ Configuración de Express (app.js)

javascript

const express = require('express');

const path = require('path');

const app = express();


// Configuración básica

app.set('views', path.join(__dirname, 'views'));

app.set('view engine', 'ejs');

app.use(express.static(path.join(__dirname, 'public')));


// Importar y usar rutas

const indexRouter = require('./routes/index');

app.use('/', indexRouter);


// Iniciar servidor

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {

    console.log(`Servidor activo en http://localhost:${PORT}`);

});

🛣️ Configuración de Rutas (routes/index.js)

javascript

const express = require('express');

const router = express.Router();


// Ruta principal

router.get('/', (req, res) => {

    res.render('index', { titulo: 'Mi App Web con routes' });

});

// Ruta "Acerca de"

router.get('/about', (req, res) => {

    res.render('about', { titulo: 'Acerca de' });

});

module.exports = router;

📝 Creación de Vistas

views/layouts/header.ejs


ejs

<!DOCTYPE html>

<html>

<head>

    <title><%= titulo %></title>

    <link rel="stylesheet" href="/css/bootstrap.min.css">  <!-- Archivo CSS -->

</head>

<body>

   


<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <div class="container-fluid">

    <a class="navbar-brand" href="#">Navbar</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="navbar-nav me-auto mb-2 mb-lg-0">

        <li class="nav-item">

          <a class="nav-link active" aria-current="page" href="#">Home</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Link</a>

        </li>

        <li class="nav-item dropdown">

          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">

            Dropdown

          </a>

          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

            <li><a class="dropdown-item" href="#">Action</a></li>

            <li><a class="dropdown-item" href="#">Another action</a></li>

            <li><hr class="dropdown-divider"></li>

            <li><a class="dropdown-item" href="#">Something else here</a></li>

          </ul>

        </li>

        <li class="nav-item">

          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

        </li>

      </ul>

 

    </div>

  </div>

</nav>

views/layouts/footer.ejs

ejs

</body>

<footer class=”text-center”>sotelo

</footer>

views/index.ejs

ejs


    <%- include layouts/header.ejs %>


<div class="container-fluid p-5 bg-primary text-white text-center">

   <h1>Bienvenido a <%= titulo %></h1>

  <p>Resize this responsive page to see the effect!</p>

</div>

 

<div class="container mt-5">

  <div class="row">

    <div class="col-sm-4">

      <h3>Column 1</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

    </div>

    <div class="col-sm-4">

      <h3>Column 2</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

    </div>

    <div class="col-sm-4">

      <h3>Column 3</h3>        

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

    </div>

  </div>

</div>




    <%- include layouts/footer.ejs %>



views/about.ejs

ejs

<section>

    <h1><%= title %></h1>

    <p><%= description %></p>

</section>

💻 Comandos para Iniciar el Proyecto

bash

# Modo desarrollo (con recarga automática)

npm run dev


# Modo producción

npm start

🚀 Subir el Proyecto a GitHub

bash

# Inicializar repositorio Git (si no lo has hecho)

git init


# Agregar todos los archivos

git add .


# Hacer commit inicial

git commit -m "Inicializando proyecto con sistema de layouts"


# Crear repositorio en GitHub y copiar su URL

# Luego agregar el remote origin

git remote add origin https://github.com/tuusuario/mi-app.git


# Subir cambios (primera vez)

git push -u origin main


# Para subir cambios posteriores

git add .

git commit -m "Descripción de los cambios"

git push



💡 Beneficios de Esta Estructura

  1. Reutilización de código: Los componentes como header y footer se escriben una vez y se usan en todas las páginas.

  2. Mantenimiento sencillo: Cambios en el diseño global se realizan en un solo lugar.

  3. Consistencia visual: Todas las páginas mantienen la misma estructura base.

  4. Escalabilidad: Fácil agregar nuevos layouts para diferentes secciones del sitio.

🚀 Próximos Pasos

En futuros posts cubriremos:

  • Cómo crear layouts específicos para diferentes secciones (admin, usuario, etc.)

  • Implementación de partials para componentes más pequeños

  • Optimización del sistema de assets (CSS/JS)

  • Internacionalización con layouts

¿Qué tema te gustaría que cubramos en profundidad? ¡Déjanos tus sugerencias en los comentarios!

Comentarios

Publicar un comentario

Entradas más populares de este blog

Cómo Iniciar un Proyecto Node.js

  Cómo Iniciar un Proyecto Node.js desde Cero: Guía Paso a Paso Solución 1: Cambiar la política de ejecución (recomendado) Abre PowerShell  como administrador . Ejecuta este comando para permitir la ejecución de scripts firmados: powershell Copy Download Set-ExecutionPolicy RemoteSigned - Scope CurrentUser Si estás comenzando con Node.js, esta guía te mostrará cómo configurar un proyecto básico con las herramientas esenciales. Paso 1: Inicializar el proyecto bash Copy Download npm init --yes Este comando crea automáticamente un archivo  package.json  con valores predeterminados. El  package.json  es el corazón de tu proyecto Node.js, donde se almacenan: Dependencias del proyecto Scripts personalizados Metadatos del proyecto (nombre, versión, descripción, etc.) Paso 2: Instalar dependencias esenciales Express - El framework web bash Copy Download npm install express Express es el framework web más popular para Node.js. Te permite: Crear rutas (endpoints)...
Leer más

9-Nuestra Primera Plantilla con EJS

Imagen
  Creando Nuestra Primera Plantilla con EJS y Express   5- EXPRESS            |           V 6- MIDDLEWARE            |           V 7- express.static            |           V 8- Motor de plantilla            |           V      9-Plantilla mi-app/ ├── public/ # Archivos estáticos (opcional) │ ├── css/ │ │ └── style.css │ ├── js/ │ │ └── app.js │ └── images/ │ └── logo.png ├── views/ # Carpeta para las plantillas EJS (obligatoria) │ ├── index.ejs # Vista principal │ └── partials/ # Fragmentos reutilizables (opcional) │ ├── header.ejs │ └── footer.ejs ├── app.js # Archivo principal de la aplicación └── package.json # Configuración del proyecto En este post, aprenderemos...
Leer más

6-Middleware?

Imagen
  Middleware en Node.js con Express: Guía Definitiva      5- EXPRESS            |           V 6-MIDDLEWARE ¿Qué es un Middleware? mi-app/ ├ app.js └── package.json El middleware son  funciones intermedias  que procesan las solicitudes ( req ) y respuestas ( res ) en tu aplicación Express. Actúan como "puentes" entre la recepción de una petición y el envío de la respuesta final. 🔧 Tipos de Middleware 1.  Middleware de Aplicación Se ejecutan en  todas las rutas : javascript Copy Download app . use ( ( req , res , next ) => { console . log ( 'Middleware global' ) ; next ( ) ; // ¡No olvides next()! } ) ; 2.  Middleware de Ruta Específicos para ciertas rutas: javascript Copy Download app . get ( '/ruta' , ( req , res , next ) => { console . log ( 'Middleware solo para /ruta' ) ; next ( ) ; } ) ; 3.  Middleware de Terceros Paquetes externos como  body-...
Leer más