9-Nuestra Primera Plantilla con EJS
Creando Nuestra Primera Plantilla con EJS y Express
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 a configurar EJS (Embedded JavaScript) como motor de plantillas en un proyecto de Express.js, permitiéndonos generar páginas dinámicas de manera sencilla.
📦 Instalación de EJS
Primero, instalamos EJS en nuestro proyecto:
npm i ejs⚙ Configuración de Express para Usar EJS
En nuestro archivo principal (generalmente app.js o server.js), configuramos Express para usar EJS:
const express = require('express');
const app = express();
const port = 3000;
// Configuración del motor de plantillas EJS
app.set("view engine", "ejs");
app.set("views", __dirname + "/views");
// Carpeta pública para archivos estáticos (CSS, JS, imágenes)
app.use(express.static(__dirname + "/public"));
app.listen(port, () => {
console.log(`Servidor corriendo en http://localhost:${port}`);
});📂 Estructura del Proyecto
Antes de trabajar con plantillas, teníamos una estructura básica en la carpeta public:
mi-app/
├── public/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── app.js
│ └── 404.htmlAhora, agregaremos una carpeta views para nuestras plantillas dinámicas:
mi-app/
├── public/
│ ├── css/
│ │ └── style.css
│ ├── js/
│ │ └── app.js
├── views/
│ ├── index.ejs
│ └── template/
│ └── cabecera.ejs🖥 Renderizando una Página con EJS
En lugar de usar res.send(), ahora usaremos res.render(), que toma el nombre del archivo EJS y un objeto con los datos a mostrar.
Ejemplo en app.js:
app.get('/', (req, res) => {
res.render("index", { titulo: "Mi Primer Sitio con EJS" });
});Archivo views/index.ejs:
<%- include("template/cabecera") %>
<body>
<h1><%= titulo %></h1>
</body>🔹 Partials (Fragmentos Reutilizables)
Podemos dividir nuestro código en componentes reutilizables, como una cabecera (cabecera.ejs), y luego incluirlos con:
<%- include("template/cabecera") %>🚀 ¿Por qué Usar EJS?
✅ Dinamismo: Permite inyectar datos directamente desde el servidor.
✅ Reutilización: Podemos crear componentes (partials) para evitar repetir código.
✅ Fácil Integración: Funciona perfectamente con Express.
Conclusión
Con EJS, nuestras páginas pasan de ser estáticas a dinámicas, facilitando el desarrollo y mantenimiento del frontend. ¡Ahora puedes seguir explorando y creando plantillas más complejas!
¿Ya has usado EJS en tus proyectos? ¡Cuéntanos tu experiencia en los comentarios! 👇
Comentarios
Publicar un comentario