Cómo puedo usar plantillas (templates) en Express

Lenguaje de Programación

•

Escuela Universidad Nacional

0

Francisco Sánchez

21/7/2023

¡Estudia con miles de materiales!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Lenguaje de Programación

8707 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

¿Cómo puedo usar plantillas (templates) en Express.js? 
 
En Express.js, puedes utilizar plantillas (templates) para generar vistas del lado del 
servidor y enviarlas al cliente como respuestas HTML. Esto te permite crear páginas 
web dinámicas en las que el contenido se genera dinámicamente antes de ser enviado al 
cliente. Algunos de los motores de plantillas populares que se pueden usar con 
Express.js son EJS (Embedded JavaScript), Pug (anteriormente conocido como Jade), 
Handlebars, entre otros. 
A continuación, te muestro cómo usar plantillas EJS como ejemplo: 
Paso 1: Instala EJS como una dependencia en tu proyecto utilizando npm: 
npm install ejs 
 
Paso 2: Configura Express.js para utilizar EJS como motor de plantillas. Esto se hace 
usando el método app.set() y estableciendo "view engine" como "ejs": 
 
const express = require('express'); 
const app = express(); 
 
// Configurar EJS como motor de plantillas 
app.set('view engine', 'ejs'); 
Paso 3: Crea una carpeta llamada "views" en el directorio de tu proyecto. Dentro de esta 
carpeta, coloca tus archivos de plantillas con extensión ".ejs". Estos archivos contendrán 
el HTML con código EJS embebido que se renderizará dinámicamente. 
Por ejemplo, crea un archivo llamado "index.ejs" dentro de la carpeta "views": 
<!-- index.ejs --> 
<!DOCTYPE html> 
<html> 
<head> 
 <title>Plantillas en Express.js</title> 
</head> 
<body> 
 <h1><%= titulo %></h1> 
 <p>Bienvenido a <%= nombreApp %></p> 
</body> 
</html> 
 
Paso 4: Define una ruta en tu aplicación Express.js y utiliza el método res.render() 
para renderizar la plantilla EJS y enviarla al cliente: 
const express = require('express'); 
const app = express(); 
 
// Configurar EJS como motor de plantillas 
app.set('view engine', 'ejs'); 
 
// Ruta para la página principal 
app.get('/', (req, res) => { 
 const titulo = 'Página de inicio'; 
 const nombreApp = 'Mi Aplicación'; 
 res.render('index', { titulo, nombreApp }); 
}); 
 
app.listen(3000, () => { 
 console.log('Servidor Express escuchando en 
http://localhost:3000'); 
}); 
 
En este ejemplo, cuando el cliente accede a la ruta raíz ("/"), el manejador de ruta utiliza 
res.render() para renderizar la plantilla "index.ejs" y enviarla como respuesta al 
cliente. Los valores de "titulo" y "nombreApp" se pasan como objetos y se utilizan en la 
plantilla EJS mediante el uso de etiquetas <%= %>, lo que permite que los valores se 
muestren dinámicamente en la página generada. 
Con estos pasos, hemos configurado y utilizado plantillas EJS en tu aplicación Express.js 
para crear páginas web dinámicas con contenido generado en el servidor. Puedes seguir 
el mismo proceso para utilizar otros motores de plantillas compatibles con Express.js, 
como Pug o Handlebars, si así lo prefieres. 
 
http://localhost:3000/