Cómo usar EJS para crear plantillas para su aplicación Node

Introducción

Al crear rápidamente aplicaciones Node, a veces es necesario contar con una forma rápida de crear una plantilla para su aplicación.

Jade viene como el motor de plantillas predeterminado para Express, pero la sintaxis de Jade puede ser demasiado compleja para muchos casos de uso.

Las plantillas JavaScript integradas (EJS) se pueden utilizar como un motor de plantillas alternativo.

En este artículo, aprenderá cómo aplicar EJS a una aplicación Express, incluir partes repetibles de su sitio y pasar datos a las vistas.

Implemente sus aplicaciones frontend desde GitHub con la plataforma de aplicaciones DigitalOcean . Deje que DigitalOcean se concentre en escalar su aplicación.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Un entorno de desarrollo local para Node.js. Sigue Cómo instalar Node.js y crear un entorno de desarrollo local .

Nota: Puede encontrar un repositorio git del código de demostración completo en GitHub .

Este tutorial se escribió originalmente para expresslas versiones v4.17.1 y ejsv3.1.5. Se verificó con Node v16.0.0, npmv7.11.1, expressv4.17.1 y ejsv3.1.6.

Paso 1: Configuración del proyecto

Primero, abra su ventana de terminal y cree un nuevo directorio de proyecto:

mkdir ejs-demo

Luego, navegue hasta el directorio recién creado:

cd ejs-demo

En este punto, puedes inicializar un nuevo proyecto npm:

npm init -y

A continuación, deberá instalar el expresspaquete:

npm install express@4.17.1

Luego instala el ejspaquete:

npm install ejs@3.1.6

En este punto, tienes un nuevo proyecto listo para usar Express y EJS.

Paso 1: Configuración conserver.js

Con todas las dependencias instaladas, configuremos la aplicación para usar EJS y configuremos las rutas para la página de índice y la página Acerca de.

Crea un nuevo server.jsarchivo y ábrelo con tu editor de código y agrega las siguientes líneas de código:

servidor.js

var express = require('express');var app = express();// set the view engine to ejsapp.set('view engine', 'ejs');// use res.render to load up an ejs view file// index pageapp.get('/', function(req, res) {  res.render('pages/index');});// about pageapp.get('/about', function(req, res) {  res.render('pages/about');});app.listen(8080);console.log('Server is listening on port 8080');

Este código define la aplicación y escucha en el puerto 8080.

Este código también establece EJS como el motor de visualización para la aplicación Express usando:

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

Observa cómo el código envía una vista al usuario mediante res.render(). Es importante tener en cuenta que res.render()buscará viewsla vista en una carpeta. Por lo tanto, solo tienes que definirla, pages/indexya que la ruta completa es views/pages/index.

A continuación, creará las vistas utilizando EJS.

Paso 2: creación de los parciales de EJS

Al igual que muchas de las aplicaciones que creas, habrá una gran cantidad de código que se reutilizará. Estos se consideran archivos parciales . En este ejemplo, habrá tres archivos parciales que se reutilizarán en la página de índice y la página Acerca de: head.ejs, header.ejsy footer.ejs. Ahora, creemos esos archivos.

Crear un nuevo viewsdirectorio:

mkdir views

Luego, crea un nuevo partialssubdirectorio:

mkdir views/partials

En este directorio, crea un nuevo head.ejsarchivo y ábrelo con tu editor de código. Agrega las siguientes líneas de código:

vistas/parciales/head.ejs

meta charset="UTF-8"titleEJS Is Fun/title!-- CSS (load bootstrap from a CDN) --link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css"style  body { padding-top:50px; }/style

Este código contiene metadatos para headun documento HTML. También incluye estilos Bootstrap .

A continuación, crea un nuevo header.ejsarchivo y ábrelo con el editor de código. Agrega las siguientes líneas de código:

vistas/parciales/encabezado.ejs

nav  a href="/"EJS Is Fun/a  ul    li      a href="/"Home/a    /li    li      a href="/about"About/a    /li  /ul/nav

Este código contiene la navegación para un documento HTML y utiliza varias clases de Bootstrap para el estilo.

A continuación, crea un nuevo footer.ejsarchivo y ábrelo con el editor de código. Agrega las siguientes líneas de código:

vistas/parciales/pie de página.ejs

pcopy; Copyright 2020 The Awesome People/p

Este código contiene información de derechos de autor y utiliza varias clases de Bootstrap para el estilo.

A continuación, utilizarás estos parciales en index..ejsy about.ejs.

Paso 3: agregar los parciales de EJS a las vistas

Tienes tres parciales definidos. Ahora puedes includeincluirlos en tus vistas.

Úselo para incrustar una parte de EJS en otro archivo.%- include('RELATIVE/PATH/TO/FILE') %

• El guión %-en lugar de simplemente %indicarle a EJS que represente HTML sin formato.
• La ruta al parcial es relativa al archivo actual.

Luego, crea un nuevo pagessubdirectorio:

mkdir views/pages

En este directorio, crea un nuevo index.ejsarchivo y ábrelo con tu editor de código. Agrega las siguientes líneas de código:

vistas/paginas/index.ejs

!DOCTYPE htmlhtmlhead  %- include('../partials/head'); %/headbodyheader  %- include('../partials/header'); %/headermain  div    h1This is great/h1    pWelcome to templating using EJS/p  /div/mainfooter  %- include('../partials/footer'); %/footer/body/html

Guarde los cambios en este archivo y luego ejecute la aplicación:

node server.js

Si visita http://localhost:8080/mediante un navegador web, podrá observar la página de índice:

A continuación, crea un nuevo about.ejsarchivo y ábrelo con el editor de código. Agrega las siguientes líneas de código:

vistas/paginas/acerca de.ejs

!DOCTYPE htmlhtmlhead  %- include('../partials/head'); %/headbodyheader  %- include('../partials/header'); %/headermaindiv  div    div      h1This is great/h1      pWelcome to templating using EJS/p    /div  /div  div    div      h3Look I'm A Sidebar!/h3    /div  /div/div/mainfooter  %- include('../partials/footer'); %/footer/body/html

Este código agrega una barra lateral de Bootstrap para demostrar cómo se pueden estructurar los parciales para reutilizarlos en diferentes plantillas y páginas.

Guarde los cambios en este archivo y luego ejecute la aplicación:

node server.js

Si visita http://localhost:8080/aboutdesde un navegador web, podrá observar la página Acerca de con una barra lateral:

Ahora puede comenzar a usar EJS para pasar datos desde la aplicación Node a las vistas.

Paso 4: Pasar datos a vistas y parciales

Definamos algunas variables básicas y una lista para pasar a la página de Índice.

Vuelva server.jsa visitar su editor de código y agregue las siguientes líneas de código dentro de la app.get('/')ruta:

servidor.js

var express = require('express');var app = express();// set the view engine to ejsapp.set('view engine', 'ejs');// use res.render to load up an ejs view file// index pageapp.get('/', function(req, res) {  var mascots = [    { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},    { name: 'Tux', organization: "Linux", birth_year: 1996},    { name: 'Moby Dock', organization: "Docker", birth_year: 2013}  ];  var tagline = "No programming concept is complete without a cute animal mascot.";  res.render('pages/index', {    mascots: mascots,    tagline: tagline  });});// about pageapp.get('/about', function(req, res) {  res.render('pages/about');});app.listen(8080);console.log('Server is listening on port 8080');

Este código define una matriz llamada mascotsy una cadena llamada tagline. A continuación, vamos a utilizarlas en index.ejs.

Representación de una única variable en EJS

Para hacer eco de una sola variable, puedes utilizar %= tagline %.

Vuelva index.ejsa visitar su editor de código y agregue las siguientes líneas de código:

vistas/paginas/index.ejs

!DOCTYPE htmlhtmlhead  %- include('../partials/head'); %/headbodyheader  %- include('../partials/header'); %/headermain  div    h1This is great/h1    pWelcome to templating using EJS/p    h2Variable/h2    p%= tagline %/p  /div/mainfooter  %- include('../partials/footer'); %/footer/body/html

Este código mostrará el taglinevalor en la página de índice.

Recorrer datos en bucle en EJS

Para recorrer los datos en bucle, puedes utilizar .forEach.

Vuelva index.ejsa visitar su editor de código y agregue las siguientes líneas de código:

vistas/paginas/index.ejs

!DOCTYPE htmlhtmlhead  %- include('../partials/head'); %/headbodyheader  %- include('../partials/header'); %/headermain  div    h1This is great/h1    pWelcome to templating using EJS/p    h2Variable/h2    p%= tagline %/p    ul      % mascots.forEach(function(mascot) { %        li          strong%= mascot.name %/strong          representing %= mascot.organization %,          born %= mascot.birth_year %        /li      % }); %    /ul  /div/mainfooter  %- include('../partials/footer'); %/footer/body/html

Guarde los cambios en este archivo y luego ejecute la aplicación:

node server.js

Si visita http://localhost:8080/desde un navegador web, podrá observar la página de índice con mascots:

Pasar datos a un parcial en EJS

El parcial de EJS tiene acceso a los mismos datos que la vista principal. Pero tenga cuidado. Si hace referencia a una variable en un parcial, debe definirse en cada vista que use el parcial o se generará un error.

También puedes definir y pasar variables a un parcial EJS en la sintaxis de inclusión de esta manera:

vistas/paginas/acerca de.ejs

...header  %- include('../partials/header', {variant: 'compact'}); %/header...

Pero nuevamente hay que tener cuidado al asumir que se ha definido una variable.

Si desea hacer referencia a una variable en un parcial que no siempre puede estar definido y darle un valor predeterminado, puede hacerlo de la siguiente manera:

vistas/parciales/encabezado.ejs

...emVariant: %= typeof variant != 'undefined' ? variant : 'default' %/em...

En la línea anterior, el código EJS representa el valor variantsi está definido y defaultsi no.

Conclusión

En este artículo, aprendió cómo aplicar EJS a una aplicación Express, incluir partes repetibles de su sitio y pasar datos a las vistas.

EJS le permite crear aplicaciones cuando no necesita una complejidad adicional. Al usar elementos parciales y tener la capacidad de pasar variables fácilmente a sus vistas, puede crear rápidamente algunas aplicaciones excelentes.

Consulta la documentación de EJS para obtener información adicional sobre las características y la sintaxis. Consulta Comparación de motores de plantillas de JavaScript: Jade, Mustache, Dust y más para comprender las ventajas y desventajas de los diferentes motores de visualización.