Cómo Usar EJS para Plantillar tu Aplicación Node

Introducción

Cuando se crean aplicaciones de Node rápidamente, a veces es necesario encontrar una forma rápida de plantillar tu aplicación.

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

Las plantillas de JavaScript integradas (EJS) pueden ser utilizadas como un motor de plantillas alternativo.

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

Prerrequisitos

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

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

Este tutorial fue originalmente escrito para express v4.17.1 y ejs v3.1.5. Ha sido verificado con Node v16.0.0, npm v7.11.1, express v4.17.1, y ejs v3.1.6.

Paso 1 — Configuración del Proyecto

Primero, abre tu ventana de terminal y crea un nuevo directorio de proyecto:

mkdir ejs-demo

Luego, navega hacia el directorio recién creado:

cd ejs-demo

En este punto, puedes inicializar un nuevo proyecto npm:

npm init -y

A continuación, necesitarás instalar el paquete express:

npm install express@4.17.1

Luego instala el paquete ejs:

npm install ejs@3.1.6

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

Paso 1 — Configuración con server.js

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

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

var express = require('express');
var app = express();

// establece el motor de vista como ejs
app.set('view engine', 'ejs');

// utiliza res.render para cargar un archivo de vista ejs

// página de índice
app.get('/', function(req, res) {
  res.render('pages/index');
});

// página acerca de
app.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 vista para la aplicación Express usando:

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

Observa cómo el código envía una vista al usuario utilizando res.render(). Es importante tener en cuenta que res.render() buscará en una carpeta views la vista. Así que solo tienes que definir pages/index ya que la ruta completa es views/pages/index.

A continuación, crearás las vistas usando EJS.

Paso 2 — Creando los Parciales EJS

Como en muchas de las aplicaciones que construyes, habrá mucho código que se reutilizará. Estos se consideran parciales. En este ejemplo, habrá tres parciales que se reutilizarán en la página de índice y en la página Acerca de: head.ejs, header.ejs, y footer.ejs. Vamos a crear esos archivos ahora.

Crea un nuevo directorio views:

mkdir views

Luego, crea un nuevo subdirectorio partials:

mkdir views/partials

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

<meta charset="UTF-8">
<title>EJS 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 la head de un documento HTML. También incluye estilos de Bootstrap.

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/">EJS Is Fun</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" 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.

Luego, crea un nuevo archivo footer.ejs y ábrelo con tu editor de código. Agrega las siguientes líneas de código:

<p class="text-center text-muted">&copy; 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.ejs y about.ejs.

Paso 3 — Agregando los Parciales EJS a las Vistas

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

Usa <%- include('RUTA/RELATIVA/A/ARCHIVO') %> para incrustar un parcial EJS en otro archivo.

• El guion <%- en lugar de solo <% indica a EJS que renderice HTML sin formato.
• La ruta al parcial es relativa al archivo actual.

Entonces, crea un nuevo subdirectorio pages:
“`plaintext

mkdir views/pages

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

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Guarda los cambios en este archivo y luego ejecuta la aplicación:

node server.js

Si visitas http://localhost:8080/ en un navegador web, podrás observar la página de índice:

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

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
<div class="row">
  <div class="col-sm-8">
    <div class="jumbotron">
      <h1>This is great</h1>
      <p>Welcome to templating using EJS</p>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="well">
      <h3>Look I'm A Sidebar!</h3>
    </div>
  </div>
</div>
</main>

<footer>
  <%- 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 reutilizar en diferentes plantillas y páginas.

Guarda los cambios en este archivo y luego ejecuta la aplicación:

node server.js

Si visitas http://localhost:8080/about en un navegador web, podrás observar la página Acerca con una barra lateral:

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

Paso 4 — Pasando Datos a Vistas y Parciales

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

Vuelve a abrir server.js en tu editor de código y agrega las siguientes líneas de código dentro de la ruta app.get('/'):

var express = require('express');
var app = express();

// establecer el motor de vista como ejs
app.set('view engine', 'ejs');

// utilizar res.render para cargar un archivo de vista ejs

// página de índice
app.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
  });
});

// página acerca de
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

Este código define un array llamado mascots y una cadena llamada tagline. A continuación, vamos a usarlos en index.ejs.

Renderizar una Variable Única en EJS

Para imprimir una variable única, puedes usar <%= tagline %>.

Vuelve a index.ejs en tu editor de código y añade las siguientes líneas de código:

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

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

Iterando sobre Datos en EJS

Para iterar sobre datos, puedes usar .forEach.

Vuelve a index.ejs en tu editor de código y añade las siguientes líneas de código:

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>

    <ul>
      <% mascots.forEach(function(mascot) { %>
        <li>
          <strong><%= mascot.name %></strong>
          representing <%= mascot.organization %>,
          born <%= mascot.birth_year %>
        </li>
      <% }); %>
    </ul>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Guarda los cambios en este archivo y luego ejecuta la aplicación:

node server.js

Si visitas http://localhost:8080/ en un navegador web, podrás observar la página de índice con los mascots:

Pasando datos a un parcial en EJS

El parcial de EJS tiene acceso a todos los mismos datos que la vista principal. Pero ten cuidado. Si estás haciendo referencia a una variable en un parcial, necesita estar definida en cada vista que utilice el parcial o lanzará un error.

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

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

Pero nuevamente debes tener cuidado al asumir que una variable ha sido definida.

Si deseas hacer referencia a una variable en un parcial que no siempre esté definida, y darle un valor predeterminado, puedes hacerlo de la siguiente manera:

...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...

En la línea anterior, el código de EJS está renderizando el valor de variant si está definido, y default si no lo está.

Conclusión

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

EJS te permite construir aplicaciones cuando no necesitas complejidad adicional. Al utilizar parciales y tener la capacidad de pasar fácilmente variables a tus vistas, puedes construir algunas aplicaciones geniales rápidamente.

Consulta la documentación de EJS para obtener información adicional sobre las características y la sintaxis. Consulta Comparando Motores de Plantillas de JavaScript: Jade, Mustache, Dust y Más para comprender los pros y los contras de diferentes motores de vistas.