Cómo usar EJS para crear una plantilla de su aplicación Node

Introducción

Cuando se crean aplicaciones Node rápidas en el momento, a veces es necesario una forma fácil y rápida de crear plantillas de nuestra aplicación.

Jade llega como el motor de visualización para Express por defecto, pero la sintaxis de Jade puede ser demasiado compleja para muchos casos de uso. EJS es una alternativa que hace bien el trabajo y es fácil de configurar. Veamos cómo podemos crear una aplicación sencilla y usar EJS para incluir las partes repetibles de nuestro sitio (parciales) y pasar los datos a nuestras vistas.

Configurar la aplicación demo

Crearemos dos páginas para nuestra aplicación: una página con ancho completo y la otra con una barra lateral.

Estructura del archivo

Aquí están todos los archivos que necesitaremos para nuestra aplicación. Crearemos nuestra plantilla dentro de la carpeta de vistas y el resto son prácticas de Node bastante estándares.

- views
----- partials
---------- footer.ejs
---------- head.ejs
---------- header.ejs
----- pages
---------- index.ejs
---------- about.ejs
- package.json
- server.js

package.json albergará la información de nuestra aplicación de Node y las dependencias que necesitamos (express y EJS). server.jso albergará los ajustes de nuestro servidor Express, configuración. Definiremos nuestras rutas para nuestras páginas aquí.

Configuración de Node

Vamos a entrar en nuestro archivo package.json y configurar nuestro proyecto ahí.

{
  "name": "node-ejs",
  "main": "server.js",
  "dependencies": {
    "ejs": "^3.1.5",
    "express": "^4.17.1"
  }
}

Todo lo que necesitaremos es Express y EJS. Ahora tenemos que instalar las dependencias que acabamos de definir. Ejecute:

npm install

Con todas nuestras dependencias instaladas, ahora configuraremos nuestra aplicación para que utilice EJS y fijaremos nuestras rutas para las dos páginas que necesitamos: la página “Índice” (ancho completo) y la página “Acerca de” (barra lateral). Haremos todo esto dentro de nuestro archivo server.js.

// load the things we need
var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page
app.get('/', function(req, res) {
    res.render('pages/index');
});

// about page
app.get('/about', function(req, res) {
    res.render('pages/about');
});

app.listen(8080);
console.log('8080 is the magic port');

Aquí definimos nuestra aplicación y la configuramos para que se muestre en el puerto 8080. También debemos configurar EJS como el motor de visualización de nuestra aplicación Express usando app.set('view engine', 'ejs');. Observe cómo enviamos una vista al usuario usando res.render(). Es importante tener en cuenta que res.render() buscará en una carpeta de vistas la vista. Solo tenemos que definir pages/index, ya que la ruta completa es views/pages/index.

Iniciar nuestro servidor

Inicie el servidor usando:

node server.js

Ahora podemos ver nuestra aplicación en el navegador en http://localhost:8080 y http://localhost:8080/about. Nuestra aplicación está configurada y tenemos que definir nuestros archivos de vista y ver cómo EJS funciona ahí.

Cree los parciales de EJS

Igual que muchas aplicaciones que creamos, hay mucho código que se reutiliza. A esos códigos los llamamos parciales y definen tres archivos que usaremos en todo nuestro sitio: head.ejs, header.ejs y footer.ejs. Vamos a crear esos archivos ahora.

<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>

<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>

<p class="text-center text-muted">© Copyright 2020 The Awesome People</p>

Añada los parciales de EJS a Vistas

Ahora tenemos nuestros parciales definidos. Lo único que debemos hacer es incluirlos en nuestras vistas. Ahora veremos index.ejs y about.ejs y usaremos la sintaxis include para añadir los parciales.

Sintaxis para incluir un parcial de EJS

Utilice <%- include('RELATIVE/PATH/TO/FILE') %> para integrar un parcial de EJS en otro archivo.

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

<!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>

Ahora podemos ver nuestra vista definida en el navegador en http://localhost:8080.

Para la página de acerca de, también añadimos una barra lateral de bootstrap para demostrar cómo pueden estructurarse los parciales para que se reutilicen en diferentes plantillas y páginas.

<!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>

Si visitamos http://localhost:8080/about, podemos ver nuestra página de acerca de con una barra lateral

Ahora podemos empezar a usar EJS para pasar datos desde nuestra aplicación Node a nuestras vistas.

Pasar datos a Vistas y Parciales

Vamos a definir algunas variables básicas y una lista para pasar a nuestra página de inicio. Vuelva a su archivo server.js y añada lo siguiente dentro de su ruta app.get('/')

// index page
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
    });
});

Hemos creado una lista llamada mascots y una cadena sencilla llamada tagline. Vamos a entrar en nuestro archivo index.ejs para usarlas.

Renderizar una variable única en EJS

Para hacer eco de una variable, acabamos de usar <%= tagline %>. Vamos a añadir esto a nuestro archivo index.ejs:

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

Hacer bucle sobre los datos en EJS

Para hacer bucle sobre nuestros datos usaremos .forEach. Vamos a añadir esto a nuestro archivo:

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

Ahora podemos ver en nuestro navegador la nueva información que hemos añadido.

Pasar datos a un parcial en EJS

El parcial EJS tiene acceso a todos 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 utilice el parcial o arrojará un error.

También puede definir y pasar variables a un parcial EJS en la sintaxis include, de esta forma:

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

Pero de nuevo, debe tener cuidado y no asumir que una variable ha sido definida.

Si desea referenciar una variable en un parcial que puede no definirse siempre, y darle un valor predeterminado, puede hacerlo de esta forma:

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

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

Conclusión

EJS nos permite generar aplicaciones rápidas cuando no necesitamos algo demasiado complejo. Al usar parciales y tener la capacidad de pasar variables fácilmente a nuestras vistas, podemos crear algunas aplicaciones geniales rápidamente.

Para obtener más información sobre EJS, consulte los documentos oficiales aquí.

    return res.status(200).json(response.rows);
    
}catch(e){
    console.log(e);
    return res.status(500).json('Error Interno');
}