Primeiros passos com EJS: Como gerenciar templates de HTML dinâmico

Durante o desenvolvimento de aplicações web, nos deparamos frequentemente com a necessidade de exibir páginas HTML no navegador do cliente. Essas páginas podem variar desde uma simples landing page até um sistema complexo.

O Node.js conta com uma biblioteca chamada EJS (Embedded JavaScript Templating), que anteriormente era conhecida como Jade. O EJS não permite herança nem o uso de mixins, porém possui uma curva de aprendizado bastante acessível, visto que sua sintaxe é baseada no HTML que já conhecemos.

No artigo anterior, exploramos um pouco sobre como utilizar o sistema de rotas com o Express, portanto, neste artigo, não abordaremos rotas para sermos mais breves e diretos. Aqui, vamos focar no EJS.

Vamos iniciar o nosso projeto do zero, para isso vamos rodar os comandos abaixo dentro da pasta do nosso projeto.

Iniciar o npm.

npm init -y

Agora vamos instalar o Express e o EJS.

npm install express ejs

Com os pacotes instalados, vamos agora criar a estrutura de diretórios e nossos arquivos. Primeiro crie uma pasta chamada src e dentro dela um arquivo chamado index.js. Por fim, crie uma pasta chamada view dentro de src e nela um arquivo chamado home.ejs.

Nossa estrutura ficou assim:

src/
---- index.js
---- view/
-------- home.ejs

Definindo o EJS como template engine e chamando uma nova página passando parâmetros

Veja o código abaixo todo documentado com o processo de definir o template engine e como é feito a chamada para o nosso arquivo home.ejs.

// Importamos o express
const express = require('express')

// Instanciamos o express e definimos na constante app
const app = express()

// Definimos qual a porta de escuta
const port = 3000

// Aqui a gente define qual o template engine a ser utilizado para as nossas views
app.set('view engine', 'ejs')

// Definimos qual a pasta que contém nossas views, assim a gente usa o caminho relativo
app.set('views', 'src/view')

// Criamos uma rota do tipo get para a página inicial
app.get('/', (req, res) => {

    // Criamos uma constante qualquer com dados aleatórios
    const data = {
        nome: 'Gunnar Correa',
        site: 'satellasoft.com'
    }

    // Aqui vem a mágica, a gente chama o arquivo home.ejs e passa a nossa constante para ela
    // Note que chamamos apenas o nome do arquivo, sem a extensão
    res.render('home', data)
})

// Inicializamos os servidor na porta definida acima
app.listen(port, () => {
    // Exibimos no console a url do servidor
    console.log(`Listening on http://localhost:${port}`)
})

Vamos entender alguns pontos importantes:

Linha 11 - Aqui a gente basicamente diz para o Express qual o template engine a ser utilizado, no nosso caso, o EJS.;
Linha 14 - Definimos qual a pasta que contém os nossos templates. Aqui é importante se atentar a estrutura de diretórios, uma vez que o Express vai levar como base essa pasta;
Linha 27 - Usando o Response Render a gente passa no primeiro parâmetro o caminho do nosso arquivo (não precisa incluir a extensão) e também as variáveis que queremos compartilhar dentro do arquivo.

Criando o arquivo de template home EJS

Okay, até aqui a gente tem nossos pacotes instalados, nossas rotas, definição do EJS e nos falta o arquivo principal, o home.ejs.

Dentro do arquivo, insira o bloco de código abaixo.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>

<body>
    <h1>Olá, mundo!</h1>

    <p>Meu nome é: <%= nome %></p>
    <p>E meu site é: <%= site %></p>
</body>

</html>

Note que a gente usa estrutura de tags <%= %> e dentro dela o nome da nossa variável (índice do objeto literal que passamos) a ser impressa.

Incluindo arquivos no EJS

Agora imagine que você tenha um card ou qualquer outro elemento HTML que se repete, o interessante seria chamar ele e não sair duplicando para todo o projeto. Para resolver esse problema a gente pode usar o include, uma função do EJS, assim como está exibido abaixo. Note que também é possível passar valores para o arquivo que está sendo requisitado.

<% include cabecalho.ejs {titulo: "Título da Página"} %>

Condicional IF no EJS

Caso seja necessário fazer a verificação de itens condicionais com o uso do if, você pode usar a estrutura abaixo. Note que é exatamente como a gente já conhece, o EJS não complica nessa aplicação.

<main>
        <% if (pagina == 'login') { %>

            <p>Bem-vindo!</p>

        <% } else { %>

            <p>Por favor, faça login para acessar o conteúdo.</p>

        <% } %>
</main>

Laço de repetição For no EJS

Agora se você precisa utilizar o for, a utilização você confere no código abaixo.

<ul>
    <% for (let i = 0; i < itens.length; i++) { %>
        <li><%= itens[i] %></li>
    <% } %>
</ul>