Primeiros passos com EJS: Como gerenciar templates de HTML dinâmico
EJS é um poderoso template engine para manipulação de elementos HTML dentro do Node JS.
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>