Render Web Template com Node.js Express
Geração de template HTML com Node.js Express
Entregar páginas Web interpretando como se fossem estáticas, reduz a carga de processamento pelo cliente, executando pelo servidor onde pode estar a base de dados e outros recursos, podendo ser disponíveis somente neste ambiente
Montagem do Modelo
Fazendo uso do Jinja, um modelo de sintaxe e semântica, montamos um documento HTML, fazendo uso de delimitadores para expressões {{ e }} e controles de fluxo {% e %}
Assim inserimos um valor direto no corpo do arquivo, usando a extensão twig e salvando na pasta view para interpretação
<!doctype html>
<h1>Hello {{ nome }}</h1>Com o uso de if mudamos o fluxo de trechos de código
<!doctype html>
{% if nome %}
<h1>Hello {{ nome }}!</h1>
{% else %}
<h1>Hello, World!</h1>
{% endif %}ou por uso de if ternário, seguindo o padrão do JavaScript
<!doctype html>
<h1>Hello, {{ (nome ? nome : 'World') }}!</h1>Através da iteração de uma lista de objetos construímos uma sequência de tags com vários links, salvando na pasta de view com o nome de lista.twig
<!doctype html>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>Com o uso um modelo padrão, salvando na pasta de view com o nome de base.twig
<!doctype html>
<h1>{% block titulo %}{% endblock %}</h1>
<div class="wrapper">{% block corpo %}{% endblock %}</div>As definições de bloco {% block titulo %} e {% block corpo %} podem ser preenchidas por qualquer página ao estender o documento de base, vamos fazer isso no lista.twig
{% extends 'base.twig' %} {% block titulo %} Página Teste {% endblock %} {%
block corpo %}
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
{% endblock %}A estrutura de arquivos deve ficar assim:
/view /hello.twig /lista.twig /base.twigPreparação
Instalar o pelo gerenciador os pacotes express, twig, path e serve-favicon
npm i express twig path serve-faviconIniciando o arquivo server.js com a declaração do Express e do Twig
var Twig = require("twig"),
express = require("express"),
app = express()Interpretação
Adicionando no arquivo server.js a opção de rotas para ouvir o caminho /hello/ com e sem parâmetros
app.get("/hello/:param", function (req, res) {
res.render("hello.twig", { name: req.params.param })
})Também adicionando no arquivo server.js a /lista/ passando a listagem em navigation como fixa para ilustração
app.get("/lista/", function (req, res) {
list = [
{ href: "#1", caption: "primeiro" },
{ href: "#2", caption: "segundo" },
]
res.render("lista.twig", { navigation: list })
})Arquivos Estáticos
Folhas de estilo não costumam sofre variação na execução do sistema, não sendo necessária a interpretação da mesma Para entregar devemos adicionar na pasta static na raiz do projeto, esse nome pode ser mudado
/server.js /view /static /style.cssDisponibilizando todos os arquivos disponibilizados na pasta
var path = require("path")
app.use(express.static(path.join(__dirname, "./static")))E adiciona a referência sem a pasta /static
<link rel="stylesheet" href="/style.css" />Favicon
Para adicionar o favicon.ico na página basta colocar o arquivo na pasta static e adicionar o trecho no server.js
var favicon = require("serve-favicon")
app.use(favicon(path.join(__dirname, "static", "favicon.ico")))Execução
Com os pacotes instalados e arquivo nomeado como server.js
node server.jsUma mensagem no shell apresenta que o site está disponível no localhost:3000, acesse os endereços para visualizar os resultados
