Render Web Template (Express)

Lorem lipsunm

Entregar páginas Web intepretando 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 disponiveis somente neste ambiente

Montagem do Modelo

Fazendo uso do Jinja, um modelo de sintaxe e semantica, 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 treços 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 construimos 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.twig

Preparação

Instalar o pelo gerenciador os pacotes express, twig, path e serve-favicon

npm i express twig path serve-favicon

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

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 intepreção da mesma Para entregar devemos adicionar na pasta static na raiz do projeto, esse nome pode ser mudado

/server.js
/view
/static
    /style.css

Disponibilizando 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.js

Uma mensagem no shell apresenta que o site está disponível no localhost:3000, acesse os endereços para visualizar os resultados

Referências

Express - API 4.x
NPM - Twig

Comentários