Express com Template Engine PUG

Com o Express nós podemos utilizar os Templates Engines, eles permitem criarmos HTML com elementos estáticos e elementos dinâmicos (sendo processado no servidor).

Um dos Templates Engines que é muito utilizado é o PUG, isso mesmo, o do cachorrinho :D. Veremos como instalar, um pouco sobre a sintaxe e como utilizar.

Curso Node.js - Fundamentos

Conhecer o curso

Preparando o ambiente Node.js

Antes de tudo, você deve estar com o ambiente Node.js instalado e configurado, para isto basta seguir os passos do nosso artigo Instalação do node.js no windows, mac e linux.

Logo em seguida você precisa instalar o Express, em nosso artigo criando um servidor HTTP com express explicamos o passo a passo da instalação e como configurar um servidor.

Após tudo configurado e funcionando, vamos efetivamente a instalação do pug.

Instalando o template engine Pug

Primeiramente, vamos criar um projeto novo, vou nomeá-lo de PUG. Para isto, vamos criar o diretório PUG e iniciar o nosso projeto com o comando npm init.P. Posteriormente, instalar o Express e configurar nosso servidor HTTP, a estrutura do projeto ficará da seguinte forma:

E o conteúdo do nosso arquivo express.js:

import express from 'express';

const app = express();

app.get('/', (req, res) => 
	res.send('<h1 style="color: blue">Utilizando Template Engine Pug com Express</h1>')
);

app.listen(3000, () => 
	console.log('Servidor iniciado na porta 3000')
);

Logo, vamos instalar o Template Engine Pug digitando o comando npm install pug no terminal.

Após a instalação vamos estruturar melhor o nosso projeto. Crie uma pasta src na raiz e dentro dela a pasta views, será nesta pasta que ficará os arquivos que vamos desenvolver utilizando o pug. Em seguida crie o arquivo index.pug:

Curso Express - Desenvolvendo aplicações web

Conhecer o curso

Ótimo! Estamos quase prontos para utilizar o PUG, mas antes ainda precisamos configurar o nosso arquivo express.js para ele entender que vamos utilizar um Template Engine. Para isto, vamos utilizar o método app.set(), primeiramente para apontar que vamos utilizar o PUG e logo em seguida para apontar onde estará os arquivos views, com isso teremos o seguinte código:

import express from 'express';

const app = express();

app.set('view engine', 'pug')
app.set('views', './src/views')

app.get('/', (req, res) =>
	res.render('index')
);

app.listen(3000, () =>
	console.log('Servidor iniciado na porta 3000')
);

Utilizando o Template Engine PUG

Desta forma nosso arquivo index.pug será carregado quando a rota principal ‘/’ for chamada. Porém, agora precisamos trabalhar no arquivo index.pug e colocar algum conteúdo para ser retornado, vamos iniciar com um código simples:

head
    title Utilizando Template Engine PUG
body
    h1#id Este é um exemplo de como utilizar o PUG
    p.classe Exemplo de parágrafo com classe
    p(style={color: 'red'}) Exemplo de parágrafo com PUG e estilo inline

Perceba que o PUG possui várias características próprias, vamos listar algumas delas aqui:

• Não há tags de fechamento;
• Indentação é fundamental (justamente pela falta de tags de fechamento);
• Para utilizar um ID em um elemento, usar o ‘#’;
• Para utilizar uma Classe em um elemento, usar o ‘.’ ;
• Podemos estilizar atributos em um elemento, como o ‘style’, utilizar entre ‘( )’ e ‘{ }’.

Você pode acessar e entender melhor a sintaxe do PUG visitando sua documentação.

Utilizando o PUG nós podemos também criar códigos dinâmicos junto ao HTML, pois ele será compilado no servidor. Para ficar mais claro vamos fazer um exemplo exibindo uma lista de carros.

Vamos criar o array no nosso arquivo express.js:

import express from 'express';

const app = express();

app.set('view engine', 'pug')
app.set('views', './src/views')

app.get('/', (req, res) =>
	res.render('index', {
		carros: [               //array de carros
            "fiesta",
            "gol",
            "uno"
        ]
	})
);

app.listen(3000, () =>
	console.log('Servidor iniciado na porta 3000')
);

E agora exibir a lista em nosso arquivo index.pug utilizando for:

head
    title Utilizando Template Engine PUG
body
    h1#id Este é um exemplo de como utilizar o PUG
    p.classe Exemplo de parágrafo com classe
    p(style={color: 'red'}) Exemplo de parágrafo com PUG e estilo inline 
    ul
        for carro in carros                  //usamos for para listar o array
                li= carro

Feito essas alterações, o resultado exibido será:

Conclusão

Neste artigo aprendemos a utilizar o template engine PUG com express, ele é muito útil para criar um HTML dinâmico, pois ele é processado pelo servidor. Neste caso o template engine nos permite imprimir variáveis, utilizar condicionais, estruturas de repetição, entre outras possibilidades no HTML.

Curso Node.js - Templates com PUG

Conhecer o curso

Por fim, caso queira aprender mais sobre Node.js saiba que aqui na TreinaWeb temos o curso Node.js - Templates com PUG que possui 01h07 de vídeos e um total de 15 exercícios. Conheça também nossos outros cursos de Node.js.

Veja quais são os tópicos abordados durante o curso de Node.js - Templates com PUG:

• Integração com o Express;
• Modos de carregamento e envio de informações para as views;
• Modos de impressão do PUG;
• Condicionais;
• Laços de repetição;
• Uso de variáveis;
• Criação e herança de Layouts;