Express com Template Engine PUG \| TreinaWeb               Promoção no ar   Matricule-se agora e garanta **54% de desconto**  

  Termina em   Tempo restante da oferta: 13 Horas 

 36 Min 

 27 Seg 

   Tempo restante da oferta: 13 36 27 

  [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) 

   [                ](https://www.treinaweb.com.br)  Explorar  

 [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) 

     [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Express com Template Engine PUG  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 

# Express com Template Engine PUG

 Neste artigo vamos estruturar um projeto utilizando Express com o Template Engine PUG e entender as suas principais características.

 [ Wesley Gado ](https://www.treinaweb.com.br/blog/autor/wesley-gado) 5 anos atrás

  ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/TEMPLATE-ENGINE-PUG-EXPRESS.png)  

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.

![pug](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/pug.png)

[  ![Node.js - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/node-js.svg)   Curso Node.js - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/nodejs-fundamentos)

## 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](https://www.treinaweb.com.br/blog/instalacao-do-node-js-windows-mac-e-linux).

Logo em seguida você precisa instalar o Express, em nosso artigo [criando um servidor HTTP com express](https://www.treinaweb.com.br/blog/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:

![Estrutura Express](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/estrutura-express.png)

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

```jsx
import express from 'express';

const app = express();

app.get('/', (req, res) => 
	res.send('Utilizando Template Engine Pug com Express')
);

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*:

![Estrutura express pug](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/estrutura-express-pug.png)

[  ![Express - Desenvolvendo aplicações web](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/express.svg)   Curso Express - Desenvolvendo aplicações web Conhecer o curso ](https://www.treinaweb.com.br/curso/express-desenvolvendo-aplicacoes-web)

Ó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:

```jsx
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:

```html
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](https://pugjs.org/api/getting-started.html).

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:

```jsx
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:

```jsx
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á:

![Exibindo Arrays com Puug](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/exibindo-array-pug.png)

## 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.

[  ![Node.js - Templates com PUG](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/node-js.svg)   Curso Node.js - Templates com PUG Conhecer o curso ](https://www.treinaweb.com.br/curso/nodejs-templates-com-pug)

Por fim, caso queira aprender mais sobre Node.js saiba que aqui na [TreinaWeb](https://treinaweb.com.br/) temos o curso [Node.js - Templates com PUG ](https://www.treinaweb.com.br/curso/nodejs-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](https://www.treinaweb.com.br/cursos?q=node).

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;

- [ #Template Engine ](https://www.treinaweb.com.br/blog/tag/template-engine)
- [ #express ](https://www.treinaweb.com.br/blog/tag/express)
- [ #Node.js ](https://www.treinaweb.com.br/blog/tag/node-js)

Autor

 ![Wesley Gado](//secure.gravatar.com/avatar/1b770ca482a7232b1885881430a592bb?d=mm)

## Wesley Gado

 Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão. 

 [Todos os artigos](https://www.treinaweb.com.br/blog/autor/wesley-gado)  

## Continue estudando

 Transforme leitura em prática com os cursos e formações da TreinaWeb.

 [Ver cursos](https://www.treinaweb.com.br/cursos)   

  Continue lendo

## Artigos relacionados

- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/EJS-400x280.png)  [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 

     5 anos atrás

    ##  [ Utilizando template engine EJS com Node.js ](https://www.treinaweb.com.br/blog/utilizando-template-engine-ejs-com-node-js) 

     Neste artigo vamos aprender a utilizar a Template Engine EJS com Node.js e também alguns recursos interessantes desta ferramenta.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/ROTAS-EXPRESS-400x280.png)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     6 anos atrás

    ##  [ Criando Rotas com Express.js ](https://www.treinaweb.com.br/blog/criando-rotas-com-express-js) 

     Vamos aprender a configurar rotas com o Express.js, com exemplos utilizando as requisições GET, POST, PUT e DELETE.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png)  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 

     3 anos atrás

    ##  [ Guia do framework NestJS ](https://www.treinaweb.com.br/blog/guia-do-framework-nestjs) 

     Neste guia do framework NestJS vamos fazer um compilado de tópicos úteis sobre o framework, desde criar um projeto básico até autenticação.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/NEST-JS-COM-HANDLEBARS-400x280.png)  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 

     4 anos atrás

    ##  [ NestJS com template engine handlebars ](https://www.treinaweb.com.br/blog/nestjs-com-template-engine-handlebars) 

     Neste artigo vamos aprender a configurar o NestJS com o handlebars, uma template engine que permite criarmos views dinâmicas e robustas.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/SERVIDOR-HTTP-EXPRESS-JS-400x280.png)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     6 anos atrás

    ##  [ Criando um servidor HTTP com Express ](https://www.treinaweb.com.br/blog/criando-um-servidor-http-com-express) 

     O Express é um framework utilizado em conjunto com o Node.js. Ele possui características que facilitam o desenvolvimento de nossas aplicações web e APIs, como um sistema de rotas completo, tratamento de exceções, gerenciamento de requisições HTTP e muito mais.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/06/NODE-SQUELIZE-MYSQL-400x280.png)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     5 anos atrás

    ##  [ Usando Sequelize ORM com Node e Express ](https://www.treinaweb.com.br/blog/usando-sequelize-orm-com-node-e-express) 

     Vamos aprender a configurar uma aplicação com banco de dados MySQL usando Sequelize ORM com Node.js e Express.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png)  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 

     4 anos atrás

    ##  [ Como realizar upload de arquivos locais no NestJS ](https://www.treinaweb.com.br/blog/como-realizar-upload-de-arquivos-locais-no-nestjs) 

     Neste artigo vamos aprender a utilizar o recurso de upload de arquivos locais com o NestJS utilizando a biblioteca Multer do Express.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/NEST-JS-CLASS-VALIDATOR-CLASS-TRANSFORMER-400x280.png)  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 

     4 anos atrás

    ##  [ Como enviar emails com NestJS e Nodemailer ](https://www.treinaweb.com.br/blog/como-enviar-emails-com-nestjs-e-nodemailer) 

     Neste artigo vamos aprender como enviar emails utilizando o NestJS e o Nodemailer, um dos módulos mais utilizados do ecossistema NodeJS.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/NEST-JS-400x280.png)  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 

     5 anos atrás

    ##  [ O que é NestJS? ](https://www.treinaweb.com.br/blog/o-que-e-nestjs) 

     Vamos ver neste artigo uma breve descrição sobre o que é o NestJS e como criar uma aplicação base em minutos.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png)  [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 

     3 anos atrás

    ##  [ Trabalhando com Prisma ORM e NestJS ](https://www.treinaweb.com.br/blog/trabalhando-com-prisma-orm-e-nestjs) 

     Neste artigo vamos aprender os primeiros passos para trabalhar com o Prisma ORM e o NestJS.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png)  [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 

     3 anos atrás

    ##  [ Como realizar upload no S3 com NestJS ](https://www.treinaweb.com.br/blog/como-realizar-upload-no-s3-com-nestjs) 

     Neste artigo vamos aprender o passo a passo de como realizar o upload de arquivos para a AWS S3 utilizando uma aplicação NestJS.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/NEST-JS-CLASS-VALIDATOR-CLASS-TRANSFORMER-400x280.png)  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 

     4 anos atrás

    ##  [ Validação e Serialização no NestJS: class-validator e class-transformer ](https://www.treinaweb.com.br/blog/validacao-e-serializacao-no-nestjs-class-validator-e-class-transformer) 

     Vamos abordar a utilização de duas biblitecas de serialização e validação fundamentais no NestJS: class-validator e class-transformer

     Ler artigo

## Um ano de acesso total para você viver de programação.

 Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.

- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**

    **Garantia incondicional de satisfação** 

 Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.

### Acesso completo a todos os cursos e dezenas de Formações.

 12 meses 

  Economize R$ 840,00  54% OFF 

 de 12x R$ 129,00 por apenas

 12x  R$ 59,00

 sem juros no cartão de crédito ou R$ 599,00 à vista

  Oferta termina em  **13h 36min 27s**

- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!

 [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)

     [                ](https://www.treinaweb.com.br)

 Escola online de programação, tecnologia e IA.

- [  ](https://www.facebook.com/TreinaWeb/)
- [  ](https://www.instagram.com/treinaweb/)
- [  ](https://www.youtube.com/user/TreinaWeb)
- [  ](https://twitter.com/treinaweb)
- [  ](https://www.linkedin.com/company/treinaweb)
- [  ](https://github.com/treinaweb)

## Inscreva-se em nossa newsletter

Receba lançamentos, promoções e novidades.

   Seu nome     Seu WhatsApp     Seu melhor e-mail   Inscrever-se 

## Cursos

- [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs)
- [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end)
- [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end)
- [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
- [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados)
- [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing)
- [ IA ](https://www.treinaweb.com.br/categoria/ia)
- [ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)

## Conteúdo

- [ Formações ](https://www.treinaweb.com.br/formacoes)
- [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos)
- [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)

## A empresa

- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)

## Baixe nosso aplicativo

 [   Disponível na **App Store**  ](https://apps.apple.com/us/app/treinaweb/id1322729447) [   Disponível no **Google Play**  ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) 

  Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200   © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58