Utilizando template engine EJS com Node.js \| TreinaWeb               Promoção no ar   Matricule-se agora e garanta **54% de desconto**  

  Termina em   Tempo restante da oferta: 09 Horas 

 03 Min 

 43 Seg 

   Tempo restante da oferta: 09 03 43 

  [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) Utilizando template engine EJS com Node.js  [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 

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

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

  ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/EJS.png)  

O EJS (Embedded JavaScript Templating) é uma [Template Engine](https://www.treinaweb.com.br/blog/o-que-e-template-engine "Template Engine") que podemos utilizar com Node.js.

Assim como vimos no [artigo sobre PUG](https://www.treinaweb.com.br/blog/express-com-template-engine-pug "artigo sobre PUG"), com a template engine nós podemos criar as páginas das nossas aplicações em Node.js de forma dinâmica sem depender das limitações do HTML.

A grande diferença entre o EJS e o PUG é que o EJS segue uma sintaxe muito semelhante ao HTML, desta forma qualquer desenvolvedor que já conhece HTML não terá nenhuma dificuldade de trabalhar com o EJS, ao contrário do PUG que possuí algumas particularidades e que pode, no início, afetar a produtividade do desenvolvedor.

Vamos criar uma aplicação simples utilizando o EJS para entender como podemos utiliza-lo na prática.

 [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript)

## Ambiente Node.js e Express

Primeiramente precisamos configurar nosso ambiente Node.js, para instalar o Node.js você pode seguir o 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 é necessário [instalar e criar um servidor utilizando o Express](https://www.treinaweb.com.br/blog/criando-um-servidor-http-com-express).

Feito estes passos podemos finalmente utilizar o EJS para renderizar as nossas páginas utilizando várias funções interessantes.

[  ![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)

## Instalando o template engine EJS

Com o ambiente Node.js instalado, vamos instalar o EJS executando o seguinte comando no terminal:

```jsx
npm install ejs

```

Agora vamos criar a estrutura da nossa aplicação da seguinte maneira:

![Estrutura aplicação node.js](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/estrutura-app.png)

Onde:

- node\_modules: é a pasta criada automaticamente pelo npm com os pacotes que vamos utilizar.
- views: é a pasta que devemos criar para guardar os arquivos das páginas, no caso utilizando EJS.
- app.js: nosso arquivo base onde criamos nosso servidor e onde vamos criar a rota para apontar as views que deverão ser renderizadas quando houver uma requisição. Aqui vale a observação de que o ideal é cada arquivo ter sua responsabilidade bem definida, vamos utilizar somente o arquivo app.js neste exemplo para fins didáticos e facilitar o entendimento.
- package-lock.json e package.json: criados quando iniciamos a aplicação, vale ressaltar que estamos utilizando o padrão do ES6, portanto, é necessário adicionar a linha `'type': 'module'` ao arquivo package.json.

Ótimo, já estamos com tudo o que precisamos devidamente configurado, agora precisamos apontar para o Express que vamos utilizar o template engine EJS. Podemos fazer isso da seguinte maneira:

```jsx
import express from 'express';

const app = express();
const port = 3000;

app.set('view engine', 'ejs');
app.set('views', './views');

app.listen(port,() => {
    console.log(`Servidor rodando na porta ${port}`);
});

```

Revisando o código do arquivo `app.js`: importamos o `express`, criamos a constante `app`, com isso o Express permite a utilização do método `app.set()`.

Nele primeiramente passamos qual template engine vamos utilizar, como primeiro parâmetro passamos o termo `view engine`, e o segundo parâmetro `ejs` (poderia ser o PUG, caso fosse utilizar outro template engine). Desta forma o Express entende que queremos usar o EJS.

Logo após apontar a template engine que será utilizada, é necessário apontar também onde estarão os arquivos de interface, para isso vamos adicionar outro `app.set()`, passando o termo `views` como primeiro parâmetro e o diretório como segundo parâmetro, no do exemplo, `./views`.

Portanto, agora podemos criar uma rota get e nela vamos passar qual view será retornada quando houver essa requisição, o arquivo `app.js` ficará dessa forma:

```jsx
import express from 'express';

const app = express();
const port = 3000;

app.set('view engine', 'ejs');
app.set('views', './views');

app.get('/', (req, res) => {
    res.render('home');
});

app.listen(port,() => {
    console.log(`Servidor rodando na porta ${port}`);
});

```

Perceba que criamos a rota principal e utilizamos o `res.render('home')`, ou seja, ao acessar a rota `/`, será exibido a view home, essa que vamos criar logo em seguida, neste caso somente com uma tag `h1` para exemplo:

```jsx
Página sendo exibida utilizando EJS

```

Ao acessar a rota localhost:3000, vamos obter o seguinte resultado:

![Rota retornando template engine EJS](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/rota-localhost-ejs-300x66.png)

Desta forma podemos deixar a aplicação mais dinâmica, como exibir variáveis nas páginas e também utilizar recursos de reutilização de código, por exemplo.

[  ![Npm - Gerenciador de pacotes para JavaScript](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/npm.svg)   Curso Npm - Gerenciador de pacotes para JavaScript Conhecer o curso ](https://www.treinaweb.com.br/curso/npm-gerenciador-de-pacotes-para-javascript)

## Recursos básicos do template engine EJS

Vamos ver alguns recursos básicos que podemos utilizar com o EJS.

### JavaScript e utilização de base de dados nas views

Um recurso interessante é caso seja necessário exibir alguma informação dinâmica no HTML.

Neste exemplo vamos criar um array de pessoas para simular uma base de dados, mas ela pode vir de um Banco de Dados, sem nenhum problema.

Dito isto, ao alterar o arquivo app.js, ele ficará da seguinte forma:

```jsx
import express from 'express';

const app = express();
const port = 3000;

app.set('view engine', 'ejs');
app.set('views', './views');

var pessoas = [
    {
        'nome': 'Paulo',
        'idade': 12
    },
    {
        'nome': 'Jõao',
        'idade': 15,
    },
    {
        'nome': 'Marina',
        'idade': 25,
    },
]

app.get('/', (req, res) => {
    res.render('home', {pessoas: pessoas});
});

app.listen(port,() => {
    console.log(`Servidor rodando na porta ${port}`);
});

```

Repare que criamos o array `pessoas` com 3 itens, e quando apontamos para carregar o arquivo home de nossa view passamos outro parâmetro: `{pessoas: pessoas}`.

Aqui nós estamos recebendo o array pessoas e apontando que vamos utilizar este array em nossa view como… pessoas (veja só). Exemplo, se a declaração fosse `{nomes: pessoas}`, o array `pessoas` seria usado como `nomes` em nosso arquivo home.

Configuramos o arquivo `app.js`, agora vamos criar uma lista dentro da view `home.ejs`:

```html

```

Perceba que usamos JavaScript junto ao código HTML, seguido das marcações: (ao utilizar o `for`) e (ao exibir o item do array `pessoas`).

Ao acessar a nossa rota principal, vamos então obter uma lista do array declarado no arquivo app.js:

![Exibindo lista com EJS](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/ejs-variaveis.png)

Dessa forma é possível exibir, por exemplo, os dados com origem de algum banco em nossa interface.

### Reutilização de código com EJS

Imagina que você está criando uma aplicação web que possuí um menu e um footer em todas as páginas. Criar um menu e um footer para cada página, além de mais trabalhoso, pode também dificultar a manutenção da aplicação, pois qualquer alteração será necessária repeti-la em todas as páginas e ainda pode aumentar o risco de erros.

Para isso, podemos utilizar o recurso `includes` do EJS. Vamos então criar mais três views, uma com o nome de `index.ejs`, outra com o nome `header.ejs` e a última com o nome de `footer.ejs`:

![Views EJS](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/views-ejs.png)

Neste caso vamos criar um menu no `header.js`, um footer no `footer.ejs`, vamos manter o conteúdo já criado na `home.js` e a `index.ejs` será para exibir o conteúdo de cada arquivo. Cada arquivo ficará da seguinte maneira:

- **header.ejs**

```html

    Includes EJS

        .menu-item{
            display: inline;
            margin: 0 10px 0 10px;
        }

            MENU 1
            MENU 2
            MENU 3

```

- **home.ejs**

```html