# Preview deployment

O **Preview deployment** executa uma [função](/pt-br/documentacao/plataforma/functions/) em Azion Console e mostra a resposta que o código retorna. Ele chama `PreviewProvider`, uma função auxiliar no código-fonte que monta uma requisição simulada e a passa para o handler. A saída aparece no editor de código, então você lê a resposta antes que a função atenda tráfego.

---

## Função PreviewProvider

`PreviewProvider` é o ponto de entrada de um preview. Ela monta a requisição que o preview envia, chama a função que processa essa requisição e retorna a resposta que o preview renderiza:

```javascript
function PreviewProvider(args) {
  var request = new Request("https://www.azion.com/example", {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer [TOKEN VALUE]"
    },
    redirect: "follow",
  });
  return handleRequest(request);
}
```

O handler lê as propriedades dessa requisição, então os valores definidos dentro de `PreviewProvider` decidem qual caminho da função é executado.

> **nota**
>
> Azion Console não renderiza nenhum preview enquanto o código-fonte não tiver uma função `PreviewProvider`. O preview mostra um aviso que nomeia a função ausente.

---

## Simulação de requisição

Altere os valores dentro de `PreviewProvider` para exercitar um caminho diferente da função. Um handler que ramifica pelo método da requisição retorna HTML para um `GET` e JSON para um `POST`:

```javascript
const html = '<h1>Hello World</h1>'
const data = { message: 'Hello World' }

async function handleRequest(request) {
  switch (request.method) {
    case 'GET':
      return new Response(html, {
        headers: {
          "content-type": "text/html",
        }
      })
    case 'POST':
      return new Response(JSON.stringify(data), {
        headers: {
          "content-type": "application/json",
        }
      })
  }
}
```

Cada ramificação define o header `content-type` para o formato que retorna. Altere o método dentro de `PreviewProvider` de `GET` para `POST` para ler a outra resposta.

---

## Renderização da resposta

O preview renderiza uma resposta pelo header `content-type` dela:

| `content-type`     | Saída do preview                   |
| ------------------ | ---------------------------------- |
| `text/html`        | A página HTML, renderizada.        |
| `application/json` | O corpo JSON que a função retorna. |

Azion Console mostra a saída no editor de código da função. Selecione **Open** para mostrar a mesma saída em uma guia separada do navegador. A ferramenta `inspect` dentro do Preview deployment mostra o comportamento da função em tempo real.

---

## Recursos relacionados

- [Primeiros passos com Functions](/pt-br/documentacao/plataforma/functions/primeiros-passos.md): Crie, instancie e execute sua primeira função do início ao fim.
- [Editor de código](/pt-br/documentacao/plataforma/functions/code-editor.md): Escreva a função cuja resposta o preview renderiza.
- [Instâncias de função](/pt-br/documentacao/plataforma/applications/functions-instances.md): Vincule a função a uma aplicação quando a resposta for a que você quer.
- [Solução de problemas](/pt-br/documentacao/plataforma/functions/solucao-de-problemas.md): Encontre a causa quando uma função falha ou não retorna nada.
- [Consulte dados de uso de Functions](/pt-br/documentacao/guias/plataforma/observabilidade/consultar-dados-de-uso-edge-functions-com-graphql.md): Leia de volta o tempo de compute e as invocações que uma conta consumiu.