> This page is for Plataforma, version Herdado.
> For other versions, use one of these documentation indexes:
> - V4 (default): https://next.developer.frame.io/platform/v4/llms.txt
> - V4 experimental: https://next.developer.frame.io/platform/v4-experimental/llms.txt
> - Herdado: https://next.developer.frame.io/platform/v2/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://next.developer.frame.io/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://next.developer.frame.io/_mcp/server.

# Usando o ngrok

O ngrok é uma ferramenta fácil de usar que permite criar um túnel seguro na máquina local junto com um URL público que pode ser usado para testar o projeto local ou para compartilhar o trabalho para revisar com um cliente ou colega de equipe.É possível configurar HTTP ou HTTPS e, devido à popularidade desta ferramenta, se algo parar de funcionar, há vários artigos que descrevem diferentes maneiras de resolver o problema.Este artigo aborda algumas maneiras fáceis de instalar o ngrok e o que fazer se não conseguir que o aplicativo da web se comunique com o ngrok.




<Info title="ngrok">
  Nossos amigos do ngrok escreveram um excelente artigo dedicado ao suporte de webhooks do Frame.io via ngrok.Confira [aqui](https://ngrok.com/docs/integrations/frameio/webhooks).
</Info>


## Instalar o ngrok




Você pode usar o ngrok de algumas maneiras diferentes





### Instalar por meio do instalador do ngrok



1. Acesse o site do ngrok e siga as instruções: [https://ngrok.com/download](https://ngrok.com/download)
2. Se quiser os recursos oferecidos ao conectar uma conta, siga estas instruções para obter uma conta e token.





Não é necessário obter uma conta ou adicionar o token, mas confira a página de download para ver se é algo que você quer ou precisa.




<Info title="Observação:">
  


Se usar esse método, o ngrok executa do local onde você o armazena, a menos que o torne disponível em todo o sistema.



</Info>


### Instalar com o Homebrew

Este é meu método favorito para instalar o ngrok.Se você tem o Homebrew instalado, tudo que precisa fazer é digitar `homebrew cask install ngrok`.O ngrok é instalado para você e pode ser usado de qualquer lugar!O melhor de tudo é que não é preciso digitar `./ngrok` no terminal no início de cada comando, pode simplesmente digitar `ngrok`.Saiba mais sobre esta opção [aqui](https://gist.github.com/wosephjeber/aa174fb851dfe87e644e).

## Usar o ngrok

Depois de configurar o ngrok, escolha uma porta como `3000` e execute a partir de uma linha de comando do terminal com o comando ngrok http `3000`.Não é preciso usar a porta `3000`, mas esta é uma porta comumente usada para escolher na configuração.Se você configurar o ngrok para executar de uma pasta específica, você deve estar na pasta onde colocou o ngrok e usar o comando `./ngrok http 3000`.

Inicie seu servidor para seu projeto escutar na mesma porta e você poderá acessar seu trabalho usando o endereço público fornecido pelo ngrok.





### Solucionar problemas do ngrok com seu aplicativo da web – Barra final




Um problema que você pode enfrentar com o ngrok é não conseguir se conectar ao seu servidor quando configurar um URL do ngrok para uso com seu aplicativo da web.O que é frustrante sobre esse problema é que o ngrok não registrará que você enviou algo para ele.Você pode abrir o localhost:4040 para ver o que está acontecendo, e ele não mostrará nada.(localhost:4040 é fornecido pelo ngrok para que você possa monitorar qualquer solicitação recebida ao seu servidor.)O ngrok parece combinar endereços com /(.*) em vez de (/.*), então se você não incluir uma barra final no final do seu endereço e não vir nada nas ferramentas de monitoramento do ngrok, é porque o ngrok não está encontrando uma combinação para o endereço que você lista.

Aqui está um exemplo de adição de uma barra final: `http://something.ngrok.io/` Você também pode escrever seus aplicativos de amostra para resolver um ponto de acesso que inclui uma barra.Apenas lembre-se de que para o aplicativo Frame.io alcançar seu servidor, se seu aplicativo de exemplo usar o ponto de acesso `/actions`, você precisa adicionar o ponto de acesso /actions no final do seu endereço ngrok.Por exemplo, se o endereço ngrok for `http://something.ngrok.io`, você precisaria fornecê-lo na configuração da Ação personalizada como `http://something.ngrok.io/actions`.Isso pode ser diferente para outros aplicativos da web, então experimente com o final do endereço ngrok se você não conseguir fazer as coisas funcionarem imediatamente.

### Posso usar algo além do ngrok?Experimente o Glitch!

O Glitch é uma alternativa bem legal ao ngrok e é mais rápido de configurar.O Glitch permite criar uma conta e então criar seus próprios aplicativos usando os servidores deles com um URL publicamente acessível.Você pode colaborar com outras pessoas, tornar seu código público ou privado e escolher entre uma ampla variedade de linguagens e plataformas.Confira [https://glitch.com/create](https://glitch.com/create) para ver o que está disponível.Quando você configurar seu projeto no Glitch, para alguns aplicativos da web, o problema da barra final se aplica.No caso do Frame.io, quando você configura uma Ação personalizada em [developer.frame.io](/), precisa incluir a barra final no final do URL fornecido pelo Glitch.Você não precisa adicionar mais nada, nem mesmo para o ponto de acesso /actions.

### Há algo configurado que eu poderia experimentar agora?

Sim. Se você não quiser usar o ngrok ou criar seu próprio projeto no Glitch, configuramos um aplicativo de exemplo para você experimentar aqui: [https://frameio-custom-action.glitch.me](https://frameio-custom-action.glitch.me).Lembre-se de incluir uma barra final quando adicionar este endereço na área de Ações personalizadas de [developer.frame.io](/).

### Recursos




Esta seção lista os recursos listados ao longo do artigo:

* **ngrok** [https://ngrok.com/](https://ngrok.com/)
* **Glitch** [https://glitch.com/](https://glitch.com/)
* **Plataformas disponíveis no Glitch** [https://glitch.com/create](https://glitch.com/create)
* **Aplicativo de exemplo do Glitch para Ação personalizada em JavaScript** [https://frameio-custom-action.glitch.me](https://frameio-custom-action.glitch.me)
* **Inscrição e configuração de desenvolvedor do Frame.io** [Site de desenvolvedor do Frame.io](/)
* **Aplicativo web Frame.io** [ https://app.frame.io/](https://app.frame.io/)