Pré-visualização do servidor de desenvolvimento

Termbridge pode encaminhar seu servidor de desenvolvimento local por proxy e exibi-lo em um painel de pré-visualização. É ideal para testes em dispositivos móveis ou para acompanhar seu aplicativo enquanto executa comandos no terminal.

Início rápido

# Start your dev server (e.g., Vite on port 5173)
cd my-app && npm run dev

# In another terminal, start Termbridge with proxy
termbridge --proxy 5173

Agora você pode alternar entre as visualizações Terminal e Pré-visualização em UI.

Como funciona

Ao informar --proxy <port>:

1. Todas as rotas de Termbridge permanecem em /__tb/
2. Todas as outras solicitações são encaminhadas por proxy ao seu servidor de desenvolvimento
3. UI exibe um botão Visualizações para alternar entre Terminal e Pré-visualização
4. A pré-visualização carrega seu aplicativo em um iframe por meio do proxy

Browser → Termbridge → Your dev server (localhost:5173)

Alternar visualizações

1. Toque no botão Visualizações na barra inferior
2. Escolha Alternar para Terminal ou Alternar para Pré-visualização
3. A visualização é atualizada instantaneamente

As duas visualizações permanecem conectadas: sua sessão de terminal continua enquanto você vê a pré-visualização.

Substituição de módulo a quente (HMR)

O HMR de Vite funciona pelo proxy. Todas as conexões WebSocket fora de /__tb/ de um navegador conectado são encaminhadas ao seu servidor de desenvolvimento, qualquer que seja o caminho, permitindo que o socket do HMR se conecte sem configuração adicional.

Edite seu código e veja as alterações instantaneamente na visualização Pré-visualização, sem precisar atualizar a página.

Frameworks compatíveis

Qualquer servidor de desenvolvimento executado em uma porta local funciona:

Basta fazer com que a porta de --proxy corresponda à porta do seu servidor de desenvolvimento.

Casos de uso

Testes em dispositivos móveis

Teste o design responsivo em um celular real:

termbridge --proxy 5173

Leia o código QR e veja seu aplicativo exatamente como aparece em dispositivos móveis com Safari ou Chrome.

Desenvolvimento full-stack

Execute comandos no terminal enquanto acompanha seu aplicativo:

1. Acompanhe a saída da compilação na visualização Terminal
2. Veja seu aplicativo na visualização Pré-visualização
3. Alterne entre elas com um toque
4. Continue trabalhando pelo celular ou tablet

Demonstre seu trabalho

Compartilhe o link público URL com alguém para mostrar:

• Seu aplicativo em execução (Pré-visualização)
• Sua sessão de terminal (Terminal)

Ideal para programação em parceria remota ou demonstrações rápidas.

Modo sandbox

Ao usar sandboxes Daytona, defina a porta de pré-visualização:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Verifique se o servidor de desenvolvimento está vinculado a todas as interfaces:

npm run dev -- --host 0.0.0.0 --port 5173

Termbridge encaminha a pré-visualização de Daytona URL pelo UI.

Solução de problemas

A pré-visualização exibe uma página em branco

• Verifique se o servidor de desenvolvimento está em execução
• Confira se a porta corresponde a --proxy
• No modo sandbox, use --host 0.0.0.0 para que a porta possa ser acessada

O HMR não funciona

• Verifique se o servidor de desenvolvimento é compatível com HMR
• Confira se há erros de WebSocket no console do navegador
• Alguns frameworks exigem configuração explícita do HMR

Erros de CORS

O proxy trata a maioria dos problemas de CORS, mas, se seu aplicativo fizer solicitações a outras origens:

• Configure as definições de CORS do servidor de desenvolvimento
• Ou use uma extensão do navegador para contornar CORS (somente para desenvolvimento)