# 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

```bash
# 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:

| Framework | Comando | Porta padrão |
|-----------|---------|--------------|
| Vite | `npm run dev` | 5173 |
| Next.js | `npm run dev` | 3000 |
| Create React App | `npm start` | 3000 |
| Nuxt | `npm run dev` | 3000 |
| SvelteKit | `npm run dev` | 5173 |

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:

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

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

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

```bash
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)