# 开发服务器预览

Termbridge 可以代理你的本地开发服务器，并在预览窗格中显示。它非常适合移动设备测试，也适合在运行终端命令时查看应用。

## 快速开始

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

现在，你可以在 UI 中切换 **终端** 和 **预览** 视图。

## 工作原理

传入 `--proxy <port>` 时：

1. 所有 Termbridge 路由都保留在 `/__tb/` 下
2. 其他所有请求都会代理到你的开发服务器
3. UI 会显示 **视图** 按钮，用于在终端和预览之间切换
4. 预览会通过代理在 iframe 中加载你的应用

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

## 切换视图

1. 点击底部栏中的 **视图** 按钮
2. 选择 **切换到终端** 或 **切换到预览**
3. 视图会立即更新

两个视图都会保持连接；查看预览时，你的终端会话仍会继续运行。

## 热模块替换（HMR）

Vite 的 HMR 可通过代理运行。来自已登录浏览器且位于 `/__tb/` 之外的每个 WebSocket 连接都会转发到你的开发服务器，无论其路径为何，因此 HMR 套接字无需额外配置即可连接。

编辑代码后，可以立即在预览视图中看到更改，无需刷新。

## 支持的框架

任何在本地端口运行的开发服务器都可以使用：

| 框架 | 命令 | 默认端口 |
|-----------|---------|--------------|
| 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 |

只需将 `--proxy` 端口与开发服务器的端口保持一致。

## 使用场景

### 移动设备测试

在真实手机上测试响应式设计：

```bash
termbridge --proxy 5173
```

扫描 QR 代码，即可在移动设备的 Safari 或 Chrome 中查看应用的实际渲染效果。

### 全栈开发

查看应用的同时，在终端中运行命令：

1. 在终端视图中查看构建输出
2. 在预览视图中查看应用
3. 轻点即可在两者之间切换
4. 通过手机或平板继续工作

### 演示你的作品

将公开的 URL 分享给他人，向他们展示：

- 正在运行的应用（预览）
- 你的终端会话（终端）

非常适合远程结对协作或快速演示。

## 沙盒模式

使用 Daytona 沙盒时，请设置预览端口：

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

确保开发服务器绑定到所有网络接口：

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

Termbridge 会通过 UI 代理 Daytona 预览 URL。

## 故障排除

### 预览显示空白页面

- 确保开发服务器正在运行
- 检查端口是否与 `--proxy` 一致
- 在沙盒模式下，请使用 `--host 0.0.0.0`，以便访问该端口

### HMR 无法运行

- 确认开发服务器支持 HMR
- 检查浏览器控制台中是否有 WebSocket 错误
- 某些框架需要显式配置 HMR

### CORS 错误

代理可以处理大多数 CORS 问题，但如果你的应用会向其他来源发出请求：

- 配置开发服务器的 CORS 设置
- 或使用浏览器扩展绕过 CORS（仅用于开发）