# 開発サーバーのプレビュー

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はDaytonaのプレビューURLをUI経由でプロキシします。

## トラブルシューティング

### プレビューが空白になる

- 開発サーバーが実行中であることを確認してください
- ポートが`--proxy`と一致しているか確認してください
- サンドボックスモードでは、ポートに到達できるよう`--host 0.0.0.0`を使用してください

### HMRが動作しない

- 開発サーバーがHMRに対応していることを確認してください
- ブラウザーのコンソールでWebSocketエラーを確認してください
- フレームワークによっては、HMRの明示的な設定が必要です

### CORSエラー

プロキシでほとんどのCORS問題に対処できますが、アプリから別のオリジンにリクエストを送る場合は:

- 開発サーバーのCORS設定を行ってください
- または、CORSを回避するブラウザー拡張機能を使用してください（開発時のみ）