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

Termbridgeはローカルの開発サーバーをプロキシし、プレビューペインに表示できます。モバイルでのテストや、ターミナルコマンドを実行しながらアプリを確認するのに最適です。

クイックスタート

# 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ソケットが接続されます。

コードを編集すると、再読み込みせずにプレビュー表示へすぐ反映されます。

対応フレームワーク

ローカルポートで動作する開発サーバーなら、どれでも使用できます:

--proxyのポートを開発サーバーのポートに合わせてください。

活用例

モバイルでのテスト

実際のスマートフォンでレスポンシブデザインをテストできます:

termbridge --proxy 5173

QRコードをスキャンすると、モバイル版SafariやChromeでの表示をそのまま確認できます。

フルスタック開発

アプリを確認しながら、ターミナルでコマンドを実行できます:

1. ターミナル表示でビルド出力を確認
2. プレビュー表示でアプリを確認
3. タップして両方を切り替え
4. スマートフォンやタブレットから作業を続行

作業内容をデモする

パブリックなURLを共有すると、相手に次の内容を見せられます:

• 実行中のアプリ（プレビュー）
• ターミナルセッション（ターミナル）

リモートでのペア作業や手軽なデモに最適です。

サンドボックスモード

Daytonaサンドボックスを使用する場合は、プレビューポートを設定してください:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

開発サーバーがすべてのインターフェースにバインドされていることを確認してください:

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を回避するブラウザー拡張機能を使用してください（開発時のみ）