# معاينة خادم التطوير

يمكن لـ 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)

يعمل HMR في Vite عبر الوكيل. يُمرر كل اتصال WebSocket خارج `/__tb/` من متصفح مسجل الدخول إلى خادم التطوير، أيًا كان مساره، لذلك يتصل مقبس 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 URL لمعاينة Daytona عبر UI.

## استكشاف الأخطاء وإصلاحها

### تعرض المعاينة صفحة فارغة

- تأكد من أن خادم التطوير يعمل
- تحقق من أن المنفذ يطابق `--proxy`
- في وضع البيئة المعزولة، استخدم `--host 0.0.0.0` ليكون المنفذ قابلًا للوصول

### لا يعمل HMR

- تحقق من أن خادم التطوير يدعم HMR
- افحص وحدة تحكم المتصفح بحثًا عن أخطاء WebSocket
- تحتاج بعض أطر العمل إلى إعداد HMR صريح

### أخطاء CORS

يعالج الوكيل معظم مشكلات CORS، ولكن إذا أرسل تطبيقك طلبات إلى مصادر أخرى:

- اضبط إعدادات CORS لخادم التطوير
- أو استخدم إضافة للمتصفح لتجاوز CORS (لأغراض التطوير فقط)