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

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

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

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

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

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

لا يعمل HMR

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

أخطاء CORS

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

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