Προεπισκόπηση διακομιστή ανάπτυξης

Το 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 μέσω του proxy

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

Εναλλαγή προβολών

1. Πατήστε το κουμπί Προβολές στην κάτω γραμμή
2. Επιλέξτε Μετάβαση στο Τερματικό ή Μετάβαση στην Προεπισκόπηση
3. Η προβολή ενημερώνεται αμέσως

Και οι δύο προβολές παραμένουν συνδεδεμένες· η συνεδρία του τερματικού συνεχίζεται όσο βλέπετε την προεπισκόπηση.

Αντικατάσταση λειτουργικών μονάδων εν ώρα εκτέλεσης (HMR)

Το HMR του Vite λειτουργεί μέσω του proxy. Κάθε σύνδεση WebSocket εκτός του /__tb/ από πρόγραμμα περιήγησης συνδεδεμένου χρήστη προωθείται στον διακομιστή ανάπτυξής σας, ανεξάρτητα από τη διαδρομή της, ώστε η υποδοχή HMR να συνδέεται χωρίς πρόσθετη ρύθμιση.

Επεξεργαστείτε τον κώδικά σας και δείτε αμέσως τις αλλαγές στην προβολή Προεπισκόπησης, χωρίς να χρειάζεται ανανέωση.

Υποστηριζόμενα πλαίσια εργασίας

Λειτουργεί οποιοσδήποτε διακομιστής ανάπτυξης που εκτελείται σε τοπική θύρα:

Αντιστοιχίστε απλώς τη θύρα --proxy στη θύρα του διακομιστή ανάπτυξής σας.

Περιπτώσεις χρήσης

Δοκιμές σε κινητά

Δοκιμάστε τον προσαρμοστικό σχεδιασμό σας σε πραγματικό τηλέφωνο:

termbridge --proxy 5173

Σαρώστε τον κωδικό QR και δείτε την εφαρμογή σας ακριβώς όπως εμφανίζεται σε κινητά Safari ή Chrome.

Ανάπτυξη πλήρους στοίβας

Εκτελέστε εντολές στο τερματικό ενώ παρακολουθείτε την εφαρμογή σας:

1. Παρακολουθήστε την έξοδο της κατασκευής στην προβολή Τερματικού
2. Δείτε την εφαρμογή σας στην προβολή Προεπισκόπησης
3. Εναλλάσσεστε μεταξύ τους με ένα πάτημα
4. Συνεχίστε την εργασία σας από το τηλέφωνο ή το tablet σας

Παρουσιάστε τη δουλειά σας

Μοιραστείτε το δημόσιο URL με κάποιον για να του δείξετε:

• Την εφαρμογή σας σε λειτουργία (Προεπισκόπηση)
• Τη συνεδρία του τερματικού σας (Τερματικό)

Ιδανικό για απομακρυσμένη συνεργασία ή γρήγορες επιδείξεις.

Λειτουργία sandbox

Όταν χρησιμοποιείτε sandbox Daytona, ορίστε τη θύρα προεπισκόπησης:

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Βεβαιωθείτε ότι ο διακομιστής ανάπτυξης κάνει bind σε όλες τις διεπαφές:

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

Το Termbridge προωθεί την προεπισκόπηση Daytona του URL μέσω του UI.

Αντιμετώπιση προβλημάτων

Η προεπισκόπηση εμφανίζει κενή σελίδα

• Βεβαιωθείτε ότι ο διακομιστής ανάπτυξής σας εκτελείται
• Ελέγξτε ότι η θύρα αντιστοιχεί στο --proxy
• Για τη λειτουργία sandbox, χρησιμοποιήστε το --host 0.0.0.0 ώστε να είναι προσβάσιμη η θύρα

Το HMR δεν λειτουργεί

• Επιβεβαιώστε ότι ο διακομιστής ανάπτυξής σας υποστηρίζει HMR
• Ελέγξτε την κονσόλα του προγράμματος περιήγησης για σφάλματα WebSocket
• Ορισμένα πλαίσια εργασίας απαιτούν ρητή ρύθμιση HMR

Σφάλματα CORS

Το proxy διαχειρίζεται τα περισσότερα προβλήματα CORS, αλλά αν η εφαρμογή σας στέλνει αιτήματα σε άλλες προελεύσεις:

• Ρυθμίστε τις παραμέτρους CORS του διακομιστή ανάπτυξής σας
• Ή χρησιμοποιήστε μια επέκταση προγράμματος περιήγησης για παράκαμψη του CORS (μόνο για ανάπτυξη)