Aller au contenu

Aperçu du serveur de développement

Afficher au format Markdown Modifier sur GitHub Documentation de 1675df8

Termbridge peut relayer votre serveur de développement local et l'afficher dans un volet d'aperçu. C'est idéal pour les tests sur mobile ou pour surveiller votre application tout en exécutant des commandes dans le terminal.

Démarrage rapide

Shell
# 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

Vous pouvez maintenant passer des vues Terminal et Aperçu dans le UI.

Fonctionnement

Lorsque vous transmettez --proxy <port> :

  1. Toutes les routes Termbridge restent sous /__tb/
  2. Toutes les autres requêtes sont relayées vers votre serveur de développement
  3. Le UI affiche un bouton Vues permettant de basculer entre Terminal et Aperçu
  4. L'aperçu charge votre application dans une iframe via le proxy
Code
Browser → Termbridge → Your dev server (localhost:5173)

Changer de vue

  1. Appuyez sur le bouton Vues dans la barre inférieure
  2. Choisissez Passer au terminal ou Passer à l'aperçu
  3. La vue change instantanément

Les deux vues restent connectées : votre session de terminal continue pendant que vous consultez l'aperçu.

Remplacement de module à chaud (HMR)

Le HMR de Vite fonctionne via le proxy. Toutes les connexions WebSocket en dehors de /__tb/ depuis un navigateur connecté sont transmises à votre serveur de développement, quel que soit leur chemin ; le socket HMR se connecte donc sans configuration supplémentaire.

Modifiez votre code et voyez les changements instantanément dans la vue Aperçu, sans actualiser la page.

Frameworks pris en charge

Tout serveur de développement exécuté sur un port local fonctionne :

Framework Commande Port par défaut
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

Il suffit de faire correspondre le port --proxy à celui de votre serveur de développement.

Cas d’utilisation

Tests sur mobile

Testez votre mise en page adaptative sur un vrai téléphone :

Shell
termbridge --proxy 5173

Scannez le code QR et voyez votre application telle qu'elle s'affiche sur mobile Safari ou Chrome.

Développement full stack

Exécutez des commandes dans le terminal tout en surveillant votre application :

  1. Surveillez la sortie de compilation dans la vue Terminal
  2. Affichez votre application dans la vue Aperçu
  3. Passez de l'une à l'autre d'un simple toucher
  4. Continuez à travailler depuis votre téléphone ou votre tablette

Présenter votre travail

Partagez le URL public avec quelqu'un pour lui montrer :

  • Votre application en cours d'exécution (Aperçu)
  • Votre session de terminal (Terminal)

Idéal pour travailler à distance en binôme ou faire une démonstration rapide.

Mode bac à sable

Lorsque vous utilisez des bacs à sable Daytona, définissez le port d'aperçu :

Shell
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

Vérifiez que votre serveur de développement écoute sur toutes les interfaces :

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

Termbridge relaie l'aperçu Daytona de URL via le UI.

Dépannage

L'aperçu affiche une page vide

  • Vérifiez que votre serveur de développement est en cours d'exécution
  • Vérifiez que le port correspond à --proxy
  • En mode bac à sable, utilisez --host 0.0.0.0 pour rendre le port accessible

HMR ne fonctionne pas

  • Vérifiez que votre serveur de développement prend en charge le HMR
  • Consultez la console du navigateur pour repérer les erreurs WebSocket
  • Certains frameworks nécessitent une configuration HMR explicite

Erreurs CORS

Le proxy gère la plupart des problèmes CORS, mais si votre application envoie des requêtes vers d'autres origines :

  • Configurez les paramètres CORS de votre serveur de développement
  • Ou utilisez une extension de navigateur pour contourner CORS (uniquement pour le développement)