# Aperçu du serveur de développement

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

```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
```

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

```
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 :

```bash
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 :

```bash
export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173
```

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

```bash
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)