Vous pouvez tester votre app sur mobile depuis localhost en l'exposant via une URL HTTPS publique. Téléphones et tablettes n'atteignent pas 127.0.0.1 sur votre laptop — un tunnel localhost comble cette lacune instantanément.
Pourquoi les mobiles n'accèdent pas à localhost
Votre serveur de dev écoute sur une adresse loopback (127.0.0.1) joignable uniquement sur votre machine. Même sur le même Wi-Fi, http://192.168.x.x:3000 échoue souvent (pare-feu, HTTPS, CORS). Un tunnel localhost fournit une URL HTTPS standard sans config réseau.
Ce que les émulateurs ratent
- Vraies cibles tactiles, scroll et gestes.
- Tailles viewport réelles iOS et Android.
- Quirks navigateurs mobile (Safari, Chrome, WebViews).
- Performance sur hardware réel.
- API device (caméra, géolocalisation).
- Redirects OAuth sur navigateurs mobile.
Étapes : tests mobile avec PortPreview
- Lancez
npm run devsur le port 3000. - Exécutez
npx portpreview 3000. - Ouvrez l'URL sur le navigateur mobile.
- Testez layout, navigation, formulaires et auth.
- Partagez l'URL avec QA ou design pour revue multi-appareils.
Checklist mobile
Layout responsive : breakpoints, polices, images, overflow.
Interactions tactiles : tap targets, swipe, pull-to-refresh.
Auth : OAuth et magic links se comportent différemment. Voir test callbacks OAuth.
Performance : mesurez sur appareils milieu de gamme, pas seulement votre laptop.
Conseils fiabilité
HTTPS requis pour cookies sécurisés et service workers. Désactivez le cache pendant les tests. Testez iOS Safari et Android Chrome séparément.
Partage : partager le serveur de dev local. Commencez PortPreview gratuitement.
HTTPS et fonctionnalités mobile
De nombreuses APIs mobile (service workers, cookies sécurisés, géolocalisation) exigent HTTPS. Les tunnels localhost le fournissent par défaut sans configuration certificat — un avantage décisif par rapport aux adresses IP locales en HTTP.
