Live Dev - voyez chaque enregistrement sur votre téléphone

1Ce qu'est Live Dev#

Live Dev compile une APPLICATION DE DÉVELOPPEMENT pour votre propre téléphone. Au lieu d'emballer vos fichiers dans l'APK, l'application les charge depuis le serveur de développement qui tourne sur votre PC : chaque fois que vous enregistrez un fichier, le changement s'affiche sur le téléphone. Pas de nouvelle compilation, pas de réinstallation, pas de copie de ZIP.

C'est la vraie enveloppe AppMint, pas un onglet de navigateur : caméra, localisation, notifications, publicités, bouton retour, menu latéral et tous les ponts AppMint se comportent exactement comme dans votre application finale.

Vous la compilez une seule fois. Ensuite, vous ne revenez sur AppMint que pour modifier quelque chose de natif : une autorisation, l'icône, l'écran de démarrage, les ID publicitaires.

2Compilez l'application de développement (une seule fois)#

1. Sur l'écran d'accueil, touchez « Live Dev » (ou Créer un APK → la tuile « Live Dev »).
2. Choisissez le port de votre serveur de développement. Un seul appui pour les outils courants : Vite 5173, React / Next 3000, Angular 4200, Vue CLI 8080, Live Server 5500, Python 8000, Astro 4321. Tout port à partir de 1024 fonctionne.
3. Facultatif : une page de démarrage comme /admin/index.html, et l'adresse de votre PC. Laissez l'adresse vide : l'application trouve votre PC toute seule.
4. Donnez-lui un nom de package se terminant par .dev (par exemple com.myshop.dev) pour qu'il puisse cohabiter plus tard avec votre vraie application.
5. À l'étape Accès, cochez les autorisations que vous voulez tester (appareil photo, position, notifications…). Elles sont natives, donc fixées à la compilation.
6. Compilez et installez l'APK sur votre téléphone.

Une compilation Live Dev ne produit jamais de bundle Play (AAB) : elle ne fonctionne qu'à côté de votre PC, donc elle ne doit jamais être publiée.

3Démarrez votre serveur de développement pour que le téléphone puisse l'atteindre#

Par défaut, la plupart des serveurs de développement n'écoutent que le PC lui-même. Ajoutez l'option « host » pour que d'autres appareils de votre Wi-Fi puissent se connecter :

• Vite (React, Vue, Svelte, Astro) : npm run dev -- --host
• Next.js : npx next dev -H 0.0.0.0
• Angular : ng serve --host 0.0.0.0
• Create React App / Vue CLI : écoutent déjà sur le réseau

Vous n'avez qu'un dossier de fichiers HTML ? N'importe laquelle de ces commandes en fait un serveur : exécutez-la dans le dossier :

• npx serve -l 5500
• python -m http.server 8000
• VS Code : installez « Live Server », puis cliquez sur « Go Live »

Windows demande une fois s'il faut autoriser le serveur à traverser le pare-feu : cochez « Réseaux privés » et autorisez-le. Si vous avez cliqué sur Annuler, le téléphone ne peut pas se connecter tant que vous n'autorisez pas Node (ou Python) dans Sécurité Windows → Pare-feu → Autoriser une application.

npm run dev -- --host

4Connexion via Wi-Fi : sans câble, rien à installer#

1. Mettez le téléphone sur le même Wi-Fi que le PC.
2. Ouvrez votre application Live Dev.

C'est tout. L'application cherche votre serveur de développement sur le port choisi, trouve votre PC et charge la page. Elle mémorise le PC pour la prochaine fois. Si votre serveur utilise un autre port, ou si plusieurs PC répondent, elle les affiche et vous appuyez sur le vôtre.

Rien de trouvé ? L'écran de connexion réessaie toutes les deux secondes et ouvre la page tout seul dès que votre serveur est joignable : lancez le serveur et regardez. « Trouver mon PC » vérifie aussi les autres ports courants. Vous pouvez toujours saisir l'adresse que Vite affiche sous « Network: » dans « Saisir vous-même ».

Pourquoi c'est mieux que de taper http://192.168.1.5:5173 dans une application de site web : la page s'exécute toujours comme http://localhost:PORT sur le téléphone (l'application la relaie vers votre PC). localhost est un CONTEXTE SÉCURISÉ, donc la caméra, le microphone, la localisation, le presse-papiers, les service workers et les passkeys fonctionnent. Sur une simple adresse 192.168…, le moteur du navigateur les bloque tous.

5Connexion via USB : fonctionne sans aucun Wi-Fi#

Utilisez ceci quand le PC et le téléphone sont sur des réseaux différents, sur un Wi-Fi invité qui empêche les appareils de se voir, ou sans aucun réseau.

1. Sur le téléphone : Paramètres → À propos du téléphone → appuyez sept fois sur « Numéro de build », puis Options pour les développeurs → activez « Débogage USB ».
2. Branchez le téléphone au PC et acceptez l'invite « Autoriser le débogage USB ».
3. Sur le PC, exécutez la commande ci-dessous (avec votre port). adb est fourni avec Android Studio, ou téléchargez « SDK Platform-Tools » chez Google : c'est un petit ZIP.
4. Ouvrez votre application Live Dev. Elle repère la liaison USB et l'utilise avant d'essayer le Wi-Fi.

Relancez la commande après avoir débranché le câble ou redémarré le téléphone. Avec l'USB, vous n'avez PAS besoin de l'option « host » de l'étape 3.

Si l'écran de connexion indique « Le lien USB est actif, mais rien ne répond sur le port de votre PC », la partie câble fonctionne et votre serveur de développement n'est simplement pas lancé.

adb reverse tcp:5173 tcp:5173

Télécharger SDK Platform-Tools (adb) →

6Le bouton DEV#

Un petit bouton DEV flotte au bord de l'application : faites-le glisser où vous voulez. Il devient rouge avec un nombre quand votre page enregistre une erreur. Appuyez dessus pour :

• Recharger : récupère toujours une copie neuve de chaque fichier, jamais une version en cache.
• Console - tout ce que votre page consigne, erreurs et avertissements colorés, avec le fichier et la ligne (src/App.tsx:42). « Erreurs » filtre, « Copier » place tout le journal dans le presse-papiers : collez-le dans un chat ou un rapport de bug.
• Exécuter du JavaScript - une ligne en bas de la console. Saisissez n'importe quelle expression et voyez le résultat, directement sur le téléphone. Les promesses sont attendues et consignées.
• Actualisation à l'enregistrement - voir l'étape suivante.
• Changer de serveur : un autre PC ou un autre port, sans recompiler.
• Effacer les données du site et recharger : supprime les cookies, localStorage et IndexedDB pour un test de premier lancement propre.
• Infos de connexion : l'adresse, USB ou Wi-Fi, et l'IP de ce téléphone.

Pour des DevTools complets (éléments, réseau, points d'arrêt), branchez le câble, ouvrez chrome://inspect dans Chrome sur le PC et choisissez votre application.

7Actualisation à l'enregistrement, même pour du HTML simple#

Vite, Next, Angular et webpack envoient eux-mêmes vos modifications dans la page (rechargement à chaud). L'application le détecte et ne gêne pas.

Un dossier simple servi par python, « npx serve » ou n'importe quel serveur statique n'a pas de rechargement à chaud : normalement, vous enregistreriez, puis tireriez pour actualiser, à chaque fois. Live Dev le fait pour vous : il retient quels fichiers la page a chargés, demande à votre serveur une fois par seconde si l'un d'eux a changé, et actualise quand c'est le cas. Un fichier .css modifié est remplacé sur place sans rechargement, ce qui préserve votre position de défilement et vos saisies de formulaire pendant que vous stylisez.

Rien à installer sur le PC. Désactivez-le depuis le bouton DEV si vous voulez un contrôle manuel. L'écran reste aussi allumé tant qu'une application Live Dev est ouverte.

8Quand vous avez terminé : compilez la vraie application#

Une application Live Dev ne fonctionne qu'à côté de votre PC : ne la donnez jamais aux utilisateurs. Quand le projet est prêt :

• Projet avec framework (Vite, React, Vue…) : exécutez « npm run build », compressez le dossier dist (ou compressez tout le projet source), et compilez-le dans Créer un APK → ZIP hors ligne.
• Dossier HTML simple : compressez-le en ZIP avec index.html à la racine → ZIP hors ligne. Un seul fichier ? Utilisez la vignette HTML.
• Déjà déployé sur une vraie adresse https:// : Créer un APK → Site web.

Utilisez votre vrai nom de package pour cette compilation. Comme le package de l'application de développement se termine par .dev, les deux peuvent rester installées côte à côte.

9Si cela ne se connecte pas#

• Wi-Fi : « En attente de votre serveur de développement » indéfiniment → le serveur n'écoute que le PC. Redémarrez-le avec l'option host de l'étape 3 (Vite affiche une ligne « Network: » quand c'est correct).

• Wi-Fi : toujours rien → le pare-feu Windows le bloque (étape 3), ou le routeur isole les appareils (courant sur les Wi-Fi invités, de bureau et d'hôtel). Utilisez l'USB, ou activez le point d'accès du téléphone et connectez-y le PC.

• USB : « adb » n'est pas reconnu → installez Platform-Tools et lancez la commande depuis ce dossier. « no devices » → acceptez l'invite de débogage USB sur le téléphone, ou essayez un autre câble (beaucoup de câbles ne servent qu'à la charge).

• « Le port … est occupé sur ce téléphone » → une autre application du téléphone utilise ce port. Lancez votre serveur de développement sur un autre port et saisissez-le sous « Saisir vous-même ».

• Vite affiche « Blocked request. This host is not allowed » → vous avez ouvert l'adresse du PC dans un navigateur normal ou une application de site web. L'application Live Dev ne déclenche jamais cela, car elle demande toujours localhost.

• La page se charge mais vos appels d'API échouent → la liste CORS de votre backend doit autoriser http://localhost:PORT (la plupart des configurations de développement le font déjà), et une URL d'API écrite http://localhost:4000 désigne le TÉLÉPHONE. Redirigez aussi ce port (adb reverse tcp:4000 tcp:4000) ou utilisez l'adresse du PC pour l'API.

• Une page blanche après avoir changé de projet sur le même port → DEV → Effacer les données du site et recharger (un ancien service worker répond).