Lancer Live Server sur son Réseau Wifi Local

Live Server : une extension VS Code incontournable

Live Server est une extension VS Code largement utilisée par les développeurs web pour lancer un serveur de développement local et afficher instantanément les modifications du code HTML, CSS et JavaScript dans le navigateur.

Par défaut, Live Server utilise l’adresse locale localhost, ce qui signifie que l’application est accessible uniquement depuis l’adresse IP 127.0.0.1, propre au PC qui l’héberge.

Si cela s’avère suffisant dans la majorité des cas, il devient parfois utile de lancer Live Server sur son réseau Wifi local.

C’est notamment le cas lorsque l’on souhaite tester une application en développement depuis d’autres appareils, tel qu’un smartphone.

Tutoriel : exécuter Live Server sur son réseau Wifi

Pour tester votre développement depuis un autre appareil, il faut configurer Live Server pour qu’il utilise l’adresse IP locale de votre PC sur le réseau Wifi local.

Cela permet à d’autres appareils sur le même réseau de se connecter au serveur et de voir les modifications en temps réel.

Voici les étapes clés à suivre. 👇

1. Installer Live Server

Oui, il paraît que ça aide.

2. Trouver son IP locale

Ouvrez un terminal pour trouver votre IP locale.

Sous Windows, tapez la commande :

ipconfig

Cherchez ensuite l’adresse IPv4 sous votre connexion réseau.

Sous Mac/Linux, tapez la commande :

ifconfig

Cherchez l’adresse sous inet.

3. Configurer Live Server pour écouter sur cette IP

1. Ouvrez les paramètres de VS Code (Ctrl+,).
2. Cherchez Live Server settings dans la barre de recherche.
3. Trouvez l’option liveServer.settings.host et définissez-la sur votre IP locale, trouvée à l’étape précédente.

{
  // Mes options...
  "liveServer.settings.host": "192.168.x.x",
}

4. Lancer Live Server

Lancez Live Server classiquement avec un clic droit sur le fichier 📄 index.html ou celui que vous souhaitez ouvrir, puis Open with Live Server.

Le serveur démarrera et l’URL ressemblera à http://192.168.x.x:5500 (ou un autre port que 5500, si configuré différemment).

5. Accédez à l’app

Assurez-vous que votre autre appareil, tel que votre téléphone mobile, est connecté au même réseau Wifi, ouvrez un navigateur et entrez l’URL de votre IP locale (http://192.168.x.x:5500).

Votre mobile devrait maintenant pouvoir accéder à la version en développement de votre site via Live Server sur votre réseau local !