Oubliez Ngrok ! Apprenez à exposer votre serveur local (localhost) au monde entier directement depuis VsCode en quelques clics

Tout développeur connaît ce moment. Vous venez de coder une fonctionnalité incroyable sur votre machine locale. Ça marche parfaitement. Maintenant, il faut la montrer. Au client qui attend une démo, au designer qui veut vérifier le rendu sur son téléphone, ou simplement à un collègue pour un avis rapide. Et là, le cauchemar logistique commence. Déployer sur un serveur de test ? Trop long. Faire un partage d'écran ? Pas interactif. C'est là que des outils comme >Ngrok entrent en scène, créant un tunnel magique entre votre localhost et une URL publique.

Ngrok et ses cousins sont des outils fantastiques. Mais si je vous disais que vous n'en avez probablement plus besoin ? Si je vous disais que votre éditeur de code préféré, Visual Studio Code, possède une fonctionnalité intégrée, gratuite et surpuissante pour faire exactement la même chose, mais de manière infiniment plus simple ? Oubliez le terminal séparé, les limites de comptes gratuits et les configurations complexes. Aujourd'hui, je vais vous montrer comment utiliser l'arme secrète de VS Code pour exposer n'importe quel projet local au monde entier, en trois clics, directement depuis votre cockpit de développement.

Comment ça marche ? VS Code utilise un tunnel sécurisé, authentifié via votre compte GitHub, pour créer une connexion entre votre machine et les serveurs de Microsoft. C'est rapide, fiable et incroyablement bien intégré.

Pourquoi cette méthode est une révolution pour votre workflow

Avant de plonger dans le "comment", comprenons le "pourquoi". Pourquoi abandonner un outil que vous connaissez peut-être déjà ?

• Intégration parfaite : Plus besoin de jongler entre votre éditeur et un terminal pour lancer Ngrok. Tout se passe dans une seule et même fenêtre : celle où vous codez.
• Simplicité radicale : Pas de téléchargement supplémentaire, pas de compte à créer (si vous utilisez déjà GitHub), pas de token d'authentification à copier-coller. C'est une fonctionnalité native.
• Gestion de la visibilité : Vous pouvez choisir de rendre votre URL publique (accessible à tous) ou privée (accessible uniquement aux personnes connectées avec leur compte GitHub à qui vous donnez l'accès). C'est idéal pour la sécurité.
• Gratuit et généreux : Pas de limitations frustrantes sur la durée des tunnels ou le nombre de connexions pour un usage normal.

Les Prérequis : De quoi avez-vous besoin ?

La liste est très courte :

1. Visual Studio Code à jour.
2. Un compte GitHub. Vous serez invité à vous connecter la première fois.
3. Un projet local qui tourne sur un serveur web. Pour ce tutoriel, nous allons créer un mini-serveur Node.js en 10 secondes.

Créer notre serveur de test (si vous n'en avez pas)

Ouvrez un terminal dans le dossier de votre choix et tapez :

npm init -y
npm install express

Créez un fichier server.js et collez-y ce code :

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('<h1 style="font-family: sans-serif; color: #007ACC;">Salut le Monde depuis mon VS Code ! 🚀</h1>');
});

app.listen(port, () => {
  console.log(`Serveur démarré sur http://localhost:${port}`);
});

Le Guide pas à pas pour exposer votre projet

Maintenant, passons à l'action. Le processus est d'une simplicité déconcertante.

Étape 1 : Lancez votre serveur local

Avant toute chose, votre projet doit être en cours d'exécution sur votre machine. Dans votre terminal VS Code, lancez notre serveur de test :

node server.js

Vous devriez voir "Serveur démarré sur http://localhost:3000". Ouvrez cette adresse dans votre navigateur pour confirmer que tout fonctionne.

Le terminal dans VS Code affichant 'Serveur démarré...

Étape 2 : Trouvez l'onglet "Ports"

Regardez en bas de votre fenêtre VS Code, dans le panneau inférieur où se trouvent habituellement les onglets "Terminal", "Problèmes", "Sortie". Il y a un onglet que vous n'avez peut-être jamais remarqué : PORTS. Cliquez dessus.

Si votre serveur est en cours d'exécution, VS Code est si intelligent qu'il a peut-être déjà détecté et transféré le port pour vous ! Si ce n'est pas le cas, la vue sera vide.

[Image de l'étape 2 : Capture d'écran du panneau inférieur de VS Code, avec une flèche pointant vers l'onglet "PORTS" à côté de "TERMINAL".]

Étape 3 : Transférez le port manuellement (si nécessaire)

Si la liste est vide, cliquez sur le bouton "Forward a Port" (Transférer un port). Une petite boîte de dialogue va apparaître en haut de l'écran.

VS Code vous demandera quel port vous souhaitez transférer. Tapez simplement le numéro du port de votre serveur (dans notre cas, 3000) et appuyez sur Entrée.

[Image de l'étape 3 : Capture d'écran de la boîte de dialogue en haut de VS Code demandant le numéro de port, avec "3000" en cours de saisie.]

Étape 4 : Votre tunnel est créé !

Instantanément, une nouvelle ligne apparaîtra dans l'onglet "Ports". Cette ligne contient toutes les informations dont vous avez besoin : le port, le nom du processus, l'adresse locale... et le plus important : l'Adresse Transférée (Forwarded Address).

Cette URL, qui se termine généralement par ...uks1.devtunnels.ms/, est votre nouvelle adresse publique !

Étape 5 : Gérez la visibilité (Privé vs. Public)

Par défaut, le port est transféré en mode "Privé". Cela signifie que seules les personnes connectées à leur compte GitHub peuvent y accéder. C'est parfait pour la collaboration en équipe.

Pour rendre le site accessible à n'importe qui (comme pour une démo client), faites un clic droit sur la ligne du port et changez la Visibilité du Port (Port Visibility) en "Public".

[Image de l'étape 5 : Capture d'écran du menu contextuel (clic droit) sur la ligne du port, montrant l'option "Port Visibility" et les choix "Private" et "Public".]

Étape 6 : Partagez et testez !

Vous pouvez maintenant copier cette URL publique. Le moyen le plus simple est de cliquer sur l'icône "Copier l'adresse locale" à côté de l'URL. Envoyez ce lien à n'importe qui, ou mieux encore, ouvrez-le sur votre téléphone.

Vous verrez votre message "Salut le Monde..." s'afficher parfaitement. Vous êtes en train de consulter votre localhost:3000 depuis un autre appareil, via internet.

Houra

Cas d'Usage Concrets

• Démos Client en Direct : Modifiez votre code CSS, sauvegardez, et demandez à votre client de rafraîchir la page. Il verra les changements instantanément.
• Test de Webhooks : Vous développez une intégration avec Stripe, Twilio ou GitHub ? Donnez-leur votre URL publique. Votre localhost peut désormais recevoir des webhooks comme un vrai serveur de production.
• Développement mobile : Testez le rendu responsive de votre site sur un vrai téléphone ou une tablette sans avoir à déployer quoi que ce soit.

Conclusion : Votre Workflow, Simplifié

Ngrok reste un outil puissant avec des fonctionnalités avancées. Mais pour 90% des besoins quotidiens d'un développeur, la fonctionnalité de transfert de port de VS Code est plus simple, plus rapide et mieux intégrée. C'est l'un de ces "joyaux cachés" qui, une fois découvert, change radicalement votre façon de travailler.

Alors la prochaine fois que vous aurez besoin de percer un trou dans le mur entre votre machine et le reste du monde, ne cherchez pas plus loin que l'onglet "Ports" de votre éditeur. Le développement local n'a plus de frontières.