Comment montrer à mon client un site que je développe sur ma machine ?

Tous les développeurs web travaillant en local le savent, il n'est pas simple de montrer le contenu de sa machine locale depuis l’extérieur de son réseau. Heureusement, Ngrok est là pour nous aider !

Une des bonnes pratiques les plus simples à mettre en place, et pourtant une des plus importantes dans le développement web est la suivante : ne JAMAIS travailler sur la production directement, toujours passer par un environnement de développement. Pour cela, de nombreuses solutions existent : utiliser un petit serveur web en ligne de commande pour des langages comme ruby ou python, ou des solutions logicielles comme WAMP. Le souci avec ce genre de solutions est que votre plateforme de développement est uniquement en local, et ne peut pas être vue depuis l'extérieur.

Que ce soit pour obtenir des feedbacks de la part de son client ou simplement tester son site sur mobile et tablettes, les sites développés en local finissent toujours par avoir besoin d'accéder à Internet. Et là, peu de solutions s'offre à nous. Il est possible par exemple d'envoyer le site sur un serveur par FTP, mais c'est une manoeuvre fastidieuse et parfois longue. Une autre option serait de rediriger les ports de votre proxy/box internet vers votre PC, mais ce n'est pas non plus une méthode simple, surtout quand vous travaillez en équipe.

Enfin, troisième possibilité et de loin la plus simple de toutes : utiliser Ngrok.

Montrer votre travail à vos clients sans déployer avec Ngrok

Ngrok est un petit outil en ligne de commande couplé à une plateforme Web qui permet en quelques secondes d'obtenir une adresse pointant vert un port précis de votre localhost. Sa mise en place prend quelques secondes à peine : téléchargez le binaire disponible pour votre plateforme (Windows, Linux, Mac, freebsd de disponible. À part si vous êtes sous open Solaris ou templeOs, pas d'excuse.), et mettez-le quelque part dans votre path (ou dans un dossier duquel vous le lancerez).

Ensuite, pour l'utiliser, tapez simplement la commande suivante en précisant le port à rediriger (3000 pour mon exemple).

$ ngrok 3000

Ensuite, rien, c'est fini. Vous vous retrouvez face à l’écran suivant, et n'avez plus qu'à envoyer à votre client l'adresse proposée (je l'ai mis en surbrillance dans mon exemple).

Vous pourrez noter au passage une adresse nommée "Web interface". Cette adresse correspond à une interface qui vous permettra d'analyser tout le trafic passant à travers le tunnel. Codes HTTP, headers, tout est disponible et pour permettra de vous simplifier de debugging en cas de soucis.

Mon avis

Ngrok est vraiment un excellent outil. Installation et utilisation on ne peut plus simple. De plus, le plan gratuit proposé est plus que conséquent et tout à fait suffisant pour la plupart d'entre nous. Si vous avez déjà eu besoin d'afficher un port local à la face du monde, n'attendez plus et essayez-le !