Comment partager son projet local à son client avec Ngrok

Ngrok est un petit script à lancer en ligne de commande disponible sur Linux, Mac et Windows. Ce dernier vous permettra en un instant de rendre accessible sur Internet votre site Web ou application hébergé(e) sur votre serveur Web local. (Wamp, EasyPhp, …)

En téléchargement depuis longtemps déjà, j’ai découvert ce petit outil il y a quelques mois pour montrer l’avancement d’un projet à mon client.

Même s’il est possible d’utiliser le partage d’écran ou la prise en main à distance, cet outil est également parfait pour tester l’affichage d’un projet ou le bon rendu du Responsive Design sur différents supports.

Comment télécharger Ngrok

Tout d’abord, rendez-vous sur le site de l’éditeur : https://ngrok.com/ (Je laisse le lien en follow, car il mérite un bon backlink dans un article à contenu )

Téléchargez l’archive en fonction de votre système d’exploitation (pour ma part Windows), dé zippez le contenu précédemment téléchargé et placez le fichier à la racine du dossier WWW de votre serveur local.
Dans mon cas, mon fichier se trouve ici :

Et voilà, une grosse partie du travail est faite!

Comment utiliser Ngrok (sur Windows)

Ouvrez votre terminal de commande (tapez cmd dans la barre de démarrage de votre Windows).Rendez-vous dans le dossier où vous avez déposé Ngrok et lancez la commande permettant de créer un tunnel sécurisé (Votre serveur local doit être démarré, bien entendu!) :

Voici ce que vous obtiendrez :

Ngrok est lancé, votre tunnel sécurisé est en place :

• https://3963cc50.ngrok.io (ou la version non sécurisée) est l’url à partager aux autres postes.
• Utilisez le raccourci CTRL+C pour fermer la connexion.

Ngrok et le virtual host

Si vous utilisez des liens absolus pour l’insertion de votre Css ou Js, Ngrok ne va pas charger votre fichier, car il va modifier le début de l’URL à la volée.

// URL de votre CSS
<link href="/admin/build/css/custom.min.css" rel="stylesheet">
//Une fois Ngrok lancé
<link href="https://3963cc50.ngrok.io/admin/build/css/custom.min.css" rel="stylesheet">

Pour palier à ce problème, deux solutions. Soit en plaçant dans la partie head de votre page :

<base href="http://www.exemple.com/">

Cela aura pour impact direct de changer l’url de vos fichiers inclus :

<link href="http://www.exemple.com/admin/build/css/custom.min.css" rel="stylesheet">

Ou en utilisant un Virtual host. Si vous avez ajouté votre site comme Virtual host, voici la commande à lancer auprès de Ngrok : (myvirtualhost-dev étant le nom de votre Virtual host)