Comment partager son projet local à son client avec Ngrok

Pixel Online Création/ août 28, 2018/ Outils/ 0 commentaires

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 :

Chemin Ngrok

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!) :

Dossier ngrok

Voici ce que vous obtiendrez :

Ngrok Online

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)

Ngrok virtual host

Et voilà, c’est facile n’est-ce pas! Par contre, vous n’avez plus d’excuse pour ne pas montrer l’avancement de votre projet à votre patron!

Summary
Comment partager son projet local à son client avec Ngrok
Article Name
Comment partager son projet local à son client avec Ngrok
Description
Ce petit script à lancer en ligne de commande, disponible sur Linux, Mac et Windows vous permettra en un instant de rendre accessible sur Internet votre site Web ou application hébergé 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 si 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.
Anthony PARIS
Pixel Online Création
Pixel Online Création
https://www.pixel-online.fr/wp-content/uploads/2018/02/partage-rs.jpg

Laisser un Commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces HTML balises et attributs: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.