Mostrare al cliente il sito in locale sul proprio computer (con ngrok)

Introduzione

Se stai realizzando il sito web per un tuo cliente, arriva un momento in cui glielo devi mostrare per avere dei feedback sul lavoro eseguito.

La strada migliore è caricare il sito su un dominio provvisorio di terzo livello affinché possa essere sempre accessibile dal cliente.

In alcuni casi, però, potresti avere la necessità di mostrare il sito ancora quando si trova solo sul tuo computer.

Quindi come possiamo fare in questo caso?

In questi casi ci viene in aiuto ngrok.

Che cos’è ngrok?

Ngrok è un software molto interessante che permette di creare un indirizzo web che punta al tuo localhost. Avrai a disposizione un’url simile a questo: http://sj47sj.ngrok.io

Tramite url di questo tipo, i tuoi clienti potranno vedere il work in progress direttamente dal tuo computer.

Si tratta di un link usa e getta, in quanto funziona (ovviamente) quando il tuo computer è acceso. Quindi se spegni il computer oppure chiudi l’applicazione, il link smette di funzionare.

Questo ti può far risparmiare moltissimo tempo quando necessiti di feedback continui dal cliente su un lavoro. In questo modo ti eviti la rogna di dover caricare su un server di stage ogni minima modifica.

Può essere molto utile anche a te stesso se vuoi testare il progetto su dispositivi mobile in velocità.

Come installare ngrok su MacOS

1) Download

Puoi scaricare l’applicazione da qui https://ngrok.com/download. In questo caso cliccherai sul bottone “Download for OS X” come nello screenshot sottostante.

2) Installare ngrok globalmente

Dopo aver scaricato lo zip, decomprimilo. All’interno ci troverai un unico file: ngrok, senza alcuna estensione.

Volendo lo potresti tenere dove vuoi, quindi anche nella cartella Downloads dove presumibilmente ti trovi ora. Per tenere tutto in ordine, però, ti consiglio di spostare il file dentro la cartella Applicazioni.

Facciamo subito un test per vedere se funziona tutto correttamente.

Apri il terminale. Se non sei famigliare con il terminale, non ti preoccupare, dovremo effettuare delle operazioni molto basilari. Generalmente lo puoi trovare nella cartella Altro dentro il Launchpad.

In questo momento, ngrok funziona solo all’interno della cartella dove si trova. Quindi dobbiamo posizionarci in quella cartella all’interno del terminale.

Se hai spostato il file dentro la cartella Applicazioni, il percorso sarà semplicemente: /Applications.

Scrivi quindi nel terminale e poi premi invio:

cd /Applications

Se preferisci c’è un modo più semplice di scrivere nel terminale il percorso di una cartella. Scrivi solo “cd” e premi la barra spaziatrice per creare uno spazio, poi non devi far altro che trascinare la cartella che ti interessa all’interno del terminale. In questo modo il sistema scriverà per te il percorso completo.

Ora che ci troviamo all’interno della cartella che ci interessa scrivi nel terminale:

./ngrok

Che è esattamente la stessa cosa di scrivere solo (in questo modo ti puoi evitare il passaggio di posizionarti nella cartella contenente il file che ti interessa):

/Applications/ngrok

Se hai seguito correttamente i pochi passaggi descritti fino a qui, dovresti vedere una schermata come questa qui sotto:

Fino a qui tutto bene. Il problema, però, è che in questo modo funziona solo all’interno della cartella dove l’abbiamo installato.

Il nostro obiettivo è far sì che funzioni globalmente quindi indipendentemente dalla cartella dove ci si trova nel momento in cui vogliamo eseguire l’applicazione.

Questo passaggio non è assolutamente necessario per il corretto funzionamento del programma, però ti farà risparmiare tempo ogni volta che vorrai utilizzarlo.

Quindi come facciamo ora ad installare ngrok globalmente e poterlo eseguire da qualsiasi cartella?

Non dobbiamo far altro che creare un symlink che altro non è che un semplice collegamento.

Esegui i seguenti comandi nel terminale:

Prima ci posizioniamo nella cartella bin:

cd /usr/local/bin

Poi creiamo il collegamento:

ln -s /Applications/ngrok ngrok

Bene, ora che hai completato tutti i passaggi fin qui descritti, potrai eseguire ngrok da qualsiasi cartella, scrivendo nel terminale solo:

ngrok

Come installare ngrok su Windows

1) Download

Puoi scaricare l’applicazione da qui https://ngrok.com/download. In questo caso cliccherai sul bottone “Download for Windows” come nello screenshot sottostante.

2) Installazione

Su Windows tutta la faccenda diventa più semplice in quanto ti è sufficiente dezippare il file che hai appena scaricato ed eseguirlo.

Ti si aprirà una riga di comando dove potrai eseguire ngrok, difatti digitando semplicemente

ngrok

vedrai una schermata come quella che segue:

Quindi ogni volta che vorrai utilizzare ngrok dovrai eseguire il file ngrok.exe.

Prosegui nella lettura per capire come impiegarlo nei tuoi progetti.

Come creare un tunnel al proprio localhost con ngrok

Ora che hai installato correttamente l’applicazione ngrok passiamo a come utilizzarlo nei tuoi progetti.

Ngrok permette diversi utilizzi, infatti ti consiglio di dare un’occhiata alla documentazione ufficiale per capire tutto quello che puoi fare con questo programma.

In questo articolo andremo a vedere solo due esempi specifici, che sono quelli più probabili nella maggior parte dei casi.

1) Tunnel alla root del tuo localhost

Il primo esempio è quello più semplice.

Ti è sufficiente digitare la seguente stringa per creare un tunnel al tuo localhost:

ngrok http 80

Premi invio e ti comparirà una schermata simile a questa:

In questa schermata ci interessano principalmente:

• Web Interface: tramite questo indirizzo puoi accedere ad un’interfaccia web dove puoi monitorare tutte le attività associate all’url che hai appena creato. Questo vuol dire che puoi vedere quanti utenti si stanno collegando ed altre informazioni.
• Forwarding: questo è il link che dovrai fornire al tuo cliente. Hai entrambe le versioni, sia http che https. Lavorando in locale probabilmente userai quasi sempre l’http.
• HTTP Requests: In questa sezione vedrai in tempo reale tutte le richieste http che vengono fatte tramite il tuo link. Ti è utile per capire se qualcuno sta guardando il sito in un dato momento.

Quindi in questo esempio specifico, l’utente che accederà all’indirizzo http://e520a907.ngrok.io/ avrà accesso alla root del tuo localhost.

Questo vuol dire che se stai utilizzando MAMP o XAMPP verrà servito il file index.php all’interno della tua cartella /htdocs.

Se invece utilizzi WAMP su Windows il tuo tunnel porterà gli utenti alla index.php della cartella www.

2) Tunnel verso un virtual host

Se stai utilizzando i virtual host per i tuoi progetti come ti ho consigliato in questo articolo – come creare un virtual host – allora la procedura che devi seguire è leggermente diversa.

In questo caso dovrai aggiungere un altro parametro per indicare l’indirizzo del tuo virtual host come nell’esempio seguente:

ngrok http -host-header=miosito.dev 80

Dove al posto di miosito.dev metterai l’indirizzo del tuo progetto in locale.

Usare ngrok con un sito WordPress

Se il progetto al quale stai lavorando è in WordPress, allora dovrai mettere in atto alcuni accorgimenti per far in modo che il tuo cliente veda correttamente il sito.

Come sai, tutti gli url che crea WordPress sono assoluti ovvero mostrano per esteso l’indirizzo di un determinato documento:

http://miosito.dev/wp-content/uploads/2018/1/img.jpg

Questa caratteristica diventa un problema nel momento in cui vuoi inviare il tunnel ngrok ad un’altra persona.

Se non modifichiamo gli url che vengono utilizzati per tutti gli assets (vedi fogli di stile, scripts, immagini ecc..) questi non verranno visualizzati dal cliente.

Per risolvere questo problema bisogna installare ed attivare un plugin come Relative URL per ottenere degli indirizzi come questo:

/wp-content/uploads/2018/1/img.jpg

Bisogna inoltre aggiungere le seguenti righe di codice nel file wp-config.php appena prima della riga “/* Finito, interrompere le modifiche! Buon blogging. */”:

define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);

Ricordati di disinstallare il plugin e rimuovere le righe di codice dal file wp-config.php quando metterai il sito online.

Conclusioni

Spero di averti fatto scoprire un interessante strumento che integrerai nel tuo workflow.

Se questo articolo ti è piaciuto e l’hai trovato utile, mi faresti un grande favore a condividerlo sul tuo social preferito 🙂 d’altronde potresti aiutare qualche altro collega che magari non è ancora a conoscenza di questo strumento.

Come sempre fammi sapere nei commenti se hai difficoltà, cercherò di darti una mano per quanto possibile.