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.
Ho scritto altri articoli che potrebbero tornarti utili. Eccone alcuni:
- Guadagnare online, tutti i modi per lavorare online da casa seriamente
- Photoshop per front end developers
- Obiezioni dei clienti sul riutilizzo del know how e del codice prodotto
- Come trovare clienti per te che sei un web developer freelance
- Perché ho scelto SiteGround per il mio sito e quelli dei miei clienti
- Come creare un virtual host in locale con MAMP
- 100/100 su Pagespeed Insights con il tuo sito WordPress
ciao ho seguito la tua guida per wordpress 4.9.8 e MAMP ma non riesco a farlo funzionare 🙁
Ciao Vincenzo, non capisco se il tuo problema è con MAMP o con ngrok. Ad ogni modo per aiutarti avrei bisogno di qualche altra info.
Ottimo articolo, grazie!
interessante articolo.
per cui il cliente non deve per forza avere una rete wi-fi condivisa con il server locale dove alloggia il sito?
Grazie per la guida
No, è sufficiente il link creato da ngrok.
Ciao è possibile che ci siano problemi con i plugin di wp?
Grazie
Teoricamente no però la pratica è tutta un’altra faccenda 😀
Grazie, molto ben fatto!
Ciao Eduard, ottimo tutorial. Se io ho più di installazione in local e vorrei mostrarne solamente una al mio cliente?
Ciao Stefano, in questo caso ti consiglio di utilizzare i virtual host. Lo spiego in questo articolo: https://www.eduardzabara.com/come-creare-un-virtual-host-locale/
Ciao Eduard, ho seguito la tua guida ma non riesco a far funzionare ngrok e MAMP. MAMP è correttamente startato e navigando su “localhost” vedo correttamente la homepage index.php. Ma una volta che lancio ngrok e navigo sull’url fornito, mi rimanda ad una “404 Not found, The requested URL / was not found on this server.”
Senza approfondire il caso specifico è davvero difficile aiutarti. L’unica cosa che mi viene in mente è che tu stia utilizzando una porta diversa per il tuo localhost su MAMP. Nell’articolo scrivo di far partire ngrok con questo comando “ngrok http 80”. Se però tu accedi a localhost scrivendo localhost:8080 o localhost:8888 allora devi modificare di conseguenza anche la porta su ngrok.
Ciao Eduard, hai perfettamente ragione nel senso che non ti ho specificato questo punto, ma ti assicuro che MAMP è settato sulle porte 80 per http, 443 per https e via dicendo. Ad ogni modo sono riuscito a visualizzare un virtual host utilizzando il comando “-host-header” e seguendo la tua guida, ma non il localhost principale (questo è veramente strano :D). Ho anche qualche problema con i siti sotto https, nel senso che utilizzando MAMP PRO li vedo correttamente inserendo l’url del virtual host nel browser, ma quando attivo ngrok con “-host-header” (come fatto per i siti http) mi rimanda ad una 404. Tu come lavori solitamente con gli https?
Ciao Alessio,
Ho notato anch’io che una volta attivati i virtual host, il localhost non funziona più come uno si aspetta per cui io ti consiglio di attivare un virtual host per ogni progetto al quale stai lavorando per risolvere il problema.
Per quanto riguarda https non vedo il motivo di lavorare con https in locale, motivo per il quale non ho mai indagato per capire come far funzionare tutta la baracca. Scusa su questo aspetto non so aiutarti.
Ciao Eduard, ho installato ngrok e collegato al sito che ho in locale. La home page si apre e si vede bene ma non riesco a navigare tra le pagine del sito. Per esempio se vado in “chi siamo” da terminale vedo errore 301 moved permanently.
Il plugin RELATIVE URL è installato ed attivo ma se inserisco le due righe di codice nel wp-config non vedo più bene nessuna sezione del sito.
Sai darmi indicazioni? Grazie!
Ciao Stefano,
Difficile a dirsi senza vedere l’installazione. Controlla d’aver installato il plugin corretto. A me è appena successo, avevo installato quello sbagliato e vedevo tutto il layout rotto.
Ciao, ottima guida funziona tutto tranne l’ultimo passaggio, ossia quando devo visualizzare il sito wordrpress.
Se faccio il test dal mio telefono vedo tutto tranne il sito wordpress comparendomi la schermata come se non fosse abilitato xamp.
Ora mi sorge un dubbio ma xamp lo deve installare anche il cliente nel proprio pc?
Ciao Andrea, hai installato il plugin giusto come scritto nell’articolo? In caso carica lo screenshot di quello che vedi su https://prnt.sc/ e poi metti il link qui in un commento e ci do un occhio.
Buona sera, anche io ho lo stesso problema di Stefano, ho installato più volte il plugin ma una volta copiate le due stringhe non funziona più il sito.
Che problema può essere. Grazie
Che url stai usando in locale? Se non hai creato un virtual host come spiego qui: https://www.eduardzabara.com/come-creare-un-virtual-host-locale/ potrebbe essere questo il problema.
ho provato a creare un virtual host ma non sono riuscito, il server apache di mamp non partiva.
Ciao Eduardo , quando vado a creare il collegamento:
ln -s /Applications/ngrok ngrok
mi esce scritto : Permission denied
ho trovato la soluzione bisogna anteporre il comando sudo