• chi sono
  • progetti
  • servizi
  • blog
  • Contatti
8.01.2018

Ngrok, come mostrare al cliente il sito in locale sul proprio computer

Scopri come creare un indirizzo web temporaneo per mostrare al tuo cliente il work in progress del suo sito direttamente dal localhost del tuo computer.

Indice
  • Introduzione
  • Che cos’è ngrok?
  • Come installare ngrok su MacOS
    • Download
    • Installare ngrok globalmente
  • Come installare ngrok su Windows
    • Download
    • Installazione
  • Come creare un tunnel al proprio localhost con ngrok
    • Tunnel alla root del tuo localhost
    • Tunnel verso un virtual host
  • Usare ngrok con un sito WordPress
  • Conclusioni

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.

Download Ngrok per Mac OS X

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:

Eseguire ngrok dentro la sua cartella

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.

Download Ngrok per Windows

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:

Schermata ngrok su Windows

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:

Schermata ngrok tunnel localhost

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
Ti è piaciuto l'articolo?
Iscriviti alla mia newsletter se vuoi che ti aggiorni appena scriverò altri articoli come questo.
Dichiaro di aver preso visione dell’Informativa Privacy nonché di aver già compiuto sedici anni - oppure, se minore di sedici, di essere stato preventivamente autorizzato dal titolare della responsabilità genitoriale - pertanto presto il mio consenso al trattamento dei dati per ricevere le Newsletter richieste.

Eduard Zabara

Web developer

Sono front end & WordPress developer. Un po' nerd timido e introverso, un po' pazzo scatenato anima della festa. Viaggio spesso da solo per obbligarmi a conoscere nuove persone in giro per il mondo. Scopri di più su di me

Seguimi sui social
Share
23 commenti su “Ngrok, come mostrare al cliente il sito in locale sul proprio computer”
  • vincenzo ha detto:
    15 Agosto 2018 alle 22:18

    ciao ho seguito la tua guida per wordpress 4.9.8 e MAMP ma non riesco a farlo funzionare 🙁

    Rispondi
    • Eduard Zabara ha detto:
      16 Agosto 2018 alle 10:45

      Ciao Vincenzo, non capisco se il tuo problema è con MAMP o con ngrok. Ad ogni modo per aiutarti avrei bisogno di qualche altra info.

      Rispondi
  • Silvia Ciapetti ha detto:
    29 Settembre 2018 alle 12:02

    Ottimo articolo, grazie!

    Rispondi
  • Simone ha detto:
    1 Ottobre 2018 alle 14:37

    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

    Rispondi
    • Eduard Zabara ha detto:
      3 Ottobre 2018 alle 12:22

      No, è sufficiente il link creato da ngrok.

      Rispondi
  • Giovanni ha detto:
    26 Febbraio 2019 alle 17:18

    Ciao è possibile che ci siano problemi con i plugin di wp?
    Grazie

    Rispondi
    • Eduard Zabara ha detto:
      27 Febbraio 2019 alle 10:53

      Teoricamente no però la pratica è tutta un’altra faccenda 😀

      Rispondi
  • Pietro ha detto:
    11 Marzo 2019 alle 18:48

    Grazie, molto ben fatto!

    Rispondi
  • Stefano ha detto:
    26 Marzo 2019 alle 15:34

    Ciao Eduard, ottimo tutorial. Se io ho più di installazione in local e vorrei mostrarne solamente una al mio cliente?

    Rispondi
    • Eduard Zabara ha detto:
      28 Marzo 2019 alle 11:45

      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/

      Rispondi
  • Alessio ha detto:
    14 Aprile 2019 alle 16:53

    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.”

    Rispondi
    • Eduard Zabara ha detto:
      15 Aprile 2019 alle 12:24

      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.

      Rispondi
  • Alessio ha detto:
    16 Aprile 2019 alle 11:47

    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?

    Rispondi
    • Eduard Zabara ha detto:
      18 Aprile 2019 alle 20:36

      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.

      Rispondi
  • Stefano ha detto:
    13 Novembre 2019 alle 17:43

    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!

    Rispondi
    • Eduard Zabara ha detto:
      21 Novembre 2019 alle 18:31

      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.

      Rispondi
  • Andrea ha detto:
    10 Giugno 2020 alle 15:23

    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?

    Rispondi
    • Eduard Zabara ha detto:
      10 Giugno 2020 alle 15:45

      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.

      Rispondi
  • Massimo ha detto:
    30 Giugno 2020 alle 18:39

    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

    Rispondi
    • Eduard Zabara ha detto:
      30 Giugno 2020 alle 19:37

      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.

      Rispondi
  • Massimo ha detto:
    30 Giugno 2020 alle 20:27

    ho provato a creare un virtual host ma non sono riuscito, il server apache di mamp non partiva.

    Rispondi
  • Carmine ha detto:
    7 Novembre 2020 alle 17:40

    Ciao Eduardo , quando vado a creare il collegamento:

    ln -s /Applications/ngrok ngrok
    mi esce scritto : Permission denied

    Rispondi
  • Carmine ha detto:
    7 Novembre 2020 alle 18:13

    ho trovato la soluzione bisogna anteporre il comando sudo

    Rispondi
Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Articoli recenti
Affiliate marketing strada verso la libertà
Leggi articolo
10.10.2020
Affiliate marketing: come guadagnare con le affiliazioni e vivere la vita che vuoi
Metodi per guadagnare online
Leggi articolo
31.07.2020
Guadagnare online, tutti i modi per lavorare online da casa seriamente
Photoshop per front end developer
Leggi articolo
6.05.2020
Photoshop per front end developers
Richiedi un preventivo

La distanza non è un problema!

“La linea retta è la distanza più breve tra due punti”. Il web è quella linea!

Collaboro con clienti soddisfatti in tutta Italia e tu puoi essere uno di loro!

Chiedi ora una consulenza!

hello@eduardzabara.com

Skype @eduard.zabara

Menu
  • Home
  • Chi sono
  • Team
  • Blog
  • Progetti
  • Servizi
  • Contatti
  • Dicono di me
  • Il mio metodo
  • Prezzi
  • Servizi per agenzie
  • Perché avere un sito web
  • Consulenza Skype

© 2021 Eduard Zabara - NIF Y6522452B - Calle Pelayo 14 Bj4 - 35010 Las Palmas de Gran Canaria (Spain)

Privacy Policy