ngrok: Angular WebSite da localhost

In questo ultimo periodo ho ripreso in mano Angular e cosa c’è di meglio del rifare il sito alla propria commercialista per prendere confidenza oltre la teoria? Per farle vedere una versione bozza della home ho deciso di esporle il sito dal mio pc sfruttando ngrok evitando così di doverlo pubblicare in remoto.

ngrok: Angular WebSite - Step by Step

1. Scaricare ngrok e registrarsi al servizio (personalmente il piano free è l’ideale per lo sviluppo)
2. Posizionarsi nella cartella del sito Angular e lanciare il classico ng serve per avere il sito navigabile in locale (di default la porta è :4200)
3. Da prompt/shell avviare ngrok con la seguente sintassi in modo da evitare  “Invalid Host Header” come messaggio di errore: ngrok http 4200 -host-header="localhost:4200”

Attendere qualche secondo e l’output prodotto sarà il seguente (o meglio simile al)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Account Andrea Carratta (Plan: Free)
Version 2.3.34
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://3cbf0588.ngrok.io -> http://localhost:4200
Forwarding https://3cbf0588.ngrok.io-> http://localhost:4200
Connections
ttl     opn     rt1     rt5     p50     p90
0       0       0.00    0.00    0.00    0.00              

Come potete notare ho due indirizzi (http/https) espressi nel seguente formato

.ngrok.io

Ora non vi resta che fornire l’indirizzo al vostro cliente per visionare il sito in sviluppo senza doverlo pubblicare.

ngrok - Accesso dall’esterno

Una volta che effettuerà l’accesso noterete un cambiamento nella schermata dove lo avete avviato

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

HTTP Requests
-------------
GET /main.js                   200 OK
GET /styles.js                 200 OK
GET /vendor.js                 200 OK
GET /scripts.js                200 OK
GET /polyfills.js              200 OK
GET /runtime.js                200 OK
GET /                          200 OK

Davvero semplice, no? Vi segnalo la questione lentezza/numero richieste sul piano Free. Per maggiori informazioni vi rimando al sito del produttore.

Personalmente utilizzo tantissimo ngrok per testare i webhook di servizi online direttamente dal mio pc in fase di sviluppo con annesso debug. Utilizzarlo per Angular non mi era ancora capitato.

Link Utili:

ngrok: ngrok - secure introspectable tunnels to localhost