Refresh automatico del browser con PHP, XAMPP e Live Server

Iniziare a programmare con PHP è un’esperienza al limite del mistico. Ci sono in giro centinaia di tutorial tutti diversi che ti spiegano come installare PHP, dove installarlo, come inserire le variabili di sistema, se e quale piattaforma usare, etc. etc.
In questo tutorial cercherò di agevolare la vita ad ogni programmatore novizio, spiegando come evitare di cliccare sul famigerato tasto “aggiorna” sul browser ad ogni minimo cambiamento di file.
Ho notato infatti che quasi tutti i beginners, ogni volta che cambiano un file, sia esso .php, html, css o JavaScript, devono manualmente fare un refresh del browser. Ciò è un vero e proprio invito a NON imparare a programmare!
Ai fini del tutorial utilizzeremo come editor VS Code, il mio IDE preferito perchè davvero malleabile e gestibile con le estensioni ma sopratutto perchè…gratis! Da bravo beginner ti sconsiglio di acquistare subito una licenza per PHPStorm, IDE molto avanzato ma che per imparare a programmare è come usare un rullo compressore per stirare una camicia.

1 – Installa XAMPP

XAMPP è una piattaforma che permette di ospitare una “virtual machine” sul proprio PC. Senza entrare troppo nel tecnico, XAMPP farà sì di avere un vero e proprio server sul tuo pc (usando Apache), sul quale potrai sviluppare siti web completi con tanto di database (MySql). La cosa più importante di XAMPP ai fini di questo tutorial è che installerà PHP in una sua sottocartella, così potrai programmare in presa diretta e vedere i risultati del tuo codice direttamente sul browser.
Per una guida su come installarlo su Windows trovi un ottimo tutorial qui. Per Mac, a questo link.

Finita l’installazione la folder con i file di XAMPP si trova in C:/xampp, almeno su Windows. In tale cartella troverai anche la sottocartella htdocs, il cui contenuto è visitabile andando sull’url http://localhost/. Di default comparirà la Dashboard di XAMPP, il mio consiglio è quello di crearti una tua cartella in C:/xampp/htdocs/mia-cartella che sarà quindi raggiungibile su http://localhost/mia-cartella.
Crea un file .php e voilà! Hai tutte le carte in regola per sbizzarrirti con il tuo codice. Avrai notato però che ogni volta che esegui e salvi delle modifiche sui file devi cliccare su aggiorna nella tab del browser per vedere la versione aggiornata dell’output. Che rottura, vero?

2 – Installa L’estensione Live Server su VS Code

Vai sulla tab “estensioni” situata sul menu verticale di VS Code a sinistra. Nella barra di ricerca digita “Live Server” proprio come da screenshot sotto e installala! Quella corretta è aperta nella tab sulla destra sempre nello screenshot sottostante.

3 – Installa e configura l’estensione del browser “Live Server”

L’estensione del browser si chiama come quella di VS Code! Strano vero? Hanno anche la stessa icona! Io uso Chrome e l’estensione si trova nel marketplace a questo indirizzo.
È anche disponibile per Firefox qui.

Una volta installata puntala (pinnala) alla taskbar e cliccaci. Si aprirà una schermata da colore viola con varie opzioni. Ecco come configurarla

Questo è il passaggio cruciale: Nel campo actual server address dovrai inserire l’indirizzo del tuo ambiente di lavoro su XAMPP, nel mio caso http://localhost/php-tutorial; seguendo l’esempio precedente http://localhost/mia-cartella. Il campo Live Server Address puoi lasciarlo così, a meno che tu non abbia già un’applicazione che occupi la porta 5500, in questo caso cambiala nell’estensione.

4 – Go live!

Come ultimo passaggio, riapri il buon vecchio VS Code nella cartella che hai creato in /htdocs/mia-cartella (ancora una volta, segui il tutorial di installazione XAMPP sui link di prima per capire quale sia il path giusto) e clicca su go live, in basso a destra (screenshot sotto)

A questo punto si aprirà una finestra nel browser con url http://127.0.0.1:5500/; se hai cambiato il numero della porta lo vedrai qui. Tale schermata conterrà i file e le cartelle del tuo workspace su VS Code. Non cliccare da nessuna parte! Sembra strano ma questa scheda e questo url non sono quelli che ci interessano!

Ritorna sull’url di XAMPP predefinito, http://localhost/mia-cartella e, in VS Code, prova a modificare qualsiasi file nel tuo workspace, non solo PHP. Vedrai che il browser, dopo aver salvato le modifiche, si riaggiornerà automaticamente! Non sono un matematico ma ad occhio e croce il reload automatico ti farà risparmiare svariati minuti al giorno e molta frustrazione!

Conclusione

Il reload automatico del browser è un passaggio fondamentale nella cosiddetta “quality of life” quando si tratta di programmazione con PHP. Il metodo descritto in questo tutorial non è l’unico, ci sono infatti infiniti metodi, ad esempio con NPM e Gulp, ma utilizzare XAMPP e l’estensione Live Server è sicuramente il più facile e veloce! Spero di averti dato un piccolo ma utile consiglio e fammi sapere se ti ha aiutato nei commenti!