Indipendentemente dalla modalità scelta per implementare il proprio frontend – Blade, Livewire oppure Vue / React con Inertia – sarà sempre necessario caricare JavaScript e CSS nel momento in cui il browser apre una pagina erogata dal proprio progetto Laravel, che si tratti di un sito web “old style” o di una moderna web app.
A partire dalla versione 9.x, Laravel utilizza di default Vite per eseguire il bundle degli asset JS e CSS. Vite offre ai progetti Laravel sia la comodità di ricaricare al volo le modifiche ai sorgenti in fase di sviluppo, sia di effettuare l’ottimizzazione di tali asset nel momento in cui si eroga l’applicazione da ambiente di produzione.
NOTA: le versioni di Laravel precedenti alla 9.x utilizzavano Mix per la compilazione degli asset. Mix è un pacchetto nato nella community Laravel per semplificare nei progetti Laravel le stesse attività che descriveremo tra poco. La scelta di sostituire Mix con Vite è legata anche al fatto che quest’ultimo sta diventando il tool di riferimento del mondo front end e, con una semplice integrazione, permette di non “reinventare la ruota”. Vite, inoltre, offre già pieno supporto a tecnologie come React e Vue, permettendo, quindi, di riutilizzare conoscenze e soluzioni.
Caricamento di stili e script in pagina in Laravel
Nel momento in cui si crea una nuova applicazione Laravel con Composer, Vite è già pronto per gestire gli script e gli stili dell’applicazione, anche se risulta necessario un setup iniziale.
Vite utilizza Node JS ed è, quindi, necessario assicurarsi di avere installato questo runtime JavaScript (versione 16+) e il relativo gestore di pacchetti.
node -v
npm -v
npm install
Vite è configurato tramite il file vite.config.js nella root del progetto. La configurazione standard prevede che venga usato il plugin di Vite per Laravel per indicare quali sono gli entry point della propria applicazione. Di default, vengono utilizzati i file resources/css/app.css e resources/js/app.js, ma è possibile indicare anche file preprocessati come TypeScript, JSX, TSX, and Sass.
Ora, supponiamo di modificare questi due file in modo molto semplice, ma impattante, per le nostre pagine:
/* resources/css/app.css */
h1 { color: red }
// resources/js/app.js import './bootstrap';
alert('Hello Fronted');
Creiamo, quindi, un template Blade, fatto renderizzare da una route opportuna, nel quale usiamo la direttiva @vite per indicare i due file che vogliamo includere come stile e script.
<!doctype html> <html lang="en"> <head> <title>Hello Frontend</title> @vite(['resources/css/app.css', 'resources/js/app.js']) </head> <body> <h1>Hello Frontend</h1> </body> </html>
Infine, facciamo partire in due diversi terminali il server di sviluppo di Vite e il nostro server PHP di sviluppo (php artisan serve).
# terminale 1 - vite $ npm run dev VITE v4.0.4 ready in 306 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help LARAVEL v9.48.0 plugin v0.7.3 ➜ APP_URL: http://localhost 11:08:59 PM [vite] page reload resources/views/example.blade.php
Se apriamo la pagina erogata dalla nostra nuova rotta (per esempio http://localhost:8000/app) vedremo che l’heading H1 è rosso e che si è aperto un alert. Se ispezioniamo il contenuto della pagine, troveremo che il codice HTML effettivamente caricato conterrà qualcosa di simile al seguente:
<title>Hello Frontend</title> <script type="module" src="http://[::1]:5173/@vite/client"></script> <script type="module" src="http://[::1]:5173/resources/js/app.js"></script> </head>
Il server di sviluppo di Vite sta leggendo e osservando le modifiche ai due file entry point indicati e sta generando in automatico per noi gli opportuni CSS e JS da caricare nella pagina. Nel nostro caso si trattava di semplice direttive, ma per applicazioni più complesse è possibile usare quei due file per l’intera configurazione di stile o per caricare tutti i moduli JavaScript o TypeScript necessari al corretto funzionamento del frontend, realizzando, quindi, il “bundle” di tutti gli asset necessari a far funzionare la web app.
L’applicazione Laravel, tramite la direttiva blade @vite, sta recuperando CSS e JS dal server di sviluppo di Vite, come se fossero ospitati su una macchina remota.
Oltre alla modalità “development”, Vite offre la possibilità di effettuare una build ottimizzata per erogare le stesse risorse in produzione. Interrompendo il server di sviluppo ed eseguendo il comando npm run build, Vite creerà i file public/build/assets/app-<HASH_UNIVOCO>.css e public/build/assets/app-<HASH_UNIVOCO>.js. Nel momento in cui il server di sviluppo di Vite non è in esecuzione, il nostro template Blade includerà questi file nel fare il rendering della view, che verranno, quindi, erogati direttamente dalla nostra app Laravel, in quanto inclusi nella directory public.
$ npm run build vite v4.0.4 building for production... ✓ 50 modules transformed. public/build/manifest.json 0.25 kB public/build/assets/app-4ed993c7.js 0.00 kB │ gzip: 0.02 kB public/build/assets/app-ef00eeea.js 100.80 kB │ gzip: 37.72 kB
<title>Hello Frontend</title> <link rel="preload" as="style" href="http://localhost:8000/build/assets/app-67dcdfd2.css" /> <link rel="modulepreload" href="http://localhost:8000/build/assets/app-0363c5ea.js" /> <link rel="stylesheet" href="http://localhost:8000/build/assets/app-67dcdfd2.css" /> <script type="module" src="http://localhost:8000/build/assets/app-0363c5ea.js"></script> </head>
Build di stili e script in Laravel
Oltre all’effettivo caricamento in pagina di CSS e JS, Vite può gestire anche la compilazione di stili e script partendo dai rispettivi file sorgenti (SCSS, moduli TypeScript e JavaScript, …). Vite è, infatti, un build tool per le tecnologie frontend ed è, quindi, possibile utilizzare tutte le sue feature “stand alone” all’interno di un progetto Laravel.
A titolo d’esempio, vediamo come integrare la libreria Bootstrap all’interno di un progetto Laravel, un caso che ci permette di restare all’interno di una configurazione semplice, ma comunque pratica perché impatta sia CSS che JavaScript.
Laravel mette a disposizione un pacchetto Composer dedicato a fornire preset e utilità per il frontend.
composer require laravel/ui
Una volta installato tale pacchetto, è possibile usare il (nuovo) comando Artisan ui per creare lo scaffolding base di bootstrap.
php artisan ui bootstrap
Questo comando modificherà alcuni file nel nostro progetto Laravel, in particolare:
- aggiungerà nuovi pacchetti NPM a package.json, inclusi scss e lo stesso bootstrap; sarà necessario installarli con npm install
- aggiungerà i file resources/sass/app.scss e resources/sass/_variables.scss, che saranno i sorgenti SCSS da cui costruire i CSS del progetto
- aggiornerà la configurazione di Vite per usare resources/sass/app.scss invece di resources/css/app.css (che quindi non fornirà più gli stili)
- aggiornerà il file resources/js/bootstrap.js (il bootstrap degli script JS della nostra app Laravel) per includere Bootstrap (la parte JS della libreria) tramite un import JavaScript
Sarà, quindi, sufficiente aggiornare il nostro template Blade per puntare al nuovo file “sorgente” degli stili.
<title>Hello Frontend</title> @vite(['resources/sass/app.scss', 'resources/js/app.js'])
Avremo, quindi, che:
- avviando il server di sviluppo di Vite (npn run dev), Vite si occuperà di eseguire il build on-fly dei file SASS in CSS e di renderli disponibili nelle nostre pagine mentre si sviluppa
- eseguendo la build degli asset per produzione (npm run build), Vite si occuperà di creare due singoli file nella directory public\build\asset con al loro interno tutto ciò che abbiamo indicato nei nostro sorgenti SASS e JS e tutto ciò che abbiamo importato dalla libreria Bootstrap.
npm run build vite v4.0.4 building for production... ✓ 111 modules transformed. public/build/manifest.json 0.26 kB public/build/assets/app-290d7b3a.css 192.30 kB │ gzip: 27.28 kB public/build/assets/app-b44a8b59.js 183.04 kB │ gzip: 62.36 kB
In modo simile, potremo integrare altre librerie installate via NPM oppure scrivere i nostri moduli JavaScript e importarli nella “app” tramite opportuni import JavaScript.
In ogni caso, grazie all’uso di Vite, il tutto nei modi e con tool già noti e consolidati nel mondo dello sviluppo front end.
