CONTATTACI

Guide per aspiranti programmatori

Lezione 29 / 30

Build e bundling degli asset in Laravel

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.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.