Astro, htmx, Alpine.js e Tailwind CSS: l'ambiente di sviluppo

Lo stack Astro, htmx, Alpine.js è una combinazione di framework e librerie utili per creare applicazioni web moderne, leggere e performanti, basate su un approccio dichiarativo con un utilizzo minimo di JavaScript. In questo, lo stack AHA si distingue dall'approccio tradizionale delle SPA che fanno un uso intensivo di JavaScript.

Questa guida si propone di fornire un esempio pratico di sviluppo di un sito web veloce, dinamico e interattivo basato sullo stack Astro, htmx e Alpine.js e con l'utilizzo di Tailwind CSS per semplificare la creazione degli stili.

Astro è un framework JavaScript versatile e leggero che permette di creare siti web veloci e SEO friendly incentrati sui contenuti. È adatto alla creazione di ogni tipo di sito, dai blog agli e-commerce, dai portfolio professionali ai siti di documentazione.

Htmx è una libreria JavaScript che arricchisce HTML con funzionalità dinamiche, come richieste AJAX, senza codice JavaScript esplicito.

Alpine.js è una libreria JavaScript leggera e flessibile che permette di aggiungere interattività alle pagine di un progetto web.

Messe insieme, queste tecnologie permettono di creare siti web veloci, interattivi e dinamici.

Prima di iniziare, è opportuno dotarsi degli strumenti necessari:

• Un terminale dei comandi
• Un editor di codice (consigliato Visual Studio Code)
• La versione corrente di Node.js e npm

Dopo aver installato il software necessario, il primo passo è configurare l'ambiente di sviluppo.

Configurazione dell'ambiente di sviluppo

Questa guida è destinata a sviluppatori con una conoscenza di base di JavaScript, programmazione lato server con Node.js e familiarità con HTML e CSS. Gli argomenti relativi ai processi di build (es. configurazione di npm run build, gestione delle dipendenze e distribuzione) non saranno trattati in dettaglio. Per informazioni su build e distribuzione, si rinvia alla documentazione ufficiale di Astro.

Se non abbiamo ancora installato Node, possiamo scaricarlo dal sito ufficiale. Una volta installato, apriamo il prompt dei comandi e verifichiamo di avere le versioni più recenti di Node.js e npm digitando quanto segue:

node -v

e

npm -v

Se il terminale risponde fornendo le versioni più recenti di Node e npm, possiamo passare alla creazione del progetto.

Passo 1: Creazione del progetto Astro

Apriamo il terminale dalla directory che ospita i nostri progetti e digitiamo il seguente comando:

npm create astro@latest

Premendo invio, la procedura guidata chiederà il nome e la directory in cui installare il progetto, il template di avvio, la conferma dell'installazione delle dipendenze e se inizializzare o meno una repo git. L'immagine che segue mostra i dettagli del nostro progetto.

Conclusa la procedura di installazione, sempre dal terminale, ci spostiamo nella cartella del progetto:

cd astro-blog

Quindi avviamo il server di sviluppo:

npm run dev

Questo comando avvia il watcher che ci permetterà di visualizzare gli effetti delle nostre modifiche in tempo reale.

Nella risposta del terminale, si legge l'indirizzo dove viene visualizzata la pagina di benvenuto di Astro, solitamente http://localhost:4321/.

Passo 2: Installazione di Tailwind CSS

Fermiamo momentaneamente il server con Ctrl + C (Windows/Linux/Mac) oppure apriamo un nuovo terminale nella directory del progetto. Digitiamo poi il seguente comando:

npx astro add tailwind

Grazie all'integrazione di Tailwind 4 di Astro, questo comando avvia una procedura guidata che installa le dipendenze necessarie e configura automaticamente il progetto: crea il file /src/styles/global.css e aggiorna il file astro.config.mjs, come mostrato nell'immagine che segue.

Nella risposta del terminale leggiamo che, per utilizzare Tailwind, dovremo prima importare nei file di layout il foglio di stile appena creato. Verifichiamo quindi che Tailwind funzioni correttamente. Apriamo il file /src/pages/index.astro e modifichiamolo come segue:

---
import Welcome from '../components/Welcome.astro';
import Layout from '../layouts/Layout.astro';
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
---
<Layout>
	<h1 class="text-5xl font-bold text-purple-600">
		Welcome to <span class="text-blue-600">Astro</span>
	</h1>
	<Welcome />
</Layout>

Abbiamo semplicemente aggiunto una nuova clausola import e un titolo h1 con alcune classi di utilità di Tailwind. Salviamo il file e riavviamo il server se l'abbiamo interrotto. Se nella pagina iniziale del progetto appare un'intestazione viola, Tailwind funziona correttamente.

Passo 3: Integrazione di htmx e Alpine.js

Il modo più semplice di aggiungere htmx e Alpine.js ad un progetto Astro è tramite un tag <script> nel layout principale dell'applicazione. Includendo le librerie nel layout, queste saranno disponibili in tutte le pagine del sito.

Possiamo installare le due librerie utilizzando una CDN o scaricandole in locale. Se decidiamo per la CDN, apriamo il file src/layouts/Layout.astro e aggiungiamo i seguenti script all'interno dell'head del documento:

<!-- Aggiunge htmx -->
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>
<!-- Aggiunge Alpine.js -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

I link alle librerie sono forniti dai siti ufficiali di htmx e Alpine.js, cui si rinvia per maggiori informazioni ed eventuali aggiornamenti di versione.

Una CDN è comoda per lo sviluppo ma in produzione è preferibile scaricare le librerie in locale. Questo ci consente di avere il controllo delle versioni, migliorare le prestazioni e ridurre i rischi legati alla privacy. Ad esempio:

<!-- Aggiunge htmx -->
<script defer src="/libs/htmx.min.js"></script>
<!-- Aggiunge Alpine.js -->
<script defer src="/libs/alpine.min.js"></script>

Il file src/layouts/Layout.astro dovrebbe ora essere simile a questo:

---
import '../styles/global.css'
---
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro Basics</title>
		<!-- Aggiunge htmx -->
		<script defer src="/libs/htmx.min.js"></script>
		<!-- Aggiunge Alpine.js -->
		<script defer src="/libs/alpine.min.js"></script>
	</head>
	<body>
		<slot />
	</body>
</html>
<style>
	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
	}
</style>

Verifichiamo ora che le due librerie siano state installate correttamente aggiungendo un componente Alpine alla home page del progetto. Apriamo il file src/pages/index.astro e aggiungiamo il seguente codice all'interno del layout:

<div x-data="{ count: 0 }">
	<button x-on:click="count++" class="bg-blue-500 text-white font-bold py-2 px-4 rounded">Increment</button>
	<span x-text="count"></span>
</div>

Questo codice dovrebbe creare un pulsante Increment con un contatore. Ad ogni clic, il contatore dovrebbe incrementarsi di 1.

Ora passiamo a testare il corretto funzionamento di htmx. Per questo abbiamo bisogno dell'endpoint di un'API che può anche fornire del semplice codice HTML. Possiamo, ad esempio, creare una directory /src/pages/api/ e creare al suo interno un file hello.astro con il seguente codice:

<div class="mt-4 p-4 bg-green-100 text-green-800 rounded border border-green-300">
	Hello htmx!
</div>

Ora torniamo al file /src/pages/index.astro e creiamo un pulsante potenziato da htmx:

<div class="text-center p-8">
	<button
		hx-get="/api/hello"
		hx-target="#target"
		hx-swap="outerHTML"
		class="bg-orange-500 text-white font-bold py-2 px-4 rounded">
		Click me!
	</button>
	<div id="target"></div>
</div>

Salviamo i nostri file e torniamo alla home page del progetto nel browser. Dovremmo vedere un nuovo pulsante che al clic mostri il messaggio Hello htmx!

Conclusioni

Ora che abbiamo appurato che tutto funziona correttamente, ripuliamo il progetto dal codice di prova. Eliminiamo il file /src/pages/api/hello.astro e il codice che abbiamo inserito nel file /src/pages/index.astro.

Il codice descritto in questa guida è disponibile in questa repo GitHub. Ora è tutto pronto per creare un sito dinamico e interattivo con lo stack AHA.