Framework · Dal 2020

SvelteKit

SvelteKit è il framework ufficiale per app web con Svelte: routing basato su file, rendering lato server, caricamento dati e deploy flessibile.

Inizia la guida Discussioni

SvelteKit è il framework applicativo ufficiale del team di Svelte, presentato per la prima volta nel 2020 e sviluppato come progetto open source. Si basa su Svelte, che compila i componenti in JavaScript efficiente in fase di build, e aggiunge routing, rendering lato server (SSR), caricamento dei dati, gestione dei form, build e deploy; server di sviluppo e bundling sono affidati a Vite. L'attuale generazione di Svelte esprime la reattività con le rune, come $state, $derived, $effect e $props.

Il suo punto di forza è la possibilità di scegliere la strategia di rendering pagina per pagina. I contenuti uguali per tutti, come articoli di blog e documentazione, possono essere prerenderizzati durante la build; le pagine personalizzate vengono renderizzate sul server, mentre le schermate che dipendono molto dalle API del browser possono essere renderizzate solo sul client. Le form action funzionano anche senza JavaScript e vengono migliorate progressivamente, e cambiando adapter lo stesso codice si pubblica su un server Node.js, su hosting statico o su piattaforme come Vercel, Netlify e Cloudflare.

Per iniziare, crea un progetto con npx sv create e segui il tutorial interattivo su svelte.dev, prima le basi di Svelte e poi SvelteKit. Il materiale meno recente mostra spesso sintassi e configurazioni ormai cambiate, come export let, $lib o svelte.config.js, quindi conviene studiare sulla documentazione ufficiale e sulla sintassi attuale delle rune.

Punti di forza

Componenti compilati con le rune

$state, $derived, $effect e $props rendono esplicita la reattività, e il compilatore genera codice che aggiorna solo ciò che cambia, senza DOM virtuale.

Routing basato su file e layout

La struttura delle cartelle in src/routes corrisponde agli URL; i file +page, +layout, +server e +error definiscono pagine, layout, API e schermate di errore.

Rendering scelto per pagina

Scegli rendering lato server, lato client o prerendering per ogni pagina con le opzioni prerender, ssr e csr.

Funzioni load e form action

Carica i dati con funzioni load tipizzate automaticamente e modificali con form action che funzionano anche senza JavaScript.

Dove si usa

Siti di contenuti come blog e documentazione
App web full stack con autenticazione e database
Strumenti di amministrazione e dashboard
Siti promozionali su hosting statico

Installazione

1
Preparare Node.js
Lo sviluppo con SvelteKit si basa su Node.js. Installa una versione LTS recente e, in un nuovo terminale, verifica che node e npm mostrino la propria versione.
```
node --version && npm --version
```
2
Creare un progetto
Usa sv, lo strumento ufficiale da riga di comando, per creare un nuovo progetto. Potrai scegliere un modello, TypeScript e integrazioni come Prettier, ESLint, Vitest e Playwright.
```
npx sv create my-app
```
3
Avviare il server di sviluppo
Entra nella cartella del progetto, installa le dipendenze e avvia il server di sviluppo. Il browser apre http://localhost:5173 e le modifiche compaiono appena salvi.
```
cd my-app && npm install && npm run dev -- --open
```

Il tuo primo programma

La tua prima pagina

src/routes/+page.svelte è la home page (/). La variabile count, creata con la runa $state, aggiorna l'interfaccia a ogni modifica, e la funzione passata all'attributo onclick la incrementa a ogni clic. Per aggiungere pagine crea delle cartelle, ad esempio src/routes/about/+page.svelte.

src/routes/+page.svelte

<script lang="ts">
  let count = $state(0);
</script>

<h1>Hello, SvelteKit!</h1>
<button onclick={() => count++}>
  Clicked {count} times
</button>

npx sv create my-app && cd my-app && npm install && npm run dev

Strumenti di tutti i giorni

sv: La CLI ufficiale di Svelte. sv create crea i progetti e sv add configura integrazioni come Tailwind CSS, Vitest, Playwright e Drizzle.
Vite: Lo strumento dietro il server di sviluppo e la build di produzione. Si avvia rapidamente, supporta l'HMR e SvelteKit funziona come plugin di Vite.
svelte-check: Uno strumento da riga di comando che segnala errori di tipo e problemi specifici di Svelte in tutto il progetto. Si esegue con npm run check.
Svelte for VS Code: L'estensione ufficiale per VS Code, con evidenziazione della sintassi, completamento automatico, errori di tipo in linea e formattazione dei file .svelte.

Guida passo passo

Sei capitoli che ti accompagnano dall'installazione ai concetti chiave di SvelteKit.

Documentazione ufficiale e risorse

Linguaggi

Discussioni

Avvia una discussione

Fai domande, condividi la tua esperienza e scambia opinioni su SvelteKit.

Ancora nessuna discussione. Avvia la prima.