Come Fare il Deploy di un’App Svelte su Vercel Gratis: Guida Completa

by

Deploy Svelte su Vercel: la guida definitiva del 2026

Se stai cercando una soluzione veloce, gratuita e professionale per pubblicare online la tua applicazione Svelte o SvelteKit, Vercel è probabilmente la piattaforma migliore che tu possa scegliere. In questa guida ti mostrerò passo dopo passo come effettuare il deploy di Svelte su Vercel, partendo da zero fino ad arrivare al tuo dominio personalizzato configurato correttamente.

A differenza di altre guide che si limitano a due comandi generici, qui troverai comandi reali, screenshot testuali dei passaggi e soprattutto le soluzioni ai problemi di build più frequenti che incontrerai davvero nel 2026.

svelte code deployment

Perché scegliere Vercel per un progetto Svelte

Vercel è stata fondata dallo stesso team che ha creato Next.js, ma supporta nativamente anche Svelte e SvelteKit grazie a un adapter ufficiale. Ecco perché è la scelta migliore:

  • Piano gratuito generoso: 100 GB di banda al mese sul piano Hobby
  • Deploy automatico ad ogni push su GitHub, GitLab o Bitbucket
  • CDN globale incluso senza configurazione
  • HTTPS automatico con certificati SSL gratuiti
  • Preview deployments per ogni pull request
  • Supporto nativo per edge functions e serverless

Prerequisiti prima di iniziare

Prima di procedere con il deploy, assicurati di avere:

  1. Un account GitHub (gratuito)
  2. Un account Vercel (gratuito, puoi registrarti con GitHub)
  3. Node.js 20+ installato in locale
  4. Git configurato sul tuo computer

Step 1: Creazione del progetto Svelte in locale

Apri il terminale e crea un nuovo progetto SvelteKit con il comando ufficiale:

npx sv create mia-app-svelte

Il CLI ti farà alcune domande. Ecco le risposte consigliate per un deploy veloce:

  • Which template? → SvelteKit minimal (o Demo app se vuoi vedere qualcosa di pronto)
  • Add type checking? → Yes, using TypeScript syntax
  • Select additional options: → prettier, eslint (consigliati)

Entra nella cartella e installa le dipendenze:

cd mia-app-svelte
npm install
npm run dev

Se tutto funziona, dovresti vedere l’app in esecuzione su http://localhost:5173.

svelte code deployment

Step 2: Installare l’adapter Vercel

Questo è il passaggio più importante e spesso saltato. Per un deploy ottimizzato su Vercel devi installare adapter-vercel:

npm install --save-dev @sveltejs/adapter-vercel

Ora modifica il file svelte.config.js:

import adapter from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: adapter({
      runtime: 'nodejs20.x'
    })
  }
};

Nota: se lasci adapter-auto, funzionerà comunque, ma perderai la possibilità di configurare opzioni avanzate come edge runtime, ISR e image optimization.

Opzioni avanzate dell’adapter

Opzione Valore Utilità
runtime edge / nodejs20.x Scegli tra edge (veloce) o Node (compatibile)
regions [‘fra1’] Definisci la regione (Francoforte per l’Europa)
isr { expiration: 60 } Incremental Static Regeneration
split true / false Crea una function per ogni route

Step 3: Push del progetto su GitHub

Inizializza il repository Git nella tua cartella progetto:

git init
git add .
git commit -m "Initial commit - Svelte app pronta per Vercel"

Vai su github.com e crea un nuovo repository (puoi lasciarlo privato, funziona lo stesso). Poi collega il repo remoto:

git branch -M main
git remote add origin https://github.com/TUO-USERNAME/mia-app-svelte.git
git push -u origin main

Step 4: Deploy su Vercel dalla dashboard

Ora arriva la parte più semplice. Ecco cosa vedrai passo dopo passo:

  1. Accedi a vercel.com con il tuo account GitHub
  2. Clicca sul pulsante “Add New…” → “Project” in alto a destra
  3. Nella sezione “Import Git Repository” troverai la lista dei tuoi repo. Clicca “Import” accanto a mia-app-svelte
  4. Vercel rileverà automaticamente che si tratta di un progetto SvelteKit. Vedrai:
    • Framework Preset: SvelteKit
    • Build Command: npm run build
    • Output Directory: (lascia vuoto, gestisce l’adapter)
    • Install Command: npm install
  5. Se hai variabili d’ambiente, aggiungile nella sezione “Environment Variables”
  6. Clicca il pulsante blu “Deploy”

In circa 60-90 secondi vedrai apparire il messaggio “Congratulations!” con l’anteprima del tuo sito live su un URL tipo mia-app-svelte.vercel.app.

Step 5: Collegare un dominio personalizzato gratuito

L’URL di Vercel è comodo, ma per un progetto professionale vuoi un dominio custom. Ecco come fare:

  1. Entra nel tuo progetto su Vercel
  2. Vai in “Settings” → “Domains”
  3. Inserisci il tuo dominio (es. www.miosito.it) e clicca “Add”
  4. Vercel ti mostrerà i record DNS da configurare

Ecco i record da inserire nel pannello del tuo registrar (Aruba, Register, GoDaddy, Cloudflare, ecc):

Tipo Nome Valore
A @ 76.76.21.21
CNAME www cname.vercel-dns.com

Dopo la propagazione DNS (da pochi minuti a 24 ore massimo) il tuo sito sarà raggiungibile sul dominio custom con HTTPS attivo automaticamente.

svelte code deployment

Errori di build comuni e come risolverli

Questa è la sezione che nessuno ti dice. Ecco i problemi che incontrerai davvero e come risolverli.

Errore: “Cannot find module ‘@sveltejs/adapter-auto'”

Se hai sostituito l’adapter ma il config punta ancora ad auto, rimuovi il vecchio pacchetto:

npm uninstall @sveltejs/adapter-auto

Errore: “Function Runtimes must have a valid version”

Succede quando specifichi una versione runtime non supportata. Nel 2026 le versioni valide sono nodejs20.x e nodejs22.x. Aggiorna svelte.config.js di conseguenza.

Errore: variabili d’ambiente undefined in produzione

Ricorda che in SvelteKit le variabili si importano così:

import { SECRET_KEY } from '$env/static/private';
import { PUBLIC_API_URL } from '$env/static/public';

Le variabili private vanno definite senza prefisso, quelle public devono iniziare con PUBLIC_. Dopo averle aggiunte in Vercel, devi ridistribuire manualmente il progetto.

Errore: “Module not found” solo in build

Molto spesso è un problema di case sensitivity: Windows e Mac sono case-insensitive, Linux (server Vercel) no. Controlla che Header.svelte importato come header.svelte abbia lo stesso case.

Build lentissimo o timeout

Attiva la cache delle dipendenze (di default è già attiva) e considera queste ottimizzazioni:

  • Rimuovi devDependencies non necessarie
  • Usa pnpm invece di npm per install più veloci
  • Attiva Fluid Compute nelle impostazioni del progetto

Ottimizzazioni consigliate post-deploy

Una volta che il tuo sito è online, ci sono alcune configurazioni che fanno la differenza tra un progetto amatoriale e uno professionale:

  • Attiva Skew Protection: previene errori durante i deploy quando gli utenti hanno vecchie versioni in cache
  • Configura Analytics: Vercel offre analytics gratuiti fino a 2.500 eventi/mese
  • Speed Insights: monitora i Core Web Vitals reali dei tuoi utenti
  • Image Optimization: usa <enhanced:img> di SvelteKit per servire immagini ottimizzate automaticamente
  • Edge runtime: dove possibile, imposta export const config = { runtime: 'edge' } nelle route

Deploy da terminale con Vercel CLI

Se preferisci lavorare da terminale invece che dalla dashboard, installa la CLI:

npm i -g vercel
vercel login
vercel

Il comando vercel ti guida in una creazione interattiva del progetto. Per pushare direttamente in produzione senza passare da GitHub:

vercel --prod

FAQ sul deploy di Svelte su Vercel

Posso davvero deployare Svelte su Vercel gratis?

Sì. Il piano Hobby di Vercel è gratuito per progetti personali e include 100 GB di bandwidth mensile, deploy illimitati, HTTPS automatico e dominio personalizzato. È perfetto per portfolio, blog e progetti freelance.

Qual è la differenza tra Svelte e SvelteKit per il deploy?

Svelte è il framework, SvelteKit è il meta-framework che aggiunge routing, SSR e API. Su Vercel il deploy di SvelteKit è nativo grazie ad adapter-vercel. Un’app Svelte pura (solo client) va deployata come sito statico.

Devo pagare per il dominio personalizzato?

Il collegamento del dominio a Vercel è gratuito. Devi solo acquistare il dominio da un registrar (in media 8-15 euro all’anno). Puoi anche acquistare il dominio direttamente da Vercel se preferisci gestire tutto da un’unica dashboard.

Quanto tempo ci vuole per un deploy?

Un progetto SvelteKit medio si builda in 30-90 secondi. I successivi deploy dopo un push su GitHub sono ancora più veloci grazie alla cache delle dipendenze.

Posso usare Svelte per il backend su Vercel?

Sì. SvelteKit offre le API routes (file +server.js) che vengono convertite automaticamente in serverless o edge functions su Vercel. Puoi gestire autenticazione, database e logica backend senza server esterni.

Cosa succede se supero i limiti del piano gratuito?

Vercel non ti fa pagare a sorpresa: il progetto viene messo in pausa e ti viene chiesto di passare al piano Pro (20 dollari al mese). Per la maggior parte dei progetti freelance il piano Hobby è più che sufficiente.

Conclusione

Fare il deploy di un’app Svelte su Vercel è uno dei processi più fluidi che esistano nell’ecosistema web moderno. In meno di 10 minuti puoi passare da un progetto locale a un sito professionale online, con CDN globale, HTTPS e dominio custom, tutto gratis.

Se hai bisogno di supporto per portare online il tuo progetto Svelte o vuoi affidare lo sviluppo a chi lavora quotidianamente con questi strumenti, contattaci: in Alede Ro Design realizziamo applicazioni web performanti con SvelteKit e le mettiamo in produzione su infrastrutture cloud moderne come Vercel.

Leave a Comment