Come installare Svelte (plain SPA) su Saplo

Svelte compila i componenti in JavaScript puro già al momento della build, senza un DOM virtuale caricato nel browser, quindi il bundle risultante è uno dei più piccoli tra i framework più popolari. Nella variante SPA semplice (senza SSR, senza il framework SvelteKit), Svelte viene costruito da Vite in una manciata di file statici HTML, CSS e JS - esattamente come React o Vue. Su Saplo, Svelte (plain SPA) si installa esattamente come qualsiasi altra applicazione del catalogo: il motore crea lo scaffold del progetto, lo costruisce tramite Vite ed espone la directory dist pronta per nginx, senza alcun processo Node mantenuto in background dopo la build.

Per chi è Svelte (SPA semplice) su Saplo

Prima di iniziare l'installazione, verifica se è la scelta giusta per il tuo progetto:

• stai costruendo un pannello o una dashboard per i clienti - Saplo serve una build pronta come file statici, senza il proprio processo Node in background,
• il frontend deve connettersi alla propria API - installi la SPA accanto al backend (Django, Node, Docker) sullo stesso Box o separatamente,
• hai a cuore un bundle il più piccolo possibile - il compilatore Svelte rimuove il framework dal codice risultante, quindi la pagina si avvia più velocemente rispetto alle librerie basate su DOM virtuale,
• il progetto non necessita di rendering lato server - se hai bisogno di SSR e una migliore SEO, nella stessa directory troverai SvelteKit,
• vuoi implementazioni con git push invece di caricare manualmente i file via FTP - colleghi il repository una volta, ogni push sul branch di produzione costruisce e implementa automaticamente una nuova versione.

Se il progetto necessita di rendering lato server, routing basato su file o una migliore SEO subito pronta all'uso, controlla lo stack SvelteKit nel catalogo delle applicazioni invece di Svelte puro.

Requisiti

Per creare un'applicazione Svelte (SPA semplice) su Saplo, hai bisogno di:

• Un Box di qualsiasi piano, anche S è sufficiente: un'applicazione SPA è composta da una manciata di file statici, senza processi mantenuti in memoria dopo la compilazione.
• Minimo 256 MB di RAM libera per il processo di compilazione e 2 GB di spazio su disco.
• Un dominio o sottodominio *.saploapp.pl incluso nel prezzo di ogni piano.
• Un repository Git, se desideri implementazioni automatiche (opzionale all'inizio, puoi anche caricare l'applicazione come archivio .zip tramite il Pannello).

Installazione passo dopo passo

1. Nel Pannello Saplo, vai su Catalogo delle applicazioni e seleziona Svelte (categoria "Applicazioni", descrizione "Frontend SPA leggero").
2. Indica il Box e il nome dell'applicazione - da esso verrà creato il sottodominio predefinito <name>.saploapp.pl.
3. Scegli la versione di Node.js per il build (18, 20 o 22, predefinito 20) e conferma l'installazione.
4. Il motore crea lo scheletro Svelte tramite Vite (equivalente a npm create vite -- --template svelte), installa le dipendenze e costruisce il progetto, e il contenuto della directory dist viene inserito direttamente nella directory dell'applicazione, servita da nginx.
5. Al termine dell'installazione, il dominio del passo 2 mostra lo scheletro iniziale di Vite + Svelte - da questo momento in poi puoi distribuire il tuo codice su di esso.

Deploy del tuo codice tramite Git

1. Nei dettagli dell'applicazione, trova la sezione Git / CI-CD e clicca su "Connetti GitHub", conferma l'installazione dell'applicazione "Saplo Deploy" e indica il repository con il tuo progetto Svelte.
2. Nella directory principale del repository, deve essere presente il file saplo.yaml.
3. Effettua il commit e il push del file saplo.yaml sul ramo di produzione (di default main).
4. Ogni successivo git push su questo ramo costruirà il progetto e sostituirà il contenuto della directory dist sul Box, puoi vedere lo Stato nella scheda Deploymenti.
5. Se la build fallisce, la versione precedente funzionante rimarrà al suo posto - Saplo non la sostituirà con una versione difettosa.

Esempio di file minimo saplo.yaml per Svelte:

name: my-project
stack: svelte
build:
  install: npm ci
  command: npm run build
  output: dist

Svelte (SPA semplice) su Saplo vs. alternative

Domande frequenti

Qual è la differenza tra Svelte (SPA semplice) e SvelteKit nel catalogo Saplo? La SPA semplice sono file statici senza SSR e senza un processo Node in background, costruiti solo con Vite. SvelteKit è un framework completo con SSR opzionale, eseguito su Saplo come un processo a lunga esecuzione con riavvio automatico.

Posso avere più applicazioni Svelte su un Box? Sì, il Catalogo delle applicazioni ti permette di installare molti moduli affiancati, ognuno con il proprio sottodominio o dominio.

Ho bisogno di SSR e di un SEO migliore - cosa dovrei scegliere? Lo stack SvelteKit dallo stesso catalogo - è Svelte con il rendering completo lato server.

Riceverò SSL e un dominio personalizzato? Sì, il certificato SSL è automatico e hai un dominio o sottodominio *.saploapp.pl incluso nel prezzo di ogni piano.

Come posso cambiare la directory di output della build se non uso quella predefinita dist? Imposta il campo build.output in saplo.yaml al percorso corretto.

Con Svelte (SPA semplice) su Saplo, puoi passare da zero a un dominio funzionante in pochi minuti, e il bundle risultante è uno dei più leggeri tra gli stack disponibili. Se il progetto cresce fino a richiedere SSR, la Migrazione a SvelteKit nello stesso catalogo non richiede un cambio di hosting.