Come ospitare Vue su Saplo (app frontend leggera)

Vue 3 è, accanto a React, la seconda libreria più popolare per costruire interfacce e, proprio come React, non è di per sé un servizio di hosting. Il progetto compilato (più spesso tramite Vite) è composto da file statici HTML, CSS e JS, che richiedono un server con un fallback corretto delle rotte per Vue Router in modalità history. Senza di esso, ricaricando una sottopagina si ottiene un errore 404. Su Saplo pubblichi Vue esattamente come qualsiasi altra applicazione dal catalogo: il motore compila il progetto, espone la directory pronta dist sotto nginx e configura automaticamente il fallback delle rotte.

Per chi è adatto Vue su Saplo

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

• stai sviluppando un pannello di amministrazione - Saplo serve la build pronta come file statici, senza un processo Node in background,
• il frontend deve collegarsi alla tua API - ospiti la SPA accanto al backend (Django, Node, Docker) sullo stesso Box o separatamente,
• un'applicazione a pagina singola con Vue Router in modalità history - il fallback di tutte le route su index.html è configurato automaticamente, non devi aggiungere nulla in nginx,
• vuoi effettuare i deploy con git push invece di caricare manualmente i file via FTP - colleghi il repository una volta sola e ogni push sul branch di produzione costruisce e distribuisce automaticamente la nuova versione.

Se il progetto richiede il rendering lato server e un SEO migliore, dai un'occhiata allo stack Nuxt nel catalogo delle applicazioni invece di usare Vue puro.

Requisiti

Per ospitare Vue su Saplo, ti servono:

• un Box con qualsiasi piano, basta anche S - uno SPA compilato è un insieme di file statici, senza processi residenti in memoria dopo la build,
• almeno 256 MB di RAM liberi per il solo processo di build e 2 GB di spazio su disco,
• un dominio o un sottodominio *.saploapp.pl incluso nel prezzo di ogni piano,
• un repository Git, se vuoi deploy automatici (facoltativi per iniziare, puoi anche caricare l'applicazione come archivio .zip dal pannello).

Installazione passo dopo passo

1. Nel pannello Saplo, accedi al Catalogo delle applicazioni e seleziona Vue.js (categoria "Applicazioni").
2. Indica Box e il nome dell'applicazione - dal nome deriva il sottodominio predefinito <name>.saploapp.pl.
3. Seleziona la versione di Node.js per la build (18, 20 o 22, predefinita 20) e conferma l'installazione.
4. Il motore genera lo scaffold di Vue tramite Vite (equivalente npm create vite -- --template vue), installa le dipendenze e compila il progetto, mentre il contenuto della directory dist viene trasferito direttamente nella directory dell'applicazione, servita da nginx.
5. Al termine dell'installazione, il sottodominio del passaggio 2 mostra lo scaffold iniziale Vite + Vue - da quel momento puoi fare il deploy del tuo codice su di esso.

Implementazione del proprio codice tramite Git

1. Nella sezione dei dettagli dell'applicazione trova la sezione Git / CI-CD e fai clic su "Connetti GitHub", conferma l'installazione dell'applicazione "Saplo Deploy" e seleziona il repository con il progetto Vue.
2. Nella directory principale del repository deve esserci il file saplo.yaml.
3. Esegui il commit e il push del file saplo.yaml sul branch di produzione (per impostazione predefinita main).
4. Ogni successivo git push inviato a questo branch compila il progetto e sostituisce il contenuto della directory dist sul Box, mentre lo stato è visibile nella scheda Distribuzioni.
5. Se la build non riesce, la precedente versione funzionante resta al suo posto, perché Saplo non la sostituisce con una versione rotta.

Esempio di file saplo.yaml minimo per Vue:

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

Vue su Saplo a confronto con le alternative

Domande frequenti

Vue Router in modalità history funziona senza configurazioni aggiuntive? Sì, il fallback per tutti i percorsi verso index.html è attivo subito dopo l'installazione, quindi l'aggiornamento di qualsiasi sottopagina non si conclude con un errore 404.

Posso avere più applicazioni Vue su un unico Box? Sì, la directory delle applicazioni ti permette di installare più moduli uno accanto all'altro, ciascuno con il proprio sottodominio o dominio.

Ho bisogno di SSR e di una SEO migliore - cosa scelgo? Scegli lo stack Nuxt nella stessa directory: è Vue con il rendering completo sul lato server.

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

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

Con Vue su Saplo puoi passare da zero a un dominio funzionante in pochi minuti, mentre Vue Router funziona senza configurazione manuale. Se il progetto cresce fino a richiedere SSR, la migrazione a Nuxt nella stessa directory non richiede di cambiare hosting.