Come installare React su Saplo (SPA e dashboard senza backend)

React è oggi la scelta standard per la creazione di interfacce, ma React stesso non è un hosting: è una libreria UI. Un progetto costruito (solitamente con Vite) è un pugno di file statici HTML, CSS e JS che devono essere esposti da qualche parte con il corretto routing SPA (fallback di tutti i percorsi su index.html) e senza processi inutili in background. Un normale hosting condiviso ti costringe a caricare i file manualmente tramite FTP e non gestisce il fallback dei percorsi, mentre le piattaforme a pagamento ti fatturano per ogni richiesta e per la build. Su Saplo, installi React come qualsiasi altra applicazione dal catalogo: il motore costruisce il progetto, espone la directory pronta dist sotto nginx e gestisce il reindirizzamento dei percorsi in autonomia.

Per chi è React su Saplo

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

• stai costruendo un pannello di amministrazione o una dashboard per i clienti - Saplo serve una build già pronta come file statici, senza il proprio server Node mantenuto in memoria,
• il frontend deve connettersi alla propria API - installi SPA accanto al backend (Django, Node, Docker) sullo stesso Box o separatamente, inserisci l'indirizzo API come variabile d'ambiente della build,
• il progetto non necessita di rendering lato server - se ti interessa la SEO e l'SSR, controlla lo stack Next.js nel catalogo delle applicazioni invece di React puro,
• vuoi implementazioni con git push invece del caricamento manuale dei file via FTP - colleghi il repository una volta, ogni push sul ramo di produzione costruisce e implementa automaticamente una nuova versione.

Requisiti

Per creare React su Saplo, hai bisogno di:

• Un Box di qualsiasi piano, anche S è sufficiente: un SPA costruito è una manciata di file statici, dopo la compilazione non rimane alcun processo Node mantenuto in memoria, quindi il consumo di RAM dopo l'installazione scende praticamente a zero.
• Minimo 256 MB di RAM libera per il solo processo di build (Vite compila il progetto una volta, all'installazione e ad ogni successivo git push) e 2 GB di spazio su disco.
• Un dominio o sottodominio *.saploapp.pl incluso nel prezzo di ogni piano, su cui verrà ospitata l'applicazione.
• Un repository Git, se desideri utilizzare la distribuzione automatica (opzionale per iniziare, puoi anche caricare l'applicazione tramite un archivio .zip attraverso il Pannello).

Installazione passo dopo passo

1. Nel Pannello Saplo, vai su Catalogo delle applicazioni e seleziona React (categoria "Applicazioni").
2. Indica il Box e il nome dell'applicazione - da questo viene 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 di scaffolding crea lo scheletro di React tramite Vite (equivalente a npm create vite -- --template react), installa le dipendenze e builda il progetto, e il contenuto della directory dist finisce direttamente nella directory dell'applicazione, servita da nginx.
5. Al termine dell'installazione, il dominio del passo 2 mostra lo scheletro iniziale di Vite + React - da questo momento in poi puoi distribuire il tuo codice su di esso.

Distribuisci il tuo codice tramite Git

1. Nei dettagli dell'applicazione, trova la sezione Git / CI-CD e clicca su "Collega GitHub", conferma l'installazione dell'applicazione "Saplo Deploy" sul tuo account o organizzazione e indica il repository con il progetto React.
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 builda il progetto e sostituisce il contenuto della directory dist sul Box, lo stato è visibile nella scheda Deploymenti.
5. Il routing SPA (tutti i percorsi confluiscono in index.html) è configurato automaticamente - non devi aggiungere nulla in nginx.

Esempio di un file saplo.yaml minimo per React:

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

React su Saplo vs. alternative

Domande frequenti

Posso avere più applicazioni React su un unico Box? Sì, il catalogo delle applicazioni ti permette di installare più moduli fianco a fianco, ognuno con il proprio sottodominio o Dominio, purché ci sia abbastanza RAM e spazio su disco allocato al piano.

E il routing lato client (React Router)? Funziona senza configurazione aggiuntiva - il fallback di tutti i percorsi su index.html è impostato immediatamente all'installazione.

Devo usare Vite? L'installazione dal catalogo crea il progetto tramite Vite, ma puoi distribuire il tuo progetto (anche basato su un altro bundler) tramite git, purché la build produca i file pronti nella directory specificata in build.output.

Otterrò SSL e un Dominio personalizzato? Sì, il certificato SSL è automatico e il Dominio o sottodominio *.saploapp.pl è incluso nel Prezzo di ogni piano.

Come posso cambiare la versione di Node.js usata per la build? Quando crei un'applicazione dal catalogo, scegli 18, 20 o 22. Per le distribuzioni tramite git, la imposti con il campo runtime.node in saplo.yaml.

Su Saplo, puoi configurare React da zero a un Dominio funzionante in pochi minuti, e ogni git push successivo distribuisce una nuova versione senza dover caricare manualmente i file. Se il tuo progetto richiede SSR e una migliore SEO, consulta lo stack Next.js nello stesso catalogo.