Come installare Angular su Saplo (SPA enterprise)

Angular è il più completo dei framework frontend popolari: impone la propria struttura di progetto, la digitazione tramite TypeScript e i moduli, il che funziona bene per le grandi applicazioni aziendali gestite da un intero team. Proprio come React o Vue, Angular in sé non è un hosting: un progetto costruito consiste in file statici HTML, CSS e JS che richiedono un server con un fallback di routing corretto per Angular Router in modalità history. Su Saplo, installi Angular esattamente come qualsiasi altra applicazione dal Catalogo delle applicazioni: il motore imposta il progetto, lo costruisce tramite Angular CLI, rileva la directory effettiva con il risultato index.html e lo espone sotto nginx insieme al fallback di routing.

Per chi è Angular su Saplo

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

• stai costruendo un grande sistema interno o un pannello per più ruoli - la struttura dei moduli e la tipizzazione rigorosa di Angular facilitano la manutenzione del codice quando più persone lavorano al progetto,
• il team conosce già Angular - Saplo non impone alcun livello aggiuntivo, ottieni un progetto standard generato da Angular CLI,
• il frontend deve connettersi alla propria API - installi SPA accanto al backend (Django, Node, Docker) sullo stesso Box o separatamente,
• applicazione a pagina singola con Angular Router in modalità history - il fallback di tutti i percorsi su index.html è configurato automaticamente, non devi aggiungere nulla in nginx,
• desideri implementazioni con git push invece del caricamento manuale dei file tramite FTP - colleghi il repository una volta, ogni push sul ramo di produzione costruisce e implementa automaticamente una nuova versione.

Se il progetto è più piccolo e non hai bisogno della struttura completa dei moduli di Angular, controlla nel catalogo delle applicazioni stack più leggeri come React o Vue.

Requisiti

Per creare un'applicazione Angular su Saplo, hai bisogno di:

• Un Box almeno nel piano S - una SPA costruita è un mucchio di file statici, ma il processo di build di Angular CLI è più pesante che in React o Vue, quindi il manifest della ricetta richiede almeno 512 MB di RAM libera per la build e 3 GB di spazio su disco.
• Un dominio o sottodominio *.saploapp.pl incluso nel prezzo di ogni piano.
• Un repository Git, se desideri distribuzioni 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 Angular (categoria "Applicazioni").
2. Indica il Box e il nome dell'applicazione - da esso viene creata la 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 di Angular tramite Angular CLI (equivalente a ng new --defaults --ssr=false), installa le dipendenze e compila il progetto per la produzione (ng build --configuration=production).
5. Dopo il build, il motore rileva automaticamente se il file risultante index.html si trova in dist/<project>/ (Angular precedente alla versione 17) o in dist/<project>/browser/ (Angular 17 e versioni successive, dove la directory dist è preparata per SSR), e copia il livello di directory appropriato nell'applicazione servita da nginx.
6. Al termine dell'installazione, il Dominio del passo 2 mostra lo scheletro iniziale di Angular - da questo momento 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 "Collega GitHub", conferma l'installazione dell'applicazione "Saplo Deploy" e indica il repository con il progetto Angular.
2. Nella directory principale del repository deve trovarsi il file saplo.yaml.
3. Effettua il commit e il push del file saplo.yaml sul ramo di produzione (per impostazione predefinita main).
4. Ogni successivo git push su questo ramo costruisce il progetto e sostituisce i file risultanti sul Box; puoi vedere lo stato nella scheda Deploy.
5. Se la build fallisce, la versione precedente funzionante rimane al suo posto - Saplo non la sostituisce con una danneggiata.

Esempio di un file saplo.yaml minimo per Angular:

name: my-project
stack: angular
build:
  install: npm ci
  command: npm run build
  output: dist/my-project/browser

Se non imposti il campo build.output, il motore rileverà comunque la directory corretta con index.html da solo, ma l'impostazione esplicita accelera la build ed elimina errori in progetti con un nome non standard.

Angular su Saplo vs alternative

Domande frequenti

Il Router Angular in modalità cronologia funziona senza configurazione aggiuntiva? Sì, il fallback di tutti i percorsi su index.html è attivo subito dopo l'installazione, quindi l'aggiornamento di qualsiasi sottopagina non si traduce in un errore 404.

Angular 17 ha cambiato la struttura della directory dist - è un problema su Saplo? No, dopo la build, il motore controlla automaticamente se index.html si trova in dist/<project>/ o in dist/<project>/browser/, e copia il livello di directory corretto senza il tuo intervento.

Posso avere più applicazioni Angular su un unico Box? Sì, il Catalogo delle applicazioni ti consente di ospitare più moduli uno accanto all'altro, ognuno con il proprio sottodominio o dominio.

Riceverò un certificato 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 directory di output della build se il mio progetto ha un nome non standard? Imposta il campo build.output in saplo.yaml sul percorso corretto, ad esempio dist/project-name/browser.

Con Saplo, puoi configurare Angular da zero a un dominio funzionante in pochi minuti, e il motore rileva automaticamente i cambiamenti nella struttura della directory dist tra le versioni di Angular. Se il progetto è più piccolo di una tipica applicazione aziendale, consulta gli stack più leggeri React o Vue nello stesso catalogo.