Creare e Eseguire un Progetto Angular su ServBay

Panoramica

Questo documento guida passo per passo su come creare, configurare ed eseguire un progetto Angular nell’ambiente di sviluppo web locale fornito da ServBay. Sfrutteremo il potente ambiente Node.js di ServBay, insieme alla versatile gestione dei siti (precedentemente chiamati “host”), per configurare in modo semplice sia ambienti di sviluppo che di produzione, assicurando accessi sicuri tramite domini personalizzati e certificati SSL. ServBay integra una vasta gamma di pacchetti software necessari allo sviluppo (detti “servizi”): Node.js, PHP, Python, Go, Java, database e altro, rendendolo la scelta ideale per uno sviluppo full-stack in locale.

Cos’è Angular?

Angular è un framework frontend open source, mantenuto da Google, pensato per la creazione di applicazioni dinamiche e ad alte prestazioni basate su una sola pagina (SPA). Basato su TypeScript, offre un set di strumenti completo e un approccio strutturato allo sviluppo, ideale per realizzare applicazioni enterprise di grandi dimensioni e complessità.

Caratteristiche principali e vantaggi di Angular

• Architettura basata su componenti: Consente di realizzare interfacce utente tramite componenti riutilizzabili, facilitando la manutenzione e la scalabilità del codice.
• Supporto TypeScript: Offre tipizzazione statica e avanzate funzionalità orientate agli oggetti, aumentando qualità e produttività dello sviluppo.
• Dependency Injection: Rende i componenti più testabili e gestibili nelle loro dipendenze.
• CLI potente (Command Line Interface): Semplifica la creazione del progetto, la generazione di componenti, servizi, moduli, costruzione e test.
• Moduli integrati: Include soluzioni rapide per routing, gestione form, client HTTP e altre funzionalità comuni.
• Ottimizzazione delle performance: Supporta tecnologie come AOT (Ahead-of-Time Compilation) e Tree-shaking, migliorando la velocità e l’efficienza delle applicazioni.

Con Angular abbinato all’ambiente stabile offerto da ServBay, gli sviluppatori possono concentrarsi pienamente sulla logica di business.

Prerequisiti

Prima di iniziare, verifica di aver completato questi passaggi:

1. Installazione di ServBay: ServBay deve essere installato e già avviato (compatibile con macOS e Windows).
2. Abilitazione del pacchetto Node.js: Assicurati che la versione necessaria di Node.js sia installata e abilitata nel pannello di controllo di ServBay. ServBay consente di installare e gestire facilmente più versioni di Node.js.

Configurazione e Avvio di un Progetto Angular con ServBay

Useremo l'ambiente Node.js integrato di ServBay per creare ed eseguire un progetto Angular. In modalità sviluppo, configureremo un reverse proxy sul sito ServBay per instradare le richieste verso il server di sviluppo Angular; in produzione, costruiremo il progetto e servirlo tramite file statici configurati su ServBay.

1. Creazione di un progetto Angular

Inizia utilizzando Angular CLI per generare un nuovo progetto.

1. Installazione di Angular CLI: Apri il terminale e installa globalmente Angular CLI usando l’ambiente Node.js fornito da ServBay. Se non è stato aggiunto automaticamente al PATH di sistema, potresti dover prima passare all’ambiente Node.js di ServBay. Di norma, ServBay gestisce automaticamente il PATH.

   npm install -g @angular/cli

   Questo installerà il comando ng globalmente, permettendo di usare Angular CLI in qualsiasi directory.

2. Creazione di un nuovo progetto Angular: Spostati nella directory consigliata come root dei siti ServBay e crea un nuovo progetto Angular tramite ng new. Si consiglia di includere il brand ServBay nel nome del progetto, ad esempio servbay-angular-app.

   macOS:

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   Windows:

   cd C:\ServBay\www
   ng new servbay-angular-app

   Angular CLI ti farà alcune domande di configurazione: rispondi secondo le tue preferenze.

   ? Would you like to add Angular routing? Yes  # Aggiungere routing al progetto, consigliato Yes
   ? Which stylesheet format would you like to use? CSS # Scegli il formato dei fogli di stile, ad esempio CSS

   Al termine dell’esecuzione, Angular CLI creerà una nuova cartella con struttura e file di base del progetto:

   • macOS: /Applications/ServBay/www/servbay-angular-app
   • Windows: C:\ServBay\www\servbay-angular-app

3. Installazione delle dipendenze del progetto: Entra nella nuova cartella e installa le dipendenze locali necessarie.

   cd servbay-angular-app
   npm install

   Il comando npm install legge le dipendenze indicate nel file package.json e le installa nella cartella node_modules.

2. Modificare il contenuto della homepage Angular (facoltativo)

Per verificare che tutto funzioni, puoi modificare la homepage del progetto per una visualizzazione rapida.

1. Modifica del file src/app/app.component.html: Apri servbay-angular-app/src/app/app.component.html con il tuo editor preferito. Rimuovi o modifica i contenuti, lasciando solo un titolo, ad esempio "Hello ServBay!".

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>Questa è la tua app Angular in esecuzione su ServBay!</p>
   </div>

3. Eseguire il progetto in modalità sviluppo

Durante lo sviluppo, conviene usare il server integrato (ng serve) di Angular CLI, che offre hot reload e altri vantaggi. Per accedere via dominio locale, sfruttiamo il reverse proxy di ServBay.

1. Avvio del server di sviluppo Angular: Dal root del progetto, lancia il server Angular su una porta dedicata (ad esempio 8585, per evitare conflitti con il web server di ServBay).

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng serve --port 8585

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng serve --port 8585

   Questo comando compila il progetto e avvia un web server su http://localhost:8585/. Lascia aperto il terminale per mantenere attivo il server.

2. Configurazione sito ServBay (reverse proxy): Accedi al pannello di ServBay e crea una nuova configurazione sito. Imposta il reverse proxy per instradare il dominio locale verso il ng serve Angular.

   • Nome: ad esempio My Angular Dev Site (solo interno ServBay)
   • Dominio: consigliato un nome test brandizzato, tipo servbay-angular-dev.servbay.demo. ServBay associa .servbay.demo a 127.0.0.1.
   • Tipo di sito: seleziona Reverse Proxy.
   • Indirizzo proxy: inserisci 127.0.0.1.
   • Porta proxy: imposta la porta scelta prima (8585).

   Salva e applica le modifiche.

3. Accedere al sito di sviluppo: Apri il tuo browser e visita https://servbay-angular-dev.servbay.demo.

   Grazie all'integrazione con SSL di ServBay (via User CA o Public CA), il sito locale è subito accessibile via HTTPS — molto utile per simulare il comportamento in produzione e intercettare eventuali problemi legati al protocollo sicuro.

4. Build e avvio della versione di produzione

A sviluppo completato, genera una versione ottimizzata per la produzione: si tratta di file statici che puoi servire tramite ogni web server statico. Con ServBay, usiamo il sito statico.

1. Build della versione di produzione: Dal root del progetto, lancia la build per la produzione:

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # Oppure con Angular CLI più recente:
   # ng build

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng build --prod
   # Oppure con CLI versione nuova:
   # ng build

   L'opzione --prod (impostazione di default nelle CLI moderne) attiva ottimizzazioni come AOT, minificazione e Tree-shaking. Al termine, i file statici sono generati nella cartella dist/servbay-angular-app (la sottocartella dipende dal nome progetto).

2. Configurazione sito ServBay (file statici): Torna nel pannello di ServBay e crea una nuova configurazione sito. Assegna il dominio locale al percorso del build di produzione.

   • Nome: ad esempio My Angular Production Site

   • Dominio: suggerito un nuovo nome, tipo servbay-angular-prod.servbay.demo.

   • Tipo sito: seleziona Static.

   • Root directory sito: seleziona la cartella appena buildata, ad esempio:

     • macOS: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app
     • Windows: C:\ServBay\www\servbay-angular-app\dist\servbay-angular-app

     Assicurati che punti alla cartella contenente il file index.html.

   Salva e applica le modifiche.

3. Accedere alla versione di produzione: Dal browser, naviga su https://servbay-angular-prod.servbay.demo.

   Adesso hai la versione ottimizzata di Angular pubblicata tramite il web server di ServBay (Caddy o Nginx, in base alla tua configurazione). Il certificato SSL è sempre gestito automaticamente per un accesso sicuro.

Vantaggi di ServBay nello sviluppo Angular

• Ambiente integrato: Installa e gestisci versioni di Node.js in pochi click, senza complicazioni di variabili d’ambiente.
• Gestione siti flessibile: Switch istantaneo tra reverse proxy e servizio file statici tramite interfaccia intuitiva, passando facilmente da dev a prod.
• Supporto SSL integrato: Certificato SSL gratuito e auto-configurato per l’ambiente locale, simulando HTTPS produttivo e prevenendo warning sui contenuti misti.
• Stack tecnologico completo: ServBay si integra facilmente con backend API (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot) e database (MySQL, PostgreSQL, MongoDB, Redis), offrendo un ambiente locale full-stack davvero completo e aggiornato.
• Backup e ripristino dati: Funzioni pratiche per backup/recovery di configurazioni, siti, database e certificati SSL, proteggendo i tuoi dati di sviluppo.
• Reset password database: Possibilità di reimpostare facilmente la password root di MySQL, MariaDB e PostgreSQL, risolvendo uno dei problemi più frequenti tra sviluppatori.

FAQ – Domande Frequenti

• Q: Il comando ng new o ng serve non viene trovato, cosa posso fare? A: Probabilmente Angular CLI non è installato o non è nel PATH di sistema. Assicurati di aver eseguito npm install -g @angular/cli e che l’ambiente Node.js di ServBay sia correttamente impostato nel PATH. Prova a riavviare il terminale o ServBay.
• Q: ng serve non parte e mi segnala che la porta è occupata. Soluzioni? A: La porta selezionata (ad esempio 8585) è già usata da un altro processo. Specifica una porta libera, come ng serve --port 8586, e aggiorna la configurazione reverse proxy di ServBay con la nuova porta.
• Q: Il sito configurato su ServBay non carica nulla quando imposto il dominio. A: Verifica queste possibili cause:
  • Controlla che ServBay sia in esecuzione.
  • In modalità sviluppo, verifica che ng serve sia attivo e sulla stessa porta configurata nel reverse proxy.
  • In produzione, verifica che il root directory della configurazione ServBay punti davvero alla cartella della build (con index.html).
  • Consulta i log di ServBay per dettagli sugli errori.
  • Assicurati che il dominio usato nel browser coincida esattamente col dominio configurato.
• Q: Posso usare i diversi web server di ServBay (Caddy/Nginx/Apache) per servire la versione prod di Angular? A: Sì. Puoi usare Caddy, Nginx (o Apache) come server di file statici. ServBay, a seconda delle impostazioni, seleziona automaticamente il server attivo per la gestione del sito, garantendo performance e affidabilità.

Conclusione

Seguendo questa guida, hai appreso come creare e avviare un progetto Angular con ServBay, utilizzare il reverse proxy in sviluppo, fare la build per la produzione e pubblicare la versione finale con servizio statico e SSL integrato. L’ambiente Node.js gestito da ServBay, la comoda interfaccia di gestione siti e il supporto SSL automatico migliorano notevolmente efficienza e praticità dello sviluppo locale Angular. Inoltre, lo stack full integrato di ServBay è una solida base per lo sviluppo di applicazioni web moderne.