ServBay

Italiano

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe

Italiano

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe

Appearance

Creare ed Eseguire un Progetto Angular con ServBay ​

Panoramica ​

Questa guida spiega come creare, configurare ed eseguire un progetto Angular sfruttando l’ambiente di sviluppo web locale offerto da ServBay. Useremo il potente ambiente Node.js di ServBay e la sua flessibile gestione siti (in precedenza chiamata “host”) per impostare sia ambienti di sviluppo che di produzione, garantendo un accesso sicuro tramite domini personalizzati e certificati SSL. ServBay integra numerosi pacchetti software necessari allo sviluppo (detti “servizi”), inclusi Node.js, PHP, Python, Go, Java, database, ecc., risultando la scelta ideale per il full-stack development locale.

Cos’è Angular? ​

Angular è un framework frontend open source mantenuto da Google, ideale per costruire applicazioni single-page (SPA) dinamiche ad alte prestazioni. Basato su TypeScript, fornisce un arsenale completo di strumenti e un metodo di sviluppo strutturato, perfetto per progetti enterprise complessi e di grandi dimensioni.

Caratteristiche principali e vantaggi di Angular ​

  • Architettura a componenti: Permette di costruire interfacce modulari e riutilizzabili, migliorando manutenzione ed estendibilità del codice.
  • Supporto TypeScript: Offre tipizzazione statica e potenti funzionalità OOP, incrementando qualità e produttività.
  • Dependency Injection: Rende i componenti facilmente testabili e gestibili nelle dipendenze.
  • CLI avanzata: Semplifica la creazione di progetti, la generazione di componenti e servizi, la build e il testing tramite interfaccia a riga di comando.
  • Soluzioni integrate: Comprende moduli per routing, gestione form, client HTTP e altro.
  • Ottimizzazione prestazioni: Supporta AOT (compilazione Ahead-of-Time), tree-shaking e tecniche avanzate per migliorare efficienza e velocità.

Sviluppando con Angular su ServBay, godrai di un ambiente stabile che ti consente di concentrarti sul codice di business.

Prerequisiti ​

Prima di iniziare, assicurati di aver completato questi passaggi:

  1. Installazione di ServBay: Devi aver installato e avviato ServBay su macOS.
  2. Abilita Node.js: Dalla dashboard di ServBay, verifica di aver installato e abilitato il/i pacchetto/i Node.js necessari. ServBay permette di gestire facilmente più versioni Node.js.

Imposta e Avvia un Progetto Angular con ServBay ​

ServBay mette a disposizione l’ambiente Node.js ideale per creare e gestire un progetto Angular. In modalità sviluppo useremo la funzione siti di ServBay per configurare un proxy inverso verso il server di sviluppo Angular; in modalità produzione, costruiremo il progetto e serviremo i file statici tramite ServBay.

1. Creazione di un progetto Angular ​

Iniziamo creando un nuovo progetto tramite Angular CLI.

  1. Installa Angular CLI: Apri il terminale e installa globalmente Angular CLI usando l’ambiente Node.js offerto da ServBay. Se la variabile PATH di Node.js di ServBay non viene impostata automaticamente, potresti dover passare manualmente all’ambiente Node.js ServBay, anche se solitamente è gestito automaticamente.

    bash
    npm install -g @angular/cli

    Questo comando installa ng in modo che Angular CLI sia disponibile globalmente.

  2. Crea un nuovo progetto Angular: Spostati nella directory raccomandata da ServBay come radice per i siti – /Applications/ServBay/www – e usa ng new per creare un nuovo progetto. Consigliamo un nome che contenga il brand ServBay, ad esempio servbay-angular-app.

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

    Angular CLI ti chiederà alcune configurazioni iniziali. Segui le istruzioni indicando le tue preferenze:

    ? Would you like to add Angular routing? Yes  # Per abilitare il routing; consigliato "Yes"
? Which stylesheet format would you like to use? CSS # Scegli il tipo di stylesheet, ad es. CSS

    Al termine, troverai una nuova cartella chiamata servbay-angular-app in /Applications/ServBay/www, contenente la struttura di base del progetto.

  3. Installa le dipendenze del progetto: Entra nella directory appena creata e installa tutte le dipendenze locali richieste dal progetto.

    bash
    cd servbay-angular-app
npm install

    Il comando npm install legge le dipendenze dichiarate in package.json e le installa nella cartella node_modules.

2. Modifica del contenuto iniziale (opzionale) ​

Per verificare il corretto funzionamento del progetto, puoi modificare in modo semplice l’homepage.

  1. Modifica il file src/app/app.component.html: Apri servbay-angular-app/src/app/app.component.html con il tuo editor preferito. Cancella o modifica il contenuto lasciando solo un semplice titolo, per esempio "Hello ServBay!".

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

3. Esecuzione in modalità sviluppo ​

Durante lo sviluppo, si utilizza tipicamente il server di sviluppo fornito dalla CLI Angular (ng serve). Questo server supporta il live reload per uno sviluppo rapido. Useremo poi il proxy inverso di ServBay per accedere tramite dominio locale.

  1. Avvia il server di sviluppo Angular: Dalla root del progetto (/Applications/ServBay/www/servbay-angular-app), esegui il seguente comando, specificando una porta ad esempio 8585 (così da non entrare in conflitto coi server ServBay).

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

    Questo compilerà il progetto e avvierà un server web locale su http://localhost:8585/. Tieni aperta la finestra del terminale per mantenere in funzione il server.

  2. Configura il sito ServBay (proxy inverso): Dal pannello ServBay, accedi alla sezione “Siti” e crea una nuova configurazione. Il proxy inverso indirizzerà un dominio locale verso il server di sviluppo.

    • Nome: Es. My Angular Dev Site (solo per visualizzazione interna ServBay)
    • Dominio: È consigliato usare un dominio test ServBay, es: servbay-angular-dev.servbay.demo. ServBay risolve automaticamente .servbay.demo su 127.0.0.1.
    • Tipo di sito: Scegli Proxy Inverso (Reverse Proxy).
    • Indirizzo proxy: Inserisci 127.0.0.1.
    • Porta proxy: Inserisci il numero di porta usato con ng serve (es: 8585).

    Salva e applica le modifiche.

  3. Accedi al sito in modalità sviluppo: Apri il browser e naviga all’indirizzo configurato, es. https://servbay-angular-dev.servbay.demo.

    Tramite ServBay, il sito locale disporrà di certificato SSL attivo: ServBay genera ed installa automaticamente SSL per i domini locali (tramite la propria CA), così puoi testare l’app con HTTPS come in produzione, evitando potenziali problemi con i contenuti misti.

4. Build ed esecuzione in produzione ​

Concluso lo sviluppo, per il deploy occorre una versione ottimizzata per la produzione: Angular produce file statici da servire attraverso qualsiasi web server. Utilizzeremo la funzione sito statico di ServBay per questa fase.

  1. Costruisci la versione di produzione: Dalla root del progetto (/Applications/ServBay/www/servbay-angular-app), lancia il seguente comando:

    bash
    cd /Applications/ServBay/www/servbay-angular-app
ng build --prod
# O con versioni più recenti:
# ng build

    L’opzione --prod (comportamento predefinito nelle ultime CLI) abilita ottimizzazioni come AOT, minificazione e tree-shaking. I file prodotti sono disponibili nella cartella dist/servbay-angular-app (il nome può variare secondo la configurazione).

  2. Configura il sito ServBay (statico): Dal pannello ServBay, vai su “Siti” e crea una nuova configurazione, associando il dominio locale alla directory statica appena generata.

    • Nome: Es. My Angular Production Site
    • Dominio: Usane uno dedicato, es: servbay-angular-prod.servbay.demo.
    • Tipo di sito: Seleziona Statico (Static).
    • Directory radice: Indica la cartella di output della build, solitamente /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app. Accertati che la directory contenga index.html.

    Salva e applica le modifiche.

  3. Accedi al sito in produzione: Dal browser, visita il dominio configurato: https://servbay-angular-prod.servbay.demo.

    Ora stai visualizzando la versione ottimizzata del tuo progetto, servita tramite il web server di ServBay (Caddy o Nginx, in base alla configurazione). Anche qui, ServBay applica automaticamente il certificato SSL per una navigazione sicura.

I Vantaggi di ServBay nello Sviluppo Angular ​

  • Ambiente integrato: Gestione semplice delle versioni Node.js senza modifiche manuali di variabili di ambiente.
  • Gestione siti flessibile: Interfaccia intuitiva per configurare proxy inverso e hosting statico, facilitando il passaggio da sviluppo a produzione.
  • SSL integrato: Certificati SSL gratuiti e autoconfigurati, simulazione fedele dell’ambiente HTTPS di produzione e niente warning per contenuti misti.
  • Supporto a stack multipli: Se il tuo progetto include API backend (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot) o database (MySQL, PostgreSQL, MongoDB, Redis), ServBay integra facilmente tutti questi servizi, fornendo un ambiente di sviluppo full-stack. Anche i moduli prima non perfettamente supportati ora funzionano al 100%.
  • Backup e ripristino dati: Funzionalità comode per salvare e ripristinare configurazioni, siti, database e certificati SSL, garantendo sicurezza ai dati di sviluppo.
  • Reset password database: Strumenti incorporati per resettare la password di root di MySQL, MariaDB e PostgreSQL, risolvendo una problematica molto comune tra sviluppatori.

FAQ (Domande Frequenti) ​

  • D: Quando eseguo ng new o ng serve ricevo command not found: ng. Cosa faccio? R: Angular CLI potrebbe non essere installato correttamente o non essere presente nel PATH. Assicurati di aver installato globalmente @angular/cli (npm install -g @angular/cli) e che l’ambiente Node.js di ServBay sia attivo in PATH. Prova a riavviare il terminale o ServBay.
  • D: Il comando ng serve fallisce perché la porta è già in uso. Come risolvo? R: La porta selezionata (es. 8585) è probabilmente occupata da un altro processo. Specifica un’altra porta libera con ng serve --port 8586 e aggiorna la configurazione proxy del sito ServBay con il nuovo numero di porta.
  • D: Ho configurato il sito in ServBay ma il dominio non carica nulla. Suggerimenti? R: Verifica:
    • Che ServBay sia in esecuzione.
    • Per la modalità sviluppo, che ng serve sia attivo e ascolti sulla porta corretta.
    • Per la modalità produzione: che la directory radice del sito punti effettivamente alla cartella di build (quella con index.html).
    • I log di ServBay: potrebbero fornire dettagli utili per la risoluzione.
    • Il dominio inserito sia identico a quello impostato nella configurazione sito ServBay.
  • D: Posso usare diversi web server (Caddy/Nginx/Apache) di ServBay per ospitare la versione production di Angular? R: Certamente. ServBay supporta Caddy, Nginx e Apache come server per siti statici. Una volta configurato il sito statico, ServBay utilizzerà il server web attualmente abilitato per ospitare i tuoi file: tutti questi server sono capaci di gestire siti statici in modo efficiente.

Conclusione ​

Seguendo questa guida, hai imparato come creare ed eseguire un progetto Angular nell’ambiente ServBay. Hai visto come usufruire del proxy inverso per accedere localmente tramite dominio personalizzato al tuo server di sviluppo e, una volta pronta la build, come utilizzare la funzione sito statico di ServBay per mettere online la versione finale. L’ambiente Node.js integrato, la gestione semplificata dei siti e il supporto SSL incorporato ti consentiranno di lavorare in modo più rapido e sicuro. Grazie anche al supporto full-stack, ServBay è una base solida per lo sviluppo locale di applicazioni moderne e complete.