Een Angular-project aanmaken en uitvoeren in ServBay

Overzicht

Dit document begeleidt je stap voor stap bij het aanmaken, configureren en uitvoeren van een Angular-project binnen de lokale webontwikkelomgeving van ServBay. Door gebruik te maken van ServBay’s krachtige Node.js-omgeving en flexibele websitebeheer (voorheen “hosts”), kun je eenvoudig zowel ontwikkel- als productieomgevingen opzetten en er veilig toegang toe krijgen via aangepaste domeinen en SSL-certificaten. ServBay integreert diverse softwarepakketten voor ontwikkeling (voorheen “services”), waaronder Node.js, PHP, Python, Go, Java en databases, waarmee het de ideale oplossing is voor volledige lokale full stack ontwikkeling.

Wat is Angular?

Angular is een open-source front-end framework, onderhouden door Google, ontworpen voor het bouwen van krachtige dynamische single-page applicaties (SPA’s). Het is gebouwd op TypeScript en biedt een uitgebreide toolset en gestructureerde ontwikkelmethode, zeer geschikt voor grote en complexe enterprise-applicaties.

Belangrijkste kenmerken en voordelen van Angular

• Componentgebaseerde architectuur: UI opbouwen door middel van herbruikbare componenten, wat code onderhoudbaar en schaalbaar maakt.
• TypeScript-ondersteuning: Statische typechecking en krachtige objectgeoriënteerde mogelijkheden verhogen de codekwaliteit en productiviteit.
• Dependency Injection: Maakt componenten makkelijker te testen en afhankelijkheden beter te beheren.
• Krachtige CLI (Command Line Interface): Vereenvoudigt het aanmaken van projecten, genereren van componenten, services, modules én het bouwen en testen.
• Ingebouwde oplossingen: Routingsysteem, formulierafhandeling, HTTP-client en andere modules standaard inbegrepen.
• Prestatieoptimalisatie: Ondersteunt AOT (Ahead-of-Time) compilatie, Tree-shaking en andere technieken voor optimale performance.

Met Angular en de stabiele basis van ServBay kan je je als ontwikkelaar volledig richten op de businesslogica.

Vereisten

Voordat je aan de slag gaat, zorg dat je aan het volgende voldoet:

1. ServBay is geïnstalleerd: Je hebt ServBay succesvol geïnstalleerd en gestart op macOS.
2. Node.js-pakket is ingeschakeld: Controleer in het ServBay-configuratiescherm of het gewenste Node.js-pakket is geïnstalleerd en ingeschakeld. ServBay ondersteunt meerdere Node.js-versies en eenvoudig wisselen.

Een Angular-project opzetten en uitvoeren met ServBay

We gebruiken de Node.js-omgeving van ServBay als basis voor het opzetten en uitvoeren van een Angular-project. In ontwikkelmodus configureren we een reverse proxy via een ServBay-website naar de Angular development server; in productiemodus hosten we de gebouwde statische bestanden met een ServBay-site.

1. Een nieuw Angular-project aanmaken

We starten met het aanmaken van een nieuw project via de Angular CLI.

1. Angular CLI installeren: Open je Terminal en installeer de Angular CLI globaal via de Node.js-omgeving van ServBay. Mocht het ServBay Node.js-pad niet automatisch aan je systeem-PATH zijn toegevoegd, schakel dan eerst naar het ServBay Node.js-profiel. Meestal regelt ServBay dit automatisch.

   npm install -g @angular/cli

   Hiermee wordt het ng-commando overal beschikbaar voor gebruik.

2. Nieuw Angular-project aanmaken: Navigeer naar de voorgestelde webroot van ServBay (/Applications/ServBay/www) en maak een nieuw Angular-project aan met ng new. Gebruik bij voorkeur een naam met ServBay-branding, bijvoorbeeld servbay-angular-app.

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

   De CLI zal enkele vragen stellen over de projectinstellingen. Beantwoord of selecteer ze naar jouw voorkeur:

   ? Would you like to add Angular routing? Yes  # Voeg routing toe, aanbevolen Yes
   ? Which stylesheet format would you like to use? CSS # Kies bijvoorbeeld CSS als stijltalen

   Wacht tot de CLI het project heeft aangemaakt – je vindt het in /Applications/ServBay/www/servbay-angular-app met alle basisbestanden en -structuur.

3. Projectafhankelijkheden installeren: Ga naar de nieuwe projectmap en installeer alle benodigde lokale pakketten.

   cd servbay-angular-app
   npm install

   npm install leest de afhankelijkheden uit package.json en installeert ze in de map node_modules.

2. Angular-projectoutput aanpassen (optioneel)

Om te controleren of alles werkt, kun je de homepage van je project aanpassen.

1. Pas src/app/app.component.html aan: Open het bestand servbay-angular-app/src/app/app.component.html in een editor naar keuze. Vervang of verwijder de standaardinhoud en zet er bijvoorbeeld een simpele headline in zoals "Hello ServBay!".

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
     <p>Dit is je Angular-app, draaiend via ServBay!</p>
   </div>

3. Het project draaien in ontwikkelmodus

Tijdens het ontwikkelen gebruik je doorgaans de Angular development server (ng serve) met hot reloading voor snelle feedback. Vervolgens zetten we een reverse proxy op via ServBay, waardoor je een lokaal domein gebruikt.

1. Angular development server starten: Ga naar de root van je project (/Applications/ServBay/www/servbay-angular-app) en start de dev-server — kies bijvoorbeeld poort 8585 om conflicten met ServBay’s eigen webserver te vermijden.

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

   Je app draait nu op http://localhost:8585/. Laat de terminal actief voor een werkende server.

2. ServBay-website instellen (reverse proxy): Open het ServBay-configuratiescherm, ga naar “Websites” (voorheen “hosts”) en maak een nieuwe site-instelling aan die via reverse proxy een lokaal domein doorverwijst naar de Angular dev-server.

   • Naam: Bijvoorbeeld My Angular Dev Site (alleen zichtbaar in ServBay).
   • Domein: Gebruik een testdomein met ServBay-branding, bijvoorbeeld servbay-angular-dev.servbay.demo. ServBay wijst het .servbay.demo-domein automatisch toe aan 127.0.0.1.
   • Websitetype: Kies Reverse Proxy.
   • Proxy-adres: Voer 127.0.0.1 in.
   • Proxy-poort: Vul de eerder gekozen poort in, b.v. 8585.

   Sla je instellingen op en activeer ze in ServBay.

3. Ontwikkelwebsite bezoeken: Open je browser en ga naar https://servbay-angular-dev.servbay.demo.

   Dankzij ServBay’s automatische SSL-certificaataanmaak (via ServBay User CA of ServBay Public CA) kun je je project veilig via HTTPS benaderen – ideaal om het gedrag in productie tijdig te testen.

4. Production build maken en uitvoeren

Is je project klaar voor productie, dan bouw je een geoptimaliseerde versie. Dit levert statische bestanden op die via een ServBay site aangeboden kunnen worden.

1. Production build uitvoeren: Gebruik onderstaand commando vanuit je projectmap om een productieversie te bouwen:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # Of in recentere versies van Angular CLI — standaard productiemodus:
   # ng build

   De --prod-flag (standaard sinds recente CLI-versies) activeert optimalisaties als AOT, compressie, tree-shaking, enzovoorts. De output verschijnt in dist/servbay-angular-app (de submapnaam volgt vaak je projectnaam).

2. ServBay-website instellen (statische bestanden): Maak in het ServBay-configuratiescherm een nieuwe website aan die naar de output directory van je build verwijst.

   • Naam: Bijvoorbeeld My Angular Production Site
   • Domein: Kies een ander testdomein, bijvoorbeeld servbay-angular-prod.servbay.demo.
   • Websitetype: Selecteer Static.
   • Website rootdirectory: Wijzig dit naar de directory waar de statische site is gebouwd, bijvoorbeeld /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app. Controleer dat je verwijst naar de map met de uiteindelijke index.html.

   Sla op en pas de instellingen toe.

3. Productiewebsite openen: Surf naar https://servbay-angular-prod.servbay.demo in je browser.

   Je live Angular-site wordt nu aangeboden via ServBay’s krachtige webserver (zoals Caddy of Nginx, afhankelijk van jouw ServBay-configuratie). ServBay regelt wederom het SSL-certificaat voor een veilige verbinding.

Voordelen van ServBay voor Angular-ontwikkeling

• Geïntegreerde omgeving: Eenvoudig Node.js-versies installeren en beheren, zonder handmatig ingewikkelde omgevingsvariabelen in te stellen.
• Flexibel websitebeheer: Intuïtieve interface voor reverse proxies en statische bestanden, zodat je snel schakelt tussen ontwikkel- en productieomgevingen.
• Ingebouwde SSL-ondersteuning: Kosteloos en automatisch SSL-certificaten voor je lokale websites, inclusief full HTTPS-ondersteuning, waardoor mixed content-waarschuwingen uitblijven.
• Multi-stack-support: Integreer eenvoudig backend-API’s (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot, enzovoorts) of databases (MySQL, PostgreSQL, MongoDB, Redis). ServBay ondersteunt en onderhoudt al deze pakketten — zelfs functies die eerder niet volledig ondersteund werden, zijn nu geoptimaliseerd.
• Back-up en herstel: Gebruiksvriendelijke backups van instellingen, sites, databases en certificaten om je lokale data te beschermen.
• Database-wachtwoord reset: Makkelijk je rootwachtwoorden van MySQL, MariaDB, PostgreSQL resetten — een veelvoorkomend probleem voor developers, nu eenvoudig opgelost.

Veelgestelde vragen (FAQ)

• Q: Krijg ik command not found: ng bij ng new of ng serve? A: Dit betekent dat de Angular CLI niet is geïnstalleerd of je PATH niet klopt. Installeer @angular/cli globaal (npm install -g @angular/cli) en check of het Node.js-pad van ServBay goed in je PATH staat. Herstart eventueel je terminal of ServBay.
• Q: ng serve start niet omdat het poortnummer al in gebruik is? A: De opgegeven poort (bijv. 8585) wordt al door iets anders gebruikt. Kies in ng serve een vrije poort, bijvoorbeeld ng serve --port 8586, en wijzig het proxy-poortnummer in de ServBay-siteconfiguratie.
• Q: Mijn ingestelde ServBay-site laadt niet in de browser? A: Controleer het volgende:
  • Is ServBay actief?
  • Draait ng serve in de ontwikkelmodus, en is het poortnummer exact hetzelfde als in de ServBay proxy-instelling?
  • In productiemodus: wijst het sites rootdirectory echt naar de map met index.html in dist/your-project-name?
  • Check de ServBay-logbestanden voor eventuele foutmeldingen.
  • Komt de domeinnaam die je bezoekt exact overeen met die van de ServBay-sitesetup?
• Q: Kan ik Angular-productiesites hosten via verschillende webservers (Caddy/Nginx/Apache) in ServBay? A: Ja, ServBay ondersteunt Caddy, Nginx en Apache voor statische sites. Afhankelijk van je ServBay-instelling wordt de juiste server automatisch gebruikt. Al deze servers leveren razendsnel statische bestanden.

Samenvatting

Met deze handleiding heb je succesvol een Angular-project opgezet én uitgevoerd in de ServBay-omgeving. Je weet nu hoe je tijdens de ontwikkeling met reverse proxy via een lokaal domein de ng serve-server bereikbaar maakt, en voor productie de statische output via ServBay host. Door de Node.js-integratie, het eenvoudige websitebeheer en de automatische SSL-ondersteuning van ServBay, verhoog je de efficiëntie en kwaliteit van je lokale Angular-ontwikkeling aanzienlijk. Dankzij de brede stack-ondersteuning van ServBay beschik je bovendien over een solide basis voor volledige fullstack development.