Een Angular-project maken en uitvoeren in ServBay

Overzicht

Deze documentatie begeleidt je bij het aanmaken, configureren en uitvoeren van een Angular-project in de lokale webontwikkelomgeving van ServBay. We maken gebruik van ServBay’s krachtige Node.js-ondersteuning en het flexibele beheer van websites (voorheen “hosts”), waarmee je eenvoudig zowel ontwikkel- als productie-omgevingen opzet. Je krijgt directe, veilige toegang via aangepaste domeinen en SSL-certificaten. ServBay bundelt alle benodigde softwarepakketten (voorheen “services”), zoals Node.js, PHP, Python, Go, Java en diverse databases—ideaal voor volledige lokale full-stack ontwikkeling.

Wat is Angular?

Angular is een open source frontend-framework dat door Google wordt onderhouden. Het wordt gebruikt voor het bouwen van snelle, dynamische single-page applicaties (SPA’s). Het framework is gebaseerd op TypeScript en biedt een uitgebreid pakket aan tools en een gestructureerde ontwikkelaanpak—perfect voor grote en complexe enterprise-applicaties.

Belangrijkste functies en voordelen van Angular

• Component-gebaseerde architectuur: Bouw gebruikersinterfaces met herbruikbare componenten voor optimale onderhoudbaarheid en schaalbaarheid.
• TypeScript-ondersteuning: Statische type-checks en krachtige OOP-kenmerken verhogen de codekwaliteit en productiviteit.
• Dependency injection: Maakt componenten beter testbaar en vereenvoudigt het beheer van afhankelijkheden.
• Krachtige CLI (Command Line Interface): Versnelt projectcreatie, component-/service-/module-generatie en taken als build & test.
• Ingebouwde oplossingen: Routing, formulieren, HTTP-clients en meer zijn standaard geregeld.
• Prestatieoptimalisatie: Met AOT-compilatie en tree-shaking voor snellere, lichtere applicaties.

Combineer Angular met de stabiele ServBay-omgeving voor maximale focus op bedrijfslogica.

Vereisten

Voordat je begint, controleer het volgende:

1. ServBay geïnstalleerd: Je hebt ServBay succesvol geïnstalleerd en gestart (beschikbaar voor macOS en Windows).
2. Node.js-pakket geactiveerd: Controleer in het ServBay-bedieningspaneel dat je de benodigde Node.js-versie(s) hebt geïnstalleerd en geactiveerd. ServBay ondersteunt gemakkelijk wisselen tussen meerdere Node.js-versies.

Een Angular-project opzetten en uitvoeren met ServBay

We gebruiken ServBay’s Node.js-omgeving om een Angular-project te creëren en uit te voeren. In de ontwikkelmodus richten we een reverse proxy in naar de Angular-ontwikkelserver via ServBay’s sitebeheer. In de productiemodus bouwen we het project en maken gebruik van statische bestandsdienst via ServBay.

1. Een Angular-project aanmaken

Allereerst gebruiken we Angular CLI om een nieuw project te genereren.

1. Angular CLI installeren: Open je terminal en installeer Angular CLI globaal via het Node.js-pad van ServBay. Komt ServBay’s Node.js niet automatisch in het systeem-PATH terecht? Wissel dan handmatig naar de juiste Node.js-omgeving—maar meestal doet ServBay dit automatisch.

   npm install -g @angular/cli

   Hiermee wordt het ng-commando globaal geïnstalleerd waarmee je Angular CLI overal kunt gebruiken.

2. Een nieuw Angular-project genereren: Ga naar ServBay’s aanbevolen webroot en maak een nieuw Angular-project aan met ng new. Gebruik bijvoorbeeld een ServBay-gerelateerde naam als 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 zal enkele vragen stellen over de projectconfiguratie. Volg deze prompts met je voorkeur:

   ? Would you like to add Angular routing? Yes  # Wil je routing toevoegen? Aanbevolen: Yes
   ? Which stylesheet format would you like to use? CSS # Kies een stylesheet-formaat, bijvoorbeeld CSS

   Wacht tot het proces klaar is; CLI maakt een map servbay-angular-app in de webroot met de standaardsstructuur:

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

3. Projectafhankelijkheden installeren: Ga naar het nieuwe project en installeer alle lokale afhankelijkheden.

   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)

Voor een snelle test kun je de homepage aanpassen.

1. Bewerk het bestand src/app/app.component.html: Open servbay-angular-app/src/app/app.component.html in je favoriete editor. Pas de inhoud aan tot een simpel titelvoorbeeld, zoals:

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

3. Project uitvoeren in ontwikkelmodus

Angular CLI biedt een ontwikkelserver (ng serve) met hot reloading. Via ServBay’s reverse proxy kun je lokaal een eigen domein instellen voor deze server.

1. Angular-ontwikkelserver starten: Start de server in de projectroot en kies bijvoorbeeld poort 8585, zodat deze niet botst met ServBay’s standaardpoort.

   macOS:

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

   Windows:

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

   Dit compileert je Angular-project en start een lokale webserver op http://localhost:8585/. Houd de terminal open om de server draaiende te houden.

2. ServBay-site configureren (reverse proxy): Ga in het ServBay-bedieningspaneel naar de sectie “Websites” en voeg een nieuwe site toe die via reverse proxy een lokaal domein naar de Angular-server verwijst.

   • Naam: Bijvoorbeeld My Angular Dev Site (alleen zichtbaar binnen ServBay)
   • Domein: Bijvoorbeeld servbay-angular-dev.servbay.demo. ServBay stuurt .servbay.demo-domeinen automatisch door naar 127.0.0.1.
   • Websitetype: Kies Reverse Proxy.
   • Proxy-adres: Vul 127.0.0.1 in.
   • Proxy-poort: De poort uit ng serve, bijvoorbeeld 8585.

   Sla de wijzigingen op en pas de configuratie toe in ServBay.

3. Site in ontwikkelmodus bezoeken: Open je browser en ga naar het domein: https://servbay-angular-dev.servbay.demo.

   Dankzij ServBay krijg je automatisch een lokaal SSL-certificaat (ServBay User CA of Public CA), waardoor je site direct via HTTPS bereikbaar is. Zo kun je alvast testen als in een echte productieomgeving en mogelijke issues vroegtijdig identificeren.

4. Productieversie bouwen en draaien

Ben je klaar voor livegang? Bouw een geoptimaliseerde productieversie die je via ServBay’s statische bestandsserver aanbiedt.

1. Productieversie bouwen: Voer in de projectroot het volgende uit:

   macOS:

   cd /Applications/ServBay/www/servbay-angular-app
   ng build --prod
   # Of gebruik voor recente CLI-versies:
   # ng build

   Windows:

   cd C:\ServBay\www\servbay-angular-app
   ng build --prod
   # Of voor recentere CLI:
   # ng build

   De optie --prod (standaard in nieuwe CLI) zet AOT, compressie en tree-shaking aan. Statische bestanden vind je daarna in dist/servbay-angular-app (de exacte map hangt af van je configuratie, en is meestal gelijk aan de projectnaam).

2. ServBay-site instellen (statische bestandsdienst): Voeg in het ServBay-bedieningspaneel een site toe die het productiebestand op een domein aanbiedt.

   • Naam: Bijvoorbeeld My Angular Production Site

   • Domein: Bijvoorbeeld servbay-angular-prod.servbay.demo.

   • Websitetype: Selecteer Static.

   • Website-root-map: Ga naar de outputmap:

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

     Zorg dat je verwijst naar de map met het uiteindelijke index.html bestand.

   Sla je instellingen op en activeer ze.

3. Site in productiemodus bezoeken: Ga naar https://servbay-angular-prod.servbay.demo in je browser.

   Je ziet nu je geoptimaliseerde Angular-app direct als statische website via ServBay’s webserver (zoals Caddy of Nginx, afhankelijk van je ServBay-configuratie). Ook hier regelt ServBay automatisch het SSL-certificaat voor veilige toegang.

Voordelen van ServBay voor Angular-ontwikkeling

• Geïntegreerde omgeving: Installeren en beheren van Node.js-versies zonder gedoe met systeemvariabelen.
• Flexibel sitebeheer: Switch razendsnel tussen ontwikkel- en productiemodus via reverse proxy en statische dienst met een helder bedieningspaneel.
• Ingebouwde SSL: Automatische gratis SSL-certificaten voor je lokale sites, zodat je direct test onder HTTPS en geen mixed-content warnings krijgt.
• Full-stack support: Werk je met backend API’s (Node.js Express, Python Django/Flask, PHP Laravel/Symfony, Go Gin/Echo, Java Spring Boot) of databases (MySQL, PostgreSQL, MongoDB, Redis)? ServBay integreert en onderhoudt deze pakketten moeiteloos—ook functionaliteit die eerder beperkt werd ondersteund is nu compleet.
• Data back-up & herstel: Eenvoudig back-uppen van configuraties, sites, databases en SSL-certificaten voor maximale bescherming van je lokale gegevens.
• Wachtwoord-reset voor databases: Reset direct de rootwachtwoorden van MySQL, MariaDB, PostgreSQL—perfect voor developers die daar vaak tegenaan lopen.

Veelgestelde vragen (FAQ)

• Q: Het commando ng new of ng serve geeft command not found: ng—wat nu? A: Meestal staat Angular CLI dan niet goed geïnstalleerd of is deze niet vindbaar in je systeem-PATH. Installeer @angular/cli globaal (npm install -g @angular/cli) en controleer of ServBay’s Node.js-omgeving goed in het PATH is opgenomen. Herstart je terminal of ServBay indien nodig.
• Q: ng serve faalt met fout “poort al in gebruik”—wat nu? A: Poort (zoals 8585) is in gebruik door een ander programma. Gebruik een andere poort via ng serve --port, bijvoorbeeld ng serve --port 8586, en pas ook de poort in ServBay’s reverse proxy aan.
• Q: Mijn ServBay-site laadt het domein niet—hoe los ik dit op? A: Check het volgende:
  • Draait ServBay?
  • In ontwikkelmodus moet ng serve actief zijn en luisteren op de poort die ServBay gebruikt.
  • In productiemodus moet het website root-directory exact naar de map met index.html (meestal dist/je-projectnaam) wijzen.
  • Bekijk ServBay’s logbestanden voor meer foutdetails.
  • Zorg dat het domein in de browser precies overeenkomt met dat in ServBay.
• Q: Kan ik bij ServBay kiezen tussen Caddy, Nginx of Apache om mijn productie-Angular-site te hosten? A: Ja! ServBay ondersteunt Caddy, Nginx en Apache als statische servers. Bij het configureren kiest ServBay automatisch je actieve webserver: alle leveren snel en slim statische content voor Angular.

Samenvatting

Met deze gids heb je succesvol een Angular-project opgezet en uitgevoerd in de ServBay-omgeving. Je weet nu hoe je in de ontwikkelfase via reverse proxy en lokaal domein bij je ng serve-server komt, en hoe je in productie je project bouwt en gepubliceerd krijgt via ServBay’s statische bestandsdienst. Dankzij ServBay’s Node.js-ondersteuning, toegankelijk sitebeheer en automatische SSL wordt ontwikkeling een stuk efficiënter én prettiger. Door de brede full-stack softwareondersteuning heb je een robuuste basis voor al je lokale webprojecten.