Neuigkeiten von trion.
Immer gut informiert.

Angular Build mit GitHub Actions

Angular

GitHub Actions ermöglichen es, Reaktionen auszulösen, wenn in einem GitHub Repository Ereignisse eintreten.
Damit lässt sich beispielsweise Generierung von Dokumentation, oder Build und Test von Programmcode umsetzen, ohne einen zusätzlichen CI-Server zu benötigen.

Anders als viele andere CI Lösungen, wie beispielsweise GitLab-CI, setzt GitHub Actions dabei auf vordefinierte Umgebungen und nicht auf Container.
Allerdings lassen sich neben den in den Umgebungen vorhandenen Standardwerkzeugen auch zusätzliche Actions hinzunehmen. Bei Actions handelt es sich um wiederverwendbare Code-Bausteine. Außer von GitHub oder dem eigenen Repository können Actions auch auf einem Marketplace von Drittanbietern, z.B. als Docker-Image, bereitgestellt werden.

Als Umgebungen stehen bei GitHub derzeit Linux, Windows und MacOS zur Verfügung.

Das Ergebnis von GitHub Actions können dann Aktionen unter Verwendung der GitHub API sein. Außerdem können auch Docker-Images erstellt und anschließend in eine Registry gepushed werden.

Wie GitHub Actions genutzt werden können, um eine Angular-Anwendung zu testen und zu bauen, stellen wir in diesem Beitrag vor.

Angular-Anwendung für GitHub Actions erstellen

Zunächst erstellen wir eine Angular Anwendung.
Dazu verwenden wir das Angular CLI, es kann entweder lokal per NPM installiert werden oder als Docker-Container ausgeführt werden.

Beispiel zur Erzeugung eines Angular Projekts mit Docker
$ docker run -u $(id -u) --rm -v $PWD:/app trion/ng-cli ng new demo

GitHub Action für Angular

GitHub Actions werden durch Workflows im YAML Format beschrieben, die in dem Ordner .github/workflows/ abgelegt werden. Details finden sich hier: https://help.github.com/en/articles/workflow-syntax-for-github-actions

Die wichtigsten Bestandteile sind die Trigger (on), also wann der Workflow ausgeführt werden soll und die Jobs (jobs) die ausgeführt werden sollen.
Innerhalb eines jeden Jobs gibt es noch die Schritte (steps), die die eigentliche Ausführung vorgeben.

Grundsätzlich gliedert sich der Build einer Angular-Anwendung in diese Schritte:

  1. Checkout der Sourcen

  2. Installation von NPM-Abhängigkeiten

  3. Durchführung von Unit- (und ggf. E2E-) Tests

  4. Erstellung und Bereitstellung des Ergebnis-Artefakts

Auf den letzten Schritt verzichten wir an dieser Stelle, da es hier sehr viele Varianten gibt, wie die Auslieferung gestaltet werden könnte.
Zu einem späteren Zeitpunkt kommen wir darauf zurück.

Die oben erwähnten Schritte lassen sich sehr einfach auf entsprechende Steps abbilden.
Damit Tests einfach ausgeführt werden können, werden wir auch hier Docker mit dem Angular-CLI Docker-Image einsetzen.

Beispiel GitHub Action Workflow für Angular
name: CI
on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Check out repository
        uses: actions/[email protected]

      - name: Clean install dependencies
        run: |
          npm ci
          chmod -R a+rwx node_modules

      - name: Test Angular app with GitHub Actions and Karma
        uses: docker://trion/ng-cli-karma:9.1.0
        with:
          args: ng test --watch=false --progress=false

      - name: E2E Test Angular app with GitHub Actions and Protractor
        uses: docker://trion/ng-cli-e2e:9.1.0
        with:
          args: /bin/sh -c "ng e2e; chmod -R a+rwx node_modules"

Diese YAML Datei wird unter .github/workflows/build.yaml abgelegt.
Nach jedem Push kann unter Actions in der GitHub-Oberfläche der Buildstatus angesehen werden.

Build Status

Der Build-Status eines GitHub-Actions-Projekts kann auch als Bild in externen HTML-Seite eingebunden werden - oder natürlich auch auf GitHub selbst als Teil des README.

Die Bild-URL leitet sich dabei von dem Projektnamen und dem Workflownamen ab. Für das Beispielprojekt unter https://github.com/trion-development/angular-github-actions mit dem Workflow "CI" ergibt sich als Badge-URL:
https://github.com/trion-development/angular-github-actions/workflows/CI/badge.svg

Im Folgeartikel betrachten wir, wie Angular-Anwendungen mit Github-Actions gebaut und dann auf Github-Pages deployed werden können.
Hier geht es zum Artikel: Angular Anwendungen auf GitHub Pages mit GitHub Actions publizieren




Zu den Themen Angular, Architektur von SPA Anwendungen und TypeScript bieten wir sowohl Beratung, Entwicklungsunterstützung als auch passende Schulungen an.

Auch für Ihren individuellen Bedarf können wir Workshops und Schulungen anbieten. Sprechen Sie uns gerne an.

Feedback oder Fragen zu einem Artikel - per Twitter @triondevelop oder E-Mail freuen wir uns auf eine Kontaktaufnahme!

Los geht's!

Bitte teilen Sie uns mit, wie wir Sie am besten erreichen können.