Github Actions and workflows

Lars introduces GitHub Actions and GitHub action workflows and answers the following questions. What can GitHub workflows automate? What can trigger GitHub action workflows? Which types of GitHub Actions can we pick from when implementing our own that are either project-specific or published on GitHub Marketplace? Finally, a CI workflow for an Angular project is demonstrated.

Demo repository:
https://github.com/LayZeeDK/github-actions-angular

Prestented at:
- Systemate All-Stars 2021
- Angular Virtual Conference 2021 by C# Corner, May 2021
- AarhusJS, November 2021
- Angular Community Meetup, March 2022

Recording:
https://youtu.be/0srT34NiiO8

Transcript

1. GitHub Actions and workflows Angular Community Meetup
2. GitHub Actions Types • Workflows • CI/CD workflows on GitHub runners • Event-driven workflows, for example triggered by web hook, PR, commit, tag, release, or comment • Actions • Actions by GitHub • 3rd party actions on GitHub Marketplace • Custom actions
3. GitHub workflows
4. GitHub workflows name: CI on: pull_request: {} push: branches: - main jobs: build: name: Build runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: 16.x cache: yarn - name: Install dependencies run: yarn install - name: Build run: yarn build
5. GitHub workflows Structure of workflow configuration • Name • Triggers • Environment variables • 1..n jobs
6. GitHub workflows Built-in triggers • Cron timer (schedule) • Manual trigger on github.com (workflow_dispatch) • Web hook (repository_dispatch) • Push (push) • Pull request (pull_request) • Issue • Fork
7. GitHub workflows Built-in triggers • Git branch • Git tag • GitHub release • GitHub project • Deployment • GitHub wiki
8. GitHub workflows Actionsflow triggers • API polling • Email • Google Form • GraphQL polling • JavaScript script • Instagram • NPM • RSS • Weather • Web hook
9. GitHub workflows Actionsflow triggers • Instagram • Reddit • Slack • Telegram • Trello • Twitter • Typeform • YouTube
10. GitHub workflows Jobs • Image • Ubuntu • Windows Server • macOS • Linux container image • Environment variables • 1..n steps • Job dependencies • 0..n output values
11. GitHub workflows Jobs jobs: build: name: Build runs-on: ubuntu-latest steps: - uses: actions/checkout@v2
12. GitHub workflows GitHub action steps • Local or remote path • Version, tag, branch, or commit • Optional inputs (parameters) • Optional outputs (result values) • Optional name
13. GitHub workflows GitHub action steps jobs: build: name: Build runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 # 👈 with: node-version: 16.x # 👈 cache: yarn # 👈 - name: Install dependencies run: yarn install - name: Build run: yarn build
14. GitHub workflows Run steps • Shell • OS-specific (default) • Bash (bash) • PowerShell (powershell) • PowerShell Core (pwsh) • Working directory • Terminal command • Optional name
15. GitHub workflows Run steps jobs: build: name: Build runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: 16.x cache: yarn - name: Build run: yarn build # 👈
16. GitHub workflows Conditions • Job-level • Step-level
17. GitHub workflows Conditions jobs: lint: name: Lint if: ${{ github.event_name == 'pull_request' }} # 👈 runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: 16.x cache: yarn - name: Lint run: yarn lint
18. GitHub workflows Reusable workflows name: Reusable deployment example on: workflow_call: inputs: username: required: true type: string secrets: token: required: true jobs: deploy: name: Pass input and secrets to my-action runs-on: ubuntu-latest steps: - uses: ./.github/actions/my-deploy-action@v1 with: username: ${{ inputs.username }} token: ${{ secrets.token }}
19. GitHub workflows Reusable workflows name: Calling a reusable workflow on: pull_request: branches: - main jobs: deploy: uses: LayZeeDK/my-actions/.github/workflows/my-deploy.yml with: username: lars secrets: token: ${{ secrets.TOKEN }}
20. GitHub Actions
21. GitHub Actions Usage examples • Publish packages • Deploy package • Send HTTP request • Install dependencies in workflow job • Run tool • Manage cloud environment • Comment in pull request • Send email • Create and send reports • Send chat message
22. GitHub Actions Structure of action configuration • Name • Description • 0..n inputs (parameters) • 0..n outputs (result values) • Type and environment
23. GitHub Actions Types • Docker container actions • JavaScript actions • Composite actions
24. Docker container actions
25. Docker container actions • Only supports Linux containers • A complete environment is included with the action • No access to the file system • Easy to test locally • Slower than the other action types • Input values are accessible as environment variables • Output values have to be set using terminal commands
26. Docker container actions Configuration # action.yml name: Hello World description: Greet someone and record the time inputs: who-to-greet: # id of input description: Who to greet required: true default: World outputs: time: # id of output description: The time we greeted you runs: using: docker # 👈 image: Dockerfile # 👈
27. Docker container actions Container image # Container image that runs your code FROM alpine:3.10 # Copies your code file from your action repository to the # filesystem path `/` of the container COPY entrypoint.sh /entrypoint.sh # Code file to execute when the OCI container starts up # (`entrypoint.sh`) ENTRYPOINT ["/entrypoint.sh"]
28. Docker container actions Container script #!/bin/sh -l echo "Hello $INPUT_WHO_TO_GREET" # 👈 Input time=$(date) echo "::set-output name=time::$time" # 👈 Output
29. JavaScript actions
30. JavaScript actions • Node.js • NPM packages • Access to the file system of the workflow job • Is locally testable using environment variables • INPUT_<INPUT_NAME>=<VALUE> • Direct access to input and output values • Faster than Docker container actions • Faster than composite run steps calling Node.js scripts • Support Node.js versions 12 and 16
31. JavaScript actions Actions toolkit • @actions/artifact: Build artifacts • @actions/cache: Caching dependencies and build outputs • @actions/core: Input and output values, logging, and secrets • @actions/exec: Process management • @actions/io: File system I/O • @actions/github: GitHub metadata (Octokit client)
32. JavaScript actions Configuration name: Hello World description: Greet someone and record the time inputs: who-to-greet: # id of input description: Who to greet required: true default: World outputs: time: # id of output description: The time we greeted you runs: using: node16 # 👈 main: index.mjs # 👈
33. Composite actions
34. Composite actions • 1..n run or action steps • No access to the file system • Can be combined with terminal scripts or arbitrary programs • Can be combined with scripts in programming languages that are executable from the command line • Output values are set using a special terminal command • Allow reuse of common actions and parameters across workflows
35. Composite actions Configuration name: Hello World description: Greet someone inputs: who-to-greet: # id of input description: Who to greet required: true default: World outputs: random-number: description: Random number value: ${{ steps.random-number-generator.outputs.random-id }} runs: using: composite # 👈 steps: # 👈 - run: echo Hello ${{ inputs.who-to-greet }}. shell: bash - id: random-number-generator run: echo "::set-output name=random-id::$(echo $RANDOM)" shell: bash - run: ${{ github.action_path }}/goodbye.sh shell: bash
36. Composite actions Parameters name: Hello World description: Greet someone inputs: who-to-greet: # id of input description: Who to greet required: true default: World outputs: random-number: description: Random number value: ${{ steps.random-number-generator.outputs.random-id }} runs: using: composite steps: - run: echo Hello ${{ inputs.who-to-greet }}. # 👈 Input shell: bash - id: random-number-generator run: echo "::set-output name=random-id::$(echo $RANDOM)" # 👆 Output shell: bash - run: ${{ github.action_path }}/goodbye.sh shell: bash
37. Composite actions Action reuse name: Publish container description: Pushes build artifacts to container registry inputs: registry-username: description: Username for image registry required: true registry-password: description: Password for image registry required: true runs: using: composite steps: - uses: docker/setup-buildx-action@v1 - uses: docker/login-action@v1 with: username: ${{ inputs.registry-username }} password: ${{ inputs.registry-password }} - uses: docker/build-push-action@v2 with: context: . push: true tags: user/app:latest
38. Demo github.com/LayZeeDK/github-actions-angular
39. Conclusion
40. GitHub Actions and workflows • Workflows • CI/CD workflows on GitHub runners • Event-driven workflows, for example triggered by web hook, PR, commit, tag, release, or comment • Shared steps through reusable workflows or composite actions • Actions • Actions by GitHub • 3rd party actions on GitHub Marketplace • Custom actions
41. GitHub workflows • Built-in triggers • Push commit • Pull request • Manual trigger • Timer • Web hook • GitHub triggers • Tag • Release • Deployment • Actionflows • RSS • Slack • Twitter • YouTube
42. GitHub Actions • Docker container actions • JavaScript actions • Composite actions
43. Get in touch 👐 Lars Gyrup Brink Nielsen 🐦 @LayZeeDK