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
   

   View Slide

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
   

   View Slide

3. GitHub workflows
   

   View Slide

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
   

   View Slide

5. GitHub workflows
   Structure of workflow configuration
   • Name
   • Triggers
   • Environment variables
   • 1..n jobs
   

   View Slide

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
   

   View Slide

7. GitHub workflows
   Built-in triggers
   • Git branch
   • Git tag
   • GitHub release
   • GitHub project
   • Deployment
   • GitHub wiki
   

   View Slide

8. GitHub workflows
   Actionsflow triggers
   • API polling
   • Email
   • Google Form
   • GraphQL polling
   • JavaScript script
   • Instagram
   • NPM
   • RSS
   • Weather
   • Web hook
   

   View Slide

9. GitHub workflows
   Actionsflow triggers
   • Instagram
   • Reddit
   • Slack
   • Telegram
   • Trello
   • Twitter
   • Typeform
   • YouTube
   

   View Slide

10. GitHub workflows
    Jobs
    • Image
    • Ubuntu
    • Windows Server
    • macOS
    • Linux container image
    • Environment variables
    • 1..n steps
    • Job dependencies
    • 0..n output values
    

    View Slide

11. GitHub workflows
    Jobs
    jobs:
    build:
    name: Build
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    

    View Slide

12. GitHub workflows
    GitHub action steps
    • Local or remote path
    • Version, tag, branch, or commit
    • Optional inputs (parameters)
    • Optional outputs (result values)
    • Optional name
    

    View Slide

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
    

    View Slide

14. GitHub workflows
    Run steps
    • Shell
    • OS-specific (default)
    • Bash (bash)
    • PowerShell (powershell)
    • PowerShell Core (pwsh)
    • Working directory
    • Terminal command
    • Optional name
    

    View Slide

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 # 👈
    

    View Slide

16. GitHub workflows
    Conditions
    • Job-level
    • Step-level
    

    View Slide

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
    

    View Slide

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 }}
    

    View Slide

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 }}
    

    View Slide

20. GitHub Actions
    

    View Slide

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
    

    View Slide

22. GitHub Actions
    Structure of action configuration
    • Name
    • Description
    • 0..n inputs (parameters)
    • 0..n outputs (result values)
    • Type and environment
    

    View Slide

23. GitHub Actions
    Types
    • Docker container actions
    • JavaScript actions
    • Composite actions
    

    View Slide

24. Docker container actions
    

    View Slide

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
    

    View Slide

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 # 👈
    

    View Slide

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"]
    

    View Slide

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
    

    View Slide

29. JavaScript actions
    

    View Slide

30. JavaScript actions
    • Node.js
    • NPM packages
    • Access to the file system of the workflow job
    • Is locally testable using environment variables
    • INPUT_=
    • 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
    

    View Slide

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)
    

    View Slide

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 # 👈
    

    View Slide

33. Composite actions
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. Demo
    github.com/LayZeeDK/github-actions-angular
    

    View Slide

39. Conclusion
    

    View Slide

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
    

    View Slide

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
    

    View Slide

42. GitHub Actions
    • Docker container actions
    • JavaScript actions
    • Composite actions
    

    View Slide

43. Get in touch 👐
    Lars Gyrup Brink Nielsen
    🐦 @LayZeeDK
    

    View Slide

44. View Slide