GitHub Actions and workflows Angular Community Meetup

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

GitHub workflows

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

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

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

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

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

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

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

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

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

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

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

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

GitHub workflows Conditions • Job-level • Step-level

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

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

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

GitHub Actions

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

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

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

Docker container actions

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

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

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

Docker container actions Container script #!/bin/sh -l echo "Hello $INPUT_WHO_TO_GREET" # 👈 Input time=$(date) echo "::set-output name=time::$time" # 👈 Output

JavaScript actions

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

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)

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

Composite actions

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

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

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

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

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

Conclusion

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

GitHub workflows • Built-in triggers • Push commit • Pull request • Manual trigger • Timer • Web hook • GitHub triggers • Tag • Release • Deployment • Actionflows • RSS • Slack • Twitter • YouTube

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

Get in touch 👐 Lars Gyrup Brink Nielsen 🐦 @LayZeeDK

No content