Automating App Version Update With Github Actions and Slack

Zach W. — Fri, 27 Jun 2025 18:25:17 +0000

My goal was to utilize Github Actions and Slack to update the version of my app. I got this idea from a manual task at work that I thought should be automated. It's a small task, but presented a good opportunity to practice Github Actions, Slack, and Shell Scripts.

The app from work which inspired this project consists of a component library (App1) and the actual app (App2).

App2 contains multiple experiences which each contain a package.json file.

The original tasks from work included:

Make a change in App1
Create a PR and merge
Once the PR is merged, a Github Actions (GHA) pipeline is activated which publishes the new version of App1 to an artifact manager.
A Slack message is sent notifying us of the new version
In order to update App2 we must physically change the version number in each of App2's package.json files.
Install all the dependencies for each subexperience and build the app.
Create a PR

Once this PR is merged, our dev pipeline is kicked off.

My goal was to automate the manual steps of this process which included:

When the new version from App1 was created, the Slack message would include a button to kick off a new GHA workflow.
This workflow would update the sub-experience versions, build the app, create a PR, and alert the team via Slack that the PR is ready for review.

That was my basic goal for this project. Since this was just a POC, I didn't directly implement it in the original code. I decided to replicate the steps using separate personal repo's.

Below are the steps I took, the obstacles I encountered, and what I learned from this process. This article doesn't every minute detail of the project but should give you a good picture of what I did.

Step 1: Create Slack Channel With Webhook

You will need to create a Slack channel with an incoming webhook in order to test the messages. You can create a webhook by going to your "Workplace Settings". Once you create the webhook you can replace that URL in below .sh scripts.

Step 2: Creating the Repos

This project required 2 individual repositories.

I created 2 Github repositories (both Next.js apps)

(Repo1) Innovation-Week-Components: Simulating the component library
(Repo2) Innovation-Week-App: Simulating the app

In Repo1 you will need to add the following files.

A GHA workflow file in .github/workflows

name: Create Release

on:
    pull_request:
        types:
            - closed
        branches:
            - main
        paths-ignore:
            - '**/*.md'

permissions:
  contents: write

jobs:
    build-app:
      name: Build App
      runs-on: ubuntu-latest

      steps:
        - name: Checkout code
          uses: actions/checkout@v3

        - name: Execute npm_build.sh
          run: |
            echo "BRANCH_NAME=$BRANCH_NAME" >> $GITHUB_ENV
            chmod +x .github/cicd/scripts/npm_build.sh
            .github/cicd/scripts/npm_build.sh

    create-release:
        name: Create Release
        runs-on: ubuntu-latest

        steps:
            - name: Checkout code
              uses: actions/checkout@v3

            - name: Get version from package.json
              id: get_version
              run: |
                VERSION=$(node -p "require('./package.json').version")
                echo "VERSION=$VERSION" >> $GITHUB_ENV

            - name: Debug version
              run: echo "Version is ${{ env.VERSION }}"

            - name: Create GitHub Release
              uses: actions/create-release@v1
              env:
                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
              with:
                tag_name: v${{ env.VERSION }}
                release_name: Release v${{ env.VERSION }}
                body: |
                  New release of the app.
                draft: false
                prerelease: false

A .sh script to send the Slack message in .github

# #!/bin/bash

set -e

cd ../../..
echo "$(pwd)"

cd "$GITHUB_WORKSPACE"

MERGE_COMMIT="Newest Testing Commit!"

NEW_VERSION_NUMBER=$(jq -r '.version' package.json)
echo $NEW_VERSION_NUMBER

echo "Changed version to ${NEW_VERSION_NUMBER}"

GITHUB_ACTIONS_URL="https://github.com/your-username/your-repo-name/actions"

curl --location 'https://hooks.slack.com/services/your-customer-slack-channel' \
--header 'Content-type: application/json' \
--data '{
    "blocks": [
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "New version '"${NEW_VERSION_NUMBER}"' published successfully. To deploy to develop, please update the app by clicking here and starting the workflow :point_right: \n\n Here'\''s what was added:\n```

'"${MERGE_COMMIT}"'

```"
            },
            "accessory": {
                "type": "button",
                "text": {
                    "type": "plain_text",
                    "text": "Update App"
                },
                "url": "'"${GITHUB_ACTIONS_URL}"'",
                "action_id": "button"
            }
        }
    ]
}'

In Repo2 you will need add the following files.

A GHA file in .github/workflows

This workflows creates the new branch, updates the app version, and creates the PR.

name: Update UI and Create PR

on:
  workflow_dispatch:

jobs:
  build-and-pr:
    runs-on: [ubuntu-latest]

    steps:
      - name: Checkout code
        uses: actions/checkout@v3
        with:
          persist-credentials: false

      - name: Set up Git
        run: |
          git config --global user.email "your-email"
          git config --global user.name "your-name"

      - name: Create and publish new branch
        env:
          GH_PAT: ${{ secrets.GH_PAT }}
        run: |
          git config user.name "your-name"
          git config user.email "your-email"
          BRANCH_STRING="APP-0000-Version-Bump"
          git checkout -b $BRANCH_STRING
          git remote set-url origin https://x-access-token:${GH_PAT}@github.com/username/Innovation-Week-App.git
          git push --set-upstream origin $BRANCH_STRING
          echo "BRANCH_NAME=$BRANCH_STRING"

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 22.12.0
          always-auth: true
          registry-url: npm-url

      - name: Update UI Versions
        env:
          NEW_TOKEN: ${{ secrets.GH_PAT}}
        run: |
          chmod +x .github/cicd/scripts/update_ui_version.sh
          .github/cicd/scripts/update_ui_version.sh
      - name: Commit changes
        run: |
          git add .
          git commit -m "APP-0000: Version-Bump"
      - name: Push branch
        env:
          GH_PAT: ${{ secrets.GH_PAT }}
        run: git push https://x-access-token:${GH_PAT}@github.com/username/Innovation-Week-App.git HEAD

      - name: Create pull request 
        env:
          GH_TOKEN: ${{ secrets.GH_PAT}}
        id: create_pr
        run: |
          PR_URL=$(gh pr create \
            --title "chore: Version Bump" \
            --body "Version Bump." \
            --base main \
            --head APP-0000-Version-Bump)
            echo "PR_URL=$PR_URL"
            echo "PR_URL=$PR_URL" >> $GITHUB_OUTPUT
      - name: Send Slack Notification
        env:
          NEW_TOKEN: ${{ secrets.GH_PAT}}
        run: |
          chmod +x .github/cicd/scripts/send_slack_message.sh
          .github/cicd/scripts/send_slack_message.sh "${{ steps.create_pr.outputs.PR_URL }}"

In .github, a script to update the app version.

# !/bin/bash

set -e

tag=$(curl -H "Authorization: Bearer $NEW_TOKEN" https://api.github.com/repos/username/Innovation-Week-Components/releases/latest | jq -r '.tag_name')

NEW_VERSION="${tag#v}"
export NEW_VERSION

echo "$NEW_VERSION"

NEW_BRANCH="APP-0000-Version-Bump"
echo "New Branch: $NEW_BRANCH"

echo "Current directory: $(pwd)"

if [ -f "package.json" ]; then
    echo "Updating root package.json"
    jq --arg newVersion "$NEW_VERSION" \
       '.version = $newVersion' \
       "package.json" > "package.json.tmp" && mv "package.json.tmp" "package.json"
fi

In .github, a script to send the Slack message

#!/bin/bash

set -e
# source update_ui_version.sh
source "$(dirname "$0")/update_ui_version.sh"

tag=$(curl -H "Authorization: Bearer $NEW_TOKEN" https://api.github.com/repos/user-name/Innovation-Week-Components/releases/latest | jq -r '.tag_name')

NEW_VERSION="${tag#v}"

# Ensure PR_URL is provided
if [ -z "$1" ]; then
  echo "Usage: $0 <PR_URL>"
  exit 1
fi

PR_URL="$1"

echo "Sending Slack notification for PR: $PR_URL"
echo "New version: $NEW_VERSION"

curl --location 'https://hooks.slack.com/services/your-slack-app' \
  --header 'Content-Type: application/json' \
  --data '{
    "blocks": [
      {
        "type": "section",
        "text": {
          "type": "mrkdwn",
          "text": "A pull request has been created to update  the UI, version: '"${NEW_VERSION}"'.\nClick here to review the pull request. :point_right:"
        },
        "accessory": {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": "Review PR"
          },
          "url": "'"${PR_URL}"'",
          "action_id": "button"
        }
      }
    ]
  }'

Step 3: Sending a Slack message after making a change

Make any change you would like in Repo1.
Commit and push your change.
Create a PR and merge.
After the PR is merged, the GHA workflow from above will run a .sh script that will create a new release and send the Slack message.

Make sure that your repo is private. If your repo is public, Slack will reset the webhook link and the message will fail.

While interacting with my webhook I found it helpful to test the webhook call using Postman.

During this step is where I encourted a problem that I couldn't solve. I wanted the button in the Slack message to trigger the GHA workflow in Repo2.

I wasn't able to find a solution to meet my needs for this. It is possible but the solutions I found required creating a server to handle the API call.

Instead of the button triggering the workflow, it just takes us to the workflow page in Repo2. From there we manually trigger the workflow.

Step 4: We click the button and are taken to the Repo2 GHA workflow page.

Step 5: From the actions page, we click the "Run Workflow" dropdown followed by the "Run Workflow" button.

Step 6: This workflow will create a new branch to update the app version, create the PR, and send a Slack message alerting us.

Step 7: After we merge the PR, Repo2's version should match Repo1's version.}

Final Thoughts

...Github actions is hard. I found it difficult to efficiently test and debug my workflows. Despite this, GHA is a powerful tool. I will continue to experiment with GHA. It's amazing the resources we have to automate the boring tasks so we can focus on building and creating products.

I'm happy I gave this a try. This project allowed me get more experience with tools that I don't touch that often. I'm also blown away with the extensive tools and features that Slack offers.

I'm confident there are many improvements to be made in this project. If you have suggestions please comment. My goal from this project is to get better!

Does anyone know how to resize images when writing an article? Setting the width and height in the markdown is not working.

Zach W. — Wed, 25 Jun 2025 13:24:07 +0000

Does anyone know how to resize images for articles? The below method is not working when I preview the article.

Zach W. — Wed, 25 Jun 2025 13:20:49 +0000

DEV Community: Zach W.

Automating App Version Update With Github Actions and Slack

Does anyone know how to resize images when writing an article? Setting the width and height in the markdown is not working.

Does anyone know how to resize images for articles? The below method is not working when I preview the article.