This content originally appeared on DEV Community and was authored by Zach W.
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!
This content originally appeared on DEV Community and was authored by Zach W.

Zach W. | Sciencx (2025-06-27T18:25:17+00:00) Automating App Version Update With Github Actions and Slack. Retrieved from https://www.scien.cx/2025/06/27/automating-app-version-update-with-github-actions-and-slack/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.