Netlify and CircleCI on the other hand was not ready to plug & play. Hangouts Chat has its very good webhooks api. So I started to look for the possible solutions of sending post test / deploy notifications from CircleCI. Though haven’t find a good way with 2.0 api.
However I found out workflow steps can be limited to run on success and fail statuses with when attribute.
So I have managed to post messages after successful and failed builds with curl.
Yes, Chat has handsome card messages via webhooks api.
Configure Webhook
- In a Chat room click to top most room menu, and select “Configure Webhooks”.
- Click Add another.
- Fill the form and done.
You can copy the newly added webhook URL. And you should see the docs.
Configure CircleCI
Following is my config.yml to build and deploy our application whenever a git tag is pushed. Last two steps were added to send build status notification that is seen above.
version: 2
jobs:
deploy:
docker:
# little bit tuned node image with git & curl
- image: ifenerji/node-alpine-git:latest
working_directory: ~/repo
steps:
- checkout
- run:
name: Install global dependencies
command: 'npm install -g parcel-bundler gulp karma-cli netlify-cli'
# Download and cache dependencies
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package.json" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- run:
name: Install dependencies
command: yarn install --ignore-scripts
- save_cache:
paths:
- node_modules
key: v1-dependencies-{{ checksum "package.json" }}
# run tests!
- run: yarn test
- run:
name: Build
command: yarn build
- deploy:
name: Deploy
command: yarn deploy
- run:
name: Chat Notification Fail
when: on_fail
command: >
curl --header "Content-Type: application/json"
--request POST
--data "{\"cards\":[{\"header\":{\"title\":\"Oops. Build ${CIRCLE_BUILD_NUM} failed.\",\"subtitle\":\"${CIRCLE_PROJECT_REPONAME}\",\"imageUrl\":\"https://png.pngtree.com/svg/20170406/icon_failed__1325447.png\",\"imageStyle\":\"IMAGE\"},\"sections\":[{\"widgets\":[{\"keyValue\":{\"topLabel\":\"${CIRCLE_TAG}\",\"content\":\"${CIRCLE_SHA1}\"}}]},{\"widgets\":[{\"buttons\":[{\"textButton\":{\"text\":\"DETAILS\",\"onClick\":{\"openLink\":{\"url\":\"${CIRCLE_BUILD_URL}\"}}}}]}]}]}]}"
$CHAT_WEBHOOK_URL
- run:
name: Chat Notification Success
when: on_success
command: >
curl --header "Content-Type: application/json"
--request POST
--data "{\"cards\":[{\"header\":{\"title\":\"Build ${CIRCLE_BUILD_NUM} passed.\",\"subtitle\":\"${CIRCLE_PROJECT_REPONAME}\",\"imageUrl\":\"https://png.pngtree.com/svg/20170510/success_404253.png\",\"imageStyle\":\"IMAGE\"},\"sections\":[{\"widgets\":[{\"keyValue\":{\"topLabel\":\"${CIRCLE_TAG}\",\"content\":\"${CIRCLE_SHA1}\"}}]},{\"widgets\":[{\"buttons\":[{\"textButton\":{\"text\":\"DETAILS\",\"onClick\":{\"openLink\":{\"url\":\"${CIRCLE_BUILD_URL}\"}}}}]}]}]}]}"
$CHAT_WEBHOOK_URL
workflows:
version: 2
build-n-deploy:
jobs:
- deploy:
filters:
branches:
only: do-not-build
tags:
only: /[0-9]+(\.[0-9]+)*(-\w*)*/You probably noticed the environment variables like $CIRCLE_CI_BUILD_NUMBER. Those are exposed in CircleCI build environment. And here you’ll find all of them documented.
There is also $CHAT_WEBHOOK_URLvariable. As expected, this is the URL of webhook we just added one step before. It can be exposed with CircleCI project settings page.