Enable Slack Notifications for Amplify Builds Directly to a Slack Channel

Mark Orina - Aug 19 - - Dev Community

Introduction:

Amplify notifications allow you to receive real-time updates about your Amplify application deployments. This guide demonstrates how to set up Slack notifications to receive messages directly in a designated Slack channel whenever your Amplify builds are successful (or unsuccessful, depending on your preference).

Amplify notifications --> SNS --> Slack Channel

Benefits of Slack Notifications:

  • Stay informed: Get notified about build statuses without manually checking the console.
  • Improve team communication: Keep your team updated on deployment progress.
  • Faster issue identification: Quickly identify potential issues with failed builds.

Set up Slack

We need a webhook from Slack that AWS SNS will use to communicate with Slack

1.Create a Slack Channel:
*Designate a specific channel to receive Amplify build notifications (e.g.,#test24).

2.Build a Workflow:

  • Go to your Slack workspace and navigate to Tools & Settings > Workflow Builder. Slack Work Flow
  • Click New Workflow and choose Build a workflow. New-slack-workflow
  • Name your workflow appropriately (e.g., amplify-build-notifications). slack workflow
  • Under "Choose a trigger", select From a webhook. *Click on the untitled and name your workflow appropriately. I will call mine: #test-24

*Just below the start of the workflow click on Choose Event and then click on From a webHook.
workflow-event

  1. Set Up Variables: You will need to add a data variable we will use with AWS SNS.
  • Click on Set Up Variables.
  • Create a variable named SubscribeURL with a " Text " data type. This will store the webhook URL from Slack. Data type: Text (as the payload from SNS will be text)

Image description

Click done and then continue.

4.Get the Webhook URL:

  • Click on Starts with a webhook again.
  • Scroll down and locate the Web request URL. Copy this link.

5.Send Message to Channel:

  • Click Add a step.

    • Search for "Send to channel" and choose the desired channel (e.g., #test-24). Image description

*Then on Add a message area click on Insert Variable at the bottom right and choose: 'SubscribeURL'.
*Make sure to add a word before the variable like Here.
Click save.

Image description

We are all set. Click on finish up and publish.

Configure Amplify Notifications:

Let us go to our AWS console especially where you have set up your Amplify app.

6.Add Email (Temporary Step):

  • In the AWS console, navigate to your Amplify app.
  • Go to App > Hosting > Build notifications.

Click on the app click on hosting and go to Build notifications.

Image description

What this does is it creates an SNS topic and subscribes the email to it.

Take note of the arn on the email as you subscribed.

  1. Subscribe Webhook to SNS:

Let us go to AWS SNS to find the new Topic created.

  • Go to the AWS SNS service.

  • Scroll down to the Subscriptions area where you will see the email you used to subscribe to earlier.

    • Locate the SNS topic created in step 1 (refer to the noted ARN).

We will now add another subscription by clicking on Create Subscription.

  • Click Create subscription.
    Image description

  • Choose HTTPS as the protocol.
    Copy the webhook we created from Slack earlier in the blog.

  • Paste the copied Webhook URL from Slack into the Endpoint field.

Image description

  • Click Create subscription.
  • You'll see a pending confirmation status.

Image description

Confirm Subscription in Slack:

  • In your Slack channel, you'll receive a message with a subscription confirmation URL.
    Image description

  • Copy the URL.

Go back to your SNS topic go to the subscription that is pending and click on confirm subscription.

  • Go back to the SNS topic subscription in AWS and click the confirmation link.
    • Paste the copied URL from Slack and click Confirm subscription.

Image description

Testing and Verification:

*Go back to the workflow and update another variable.
Click on the edit button of Start with a webhook.

Image description

*Add a new variable called Message and save.

Image description

*Click on Send a message to the channel and add the new variable.

Image description

*To test and see if it works redeploy your amplify application.

Image description

By following these steps, you'll have a seamless setup for receiving Amplify build notifications directly in your Slack channel, keeping your team informed about deployment progress.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .