How To Integrate Slack With VSTS

Abstract

All software development teams use some sort of team communication tool. Like many team messaging tools, Slack is one of them. What I like most about Slack is, its ability to gel with VSTS (Visual Studio Team Services) and send notifications when an event is triggered. For example, a Pull Request is created, or build succeeded, or failed etc.

Note- VSTS was previously known as VSO, i.e. VSO is renamed to VSTS.

Introducing Slack

Slack is a widely used messaging application (web / desktop). It is used by many mission-critical projects including Mars Curiosity Rover robots. In terms of software development, Slack is very handy and efficient to notify when a VSTS event takes place. This feature reduces explicit team communication with peers that a Pull request is created and someone needs to look at that, etc.

Let’s preview the final outcome

Our objective is to empower the software development team(s) by enabling them to collaborate not only with peers but also with tools and services (VSTS in this case), and get immediate notification for any status updates instead of emailing or pinging someone in person. For instance, “Hi, Vidya Vrat. I have submitted a pull request.”

Now, this article will show you step-by-step procedure to achieve Slack integration with VSTS and receive message, as shown in the figure 0 below.


Figure 0 – Slack channel showing message received from VSTS

Create a Team on Slack

The first step is to create a team (if not already) on https://slack.com. Click on “Create a new team” and enter a valid email-id which you have access to, as shown in figure 1 below.


Figure 1- Slack.com main page to create a new team

When you click on “Create New Team”, then you will be taken to a confirmation page.


Figure 2 - Page to enter the confirmation code

Check your email which you have entered while creating a team and you shall see an email with Slack confirmation code, as shown in figure 3 below.


Figure 3- Slack Confirmation code email received

After successful validation of confirmation code as asked in Figure-2, the next step will be to enter your name and username etc.


Figure 4- Personal details

Next, enter the team information, as shown in Figure 5 below.


Figure 5 - Team information

Enter your company information when asked in figure 6 below.


Figure 6 – Company name

Next step will be to enter your company domain. It is OK to enter a domain name which is not registered or you don’t have plans to register.


Figure 7 – Company web domain info


Figure 8 – Team invitation

If you don’t want to invite people now, click "Skip"; and you will be taken to Slack Team for DotNetPassion, as shown in the figure 9 below.


Figure 9 – DotNetPassion Slack Team page

Channel Creation on your Slack Team

Once your team is created, the next step is to create a channel, which people will join and exchange messages on. Click on the + symbol, as shown in the figure 10 below.


Figure 10 – Creating channel under team

Choose channel name and purpose etc.


Figure 11 – Enter channel details

Clicking on “Create Channel” will create the channel named “pull_requests” under your team “DotNetPassion”, as shown in the figure 12 below.


Figure 12 – Successful channel creation

Integration with VSTS

Click “Add an app" or custom integration link on your Slack Channel page. Then, select Developer Tools >> VSTS, as shown in figure 13 below.


Figure 13 – Adding an app integration

Selecting Visual Studio Team Services will take you to the next steps of installation.


Figure 14 – VSTS Integration page

Click on "Install" to begin the integration procedure.


Figure 15 – Selecting channel name.

After clicking on “Add Visual Studio Integration”, you will see step-by-step Instructions to configure your VSTS for Slack integration.


Figure 16 – VSTS setup instructions

Getting the Webhook URL.


Figure 17 – Wikipedia Webhook definition

Scroll down on this page to see the integration Settings and get the “Webhook URL” as shown in Figure 18 below. This Webhook URL is the most important piece of information to complete VSTS and Slack integration. Either keep this page open, or copy and paste in notepad etc.


Figure 18 – Webhook url

Now, open a new Tab in your browser, log into your VSTS account, and navigate to your code Repository, as shown in figure 19 below.


Figure 19 – Code repository in VSTS


Add VSTS Service Hook

From your VSTS code repository’s setting page, click on Service Hooks.


Figure 20 – Adding a VSTS Service Hook

Click on + to add a Service hook and choose Slack.


Figure 21 – Using Slack for Service Hook Subscription

Next, you need to select the Trigger and repository settings etc.


Figure 22 – Selecting Trigger settings

Next, confirm Action and Webhook URL.


Figure 23 – Confirming Action with Webhook url

Now, click on "Test" to verify and test the VSTS integration, as shown in figure 24 and 25 below.


Figure 24– Test integration with VSTS


Figure 25 – Test message from VSTS delivered in slack channel

Now, switch back to the VSTS Integration page and click Finish, as shown in figure 26 below.


Figure 26 – Slack Integration Finish page

After Finish, you will be taken to VSTS page. There, you can see that the Service Hook for Slack is added.


Figure 27 – Service hook for slack added in VSTS

Let’s Submit a Pull Request

In Visual Studio’s Team Explorer, connect to a VSTS Git Repository.


Figure 28 – Connecting with VSTS

Open the solution and make some changes, as shown in figure 29.


Figure 29 – File changes in Visual Studio

After you Submit a new Pull Request, Slack will receive a notification, as shown in figure 30 below.


Figure 30 – Slack received VSTS Pull Request message

To navigate to Pull Request, you can click on the pull request link in the message (pull request 3) and it will take you to the VSTS. If all looks good, you can take next action steps(s).


Figure 31 – Navigation to VSTS page from Slack message.