November 16, 2016
How to Integrate Slack with VSTS
A Visual Step-By-Step Guide
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.
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.
Interested in learning more about VSTS? Contact Us for More Information.