How to Integrate Slack with VSTS

  • 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.

    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 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- 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.