Integrating GitHub and VSTS Repository with Microsoft Teams using Office 365 Connectors

If your organization use Visual Studio Team Services (previously known as Visual Studio Online and Team Foundation Version Controller) or GitHub as source controller and owns an Office365 subscription, you can integrate your organization source controller with Microsoft Teams to enable project collaboration. This article will explain the step-by-step procedure to integrate GitHub and VSTS repository with Microsoft Teams workspace.

Microsoft Teams is a chat-based workspace in Office 365 that brings together the people, conversations, content, and tools teams need to collaborate. Teams enable you to create workplace chat, meetings, notes, files, etc. It is also possible to integrate third-party services using something called Office 365 Connectors. 

Office 365 Connectors are a great way to get useful information and content into Microsoft Teams. Any user can connect their team to services like Trello, GitHub, Bing News, Twitter, etc., and get notified of the team's activity in that service.

Preparation

Let's assume my organization is working on a project called Foobar. Foobar app will be created in two versions, the first one is a web application, and the second one is a Xamarin forms project. Let's give each of them a project name; FoobarWeb and FoobarXamarin. I am planning to use VSTS for FoobarWeb version controller, and GitHub for FoobarXamarin version controller.


FoobarXamarin GitHub repository at https://github.com/sangadji/FoobarXamarin

FoobarWeb VSTS repo at https://sangadjiprabowo.visualstudio.com/FoobarWeb

Connecting to GitHub Repository

GitHub connectors send notification about activities related to your GitHub projects that include:

  • Pull requests
  • Pushes
  • Issues
  • Commit comments
  • Issue comments
  • Pull request comments

Step 1: Add Github Connectors

On your Microsoft Teams window, select the three-dotted (...) icon next to the channel name you would like to add a GitHub connector, and select Connectors.

 

 On the Connectors selection menu, Add GitHub.

Step 2: Configure GitHub Connector

Add your GitHub account and select your preferred GitHub repository. 

Next, check notifications you would like to receive, and then click Save.

A message will appear on your channel chat window telling that you have successfully set up a connection to GitHub repository. 

Connecting to VSTS Repository

Visual Studio Team Services connector sends notification about activities in your projects. VSTS connector notifications are triggered by EventType that includes:

  • Build completed
  • Code checked in
  • Release abandoned
  • Release created
  • Release deployment approval completed
  • Release deployment approval pending
  • Release deployment completed
  • Release deployment started
  • Work item commented
  • Work item created
  • Work item deleted
  • Work item restored
  • Work item updated

Step 1: Add VSTS Connector

On your Microsoft Teams window, select the three-dotted (...) icon next to the channel name you would like to add a VSTS connector, and select Connectors.

 

 On the Connectors selection menu, Add Visual Studio Team Services.

Step 2: Configure VSTS Connector

Add your VSTS profile and select your preferred account. 

Next, select the project name and configure the EventType. For this tutorial, I chose Code checked in where I need to specify which path to notify. Click Save to finish.

A message will appear on your channel chat window telling that you have successfully set up a connection to VSTS repository. 

Testing The Connectors

Let's see the connectors in action. To test the GitHub connectors, clone FoobarXamarin repository from GitHub using Visual Studio. Make some changes, and then execute a sync (commit & push) command.

To test the VSTS connectors, map & get FoobarWeb repository from VSTS using Visual Studio. Make some changes, and then execute a check-in request. Your project team member should receive some notifications in a moment.