GitHub Repository Integration With VSTS CICD

I have been working for awhile on Microsoft ALM tools. It is an awesome experience to explore and integrate different MS tools, such as VSTS CI, Release Management etc. Since the developer community has been exploding with an exponential growth of developers in the last decade, Microsoft has forseen that if it wants to stay in the game for long and climb up the ladder, they will have to focus on non-Microsoft technology devs, such as Ruby, Java, and PHP etc.

GitHub Repository Integration
Introduction

I have been working for awhile on Microsoft ALM tools. It is an awesome experience to explore and integrate different MS tools, such as VSTS CI, Release Management etc. Since the developer community has been exploding with an exponential growth of developers in the last decade, Microsoft has forseen that if it wants to stay in the game for long and climb up the ladder, they will have to focus on non-Microsoft technology devs, such as Ruby, Java, and PHP etc.

In order to align with this ideology, Microsoft is investing enormously on integrating open source languages and technology. A great example of this is VS Code which is an open source IDE and also, a very popular one with open source community. Along the same lines, in order to provide a seamless experience to both MS and non-MS developers, they are also working on integrating ALM for every support language and technology.

In this blog, I will walk you through how GitHub Repo can be integrated with VSTS CI and CD.

  1. Create a new GitHub repo. You can even use an existing one.

    GitHub Repository Integration

  2. Map the repo to a local folder on your machine for code push and pull.

    GitHub Repository Integration

  3. Create a simple HTML file in the repo mapped folder, in which we will perform version control in git and use VSTS CI to release in Azure Web App.

    GitHub Repository Integration

  4. Zip HTMl file and push to git repo. (I am using zip to just simplify the deployment in Azure, although in real-world, VSTS CI produces a zip file for every successful build artifact). In the below code at line 1, we are deleting any existing zip files in lthe ocation, and then adding a new zip file to a location with latest HTML. CreateFromDirectory takes 2 parameters, first is a source which needs to be zipped and the second param is a destination where the new zip file will be saved. In my case, destination is git clone folder.

    GitHub Repository Integration

  5. Once the zip is available in the folder, push new zip file to git using the command below.

    GitHub Repository Integration

    GitHub Repository Integration

  6. Now, a new zip file should be available in your GitHub repo.

    GitHub Repository Integration

  7. Let's set up a VSTS project and configure a CI. Create a Microsoft account using Hotmail or outlook if you don't have one.
  8. Log on to VSTS and create a new project.

    GitHub Repository Integration

  9. Go to build tab in the menu and click New definition.

    GitHub Repository Integration

  10. Configure build definition, select Github as the source, and authorize your account. Select the repo in which you want VSTS, to keep pinging for any new changes and finally select branch.

    GitHub Repository Integration

    GitHub Repository Integration

    GitHub Repository Integration

  11. From the listed template you have a wide range of options to select. Once you select a template, the basic task associated to the template will automatically be added; e.g., if you have a .NET project in git repo you can add ASP.NET template which will add tasks such as Nuget restore, MSBuild, Publish will be added. In our demo, we will add an empty task.

    GitHub Repository Integration

  12. In the task, we will add Azure App Service deploy task.

    GitHub Repository Integration

  13. In order to configure this task, you need to have an Azure web app setup in Azure. This is simple -- just create a new Azure account (please do use same Hotmail/outlook account details as created in step 7, this will make things easy in step 14), you will get $250 credits to your subscription as complimentary for the first month. Add a new Web App.

    GitHub Repository Integration

  14. Next, you need to link your Azure account to VSTS. In Azure subscription item under Azure App Service Deploy task. Click Manage. Click new Service endpoint select Azure Resource Manager

    GitHub Repository Integration

  15. Once your Azure account is connected to VSTS, you can access all resources in your Azure subscription using server endpoint created in VSTS. Configure task items as below

    GitHub Repository Integration

  16. Go to trigger tab in Menu and Enable Continuous Integration. Save the definition.
  17. Edit HTML file in step 3, update text to CICD DEMO1 and save file.

    GitHub Repository Integration

  18. As soon as you do your next push in GitHub repo, for the HTML change as explained in step 4,5,6, you see a new build will be triggered in VSTS

    GitHub Repository Integration

    GitHub Repository Integration

  19. If you browse your Azure website now you will see the text you updated in HTML

    GitHub Repository Integration

    You can try again by updating text in HTML and then pushing the new HTML to git. Once the CI is completed in VSTS you will find new text update to web page.

Summary

Integration of GitHub with VSTS is really valuable, as we have a lot of integration options available now the sky is the limit.