GitHub Repository Integration With VSTS CICD

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.
   
   
   
   
2. Map the repo to a local folder on your machine for code push and pull.
   
   
   
   
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.
   
   
   
   
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.
   
   
   
   
5. Once the zip is available in the folder, push new zip file to git using the command below.
   
   
   
   
   
   
6. Now, a new zip file should be available in your GitHub repo.
   
   
   
   
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.
   
   
   
   
9. Go to build tab in the menu and click New definition.
   
   
   
   
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.
    
    
    
    
    
    
    
    
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.
    
    
    
    
12. In the task, we will add Azure App Service deploy task.
    
    
    
    
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.
    
    
    
    
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
    
    
    
    
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
    
    
    
    
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.
    
    
    
    
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
    
    
    
    
    
    
19. If you browse your Azure website now you will see the text you updated in HTML
    
    
    
    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.