GitHub Repository Integration with VSTS CICD

Introduction

I have been working for a while 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 in the last decade with the exponential growth of developers in the industry,  Microsoft has been  farsighted enough to know 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, 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  IDEA and also very popular with the open source community.  Along the 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 or 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, which we will version control in git and use VSTS CI to release in Azure Web App
   
   
   
   
4. Zip HTML file and push it to git repo. (I am using zip to just simplify the deployment in Azure, although in the 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 that location, and then adding a new zip file to a location with the latest HTML. CreateFromDirectory takes 2 parameters, first is a source which needs to be zipped and the second param is the destination where the new zip file will be saved, in my case destination is git clone folder.
   
   
   
   
5. Once zip is available in a 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. Login 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 a source, and authorize your account. Select 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, a basic task associated with 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 set up in Azure. This is simple --  just create a new Azure account (please do use the 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 and 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 the 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 will see that 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 that the new text updates to a web page.

Summary

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

G

M

T

Detect languageAfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu

AfrikaansAlbanianArabicArmenianAzerbaijaniBasqueBelarusianBengaliBosnianBulgarianCatalanCebuanoChichewaChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEnglishEsperantoEstonianFilipinoFinnishFrenchGalicianGeorgianGermanGreekGujaratiHaitian CreoleHausaHebrewHindiHmongHungarianIcelandicIgboIndonesianIrishItalianJapaneseJavaneseKannadaKazakhKhmerKoreanLaoLatinLatvianLithuanianMacedonianMalagasyMalayMalayalamMalteseMaoriMarathiMongolianMyanmar (Burmese)NepaliNorwegianPersianPolishPortuguesePunjabiRomanianRussianSerbianSesothoSinhalaSlovakSlovenianSomaliSpanishSundaneseSwahiliSwedishTajikTamilTeluguThaiTurkishUkrainianUrduUzbekVietnameseWelshYiddishYorubaZulu

Text-to-speech function is limited to 200 characters

Options : History : Feedback : Donate

Close