Intranoggin

Blither, Blather, Web Content Management.
Blog » Synchronizing code between GitHub and VSTS

Synchronizing code between GitHub and VSTS

Since I decided to make my AlexaFunctions open source, I wanted to host them on GitHub. However I also wanted to keep the code on VSTS where I store all my other personal projects and use other VSTS features.  With all the integration and web hooks integration that GitHub and VSTS have built in, it seemed like it should be fairly simple. It was actually, but not all that straightforward.

 

The general idea is that when code is checked into my GitHub repository a trigger is sent to VSTS which is listening on a web hook. VSTS then kicks off a build which pulls code from GitHub and pushes it into VSTS. Here’s the complications:

  • The hosted build runs in a clean environment every time so you have to also pull code from VSTS.
  • Maybe I’ll eventually have an update to the code directly in VSTS. In this case, I’ll want to sync this change back to GitHub, so I’ll need to push not only to VSTS but to GitHub.

Thanks to Martin Hinshelwood. His article on NakedAgility was a big help. https://nkdagility.com/open-source-vsts-tfs-github-better-devops/

 

Initially, Create your repository in GitHub and get your code pushed up there.

Then create a new project on VSTS – be sure you set Git as your version control system. Once your project is created, you can navigate to it’s code tab. When your repository is empty like this, you’ll get the option to import a repository.

image

Clicking that button will give you a simple import dialog where you can paste in your GitHub repository URL.

image

Now your repositories are synchronized. we just need to implement the steps to keep them that way.

Generate Personal Access Tokens for both GitHub and VSTS put them aside in Notepad for now, we’ll use them later.

In GitHub go to your Settings.

image

Then on your Personal access tokens tab, click Generate new token

image

Give the token a description and access to your repo

image

Then copy the token it generates for you and keep it for a step a little later.

We follow a similar process to create our VSTS token. From your profile menu, select Security.

image

Then on the Personal access tokens tab, click Add

image

 

Give your token a description, set an expiration, and in the selected scopes, grant it access to your code. Then hit the create token button and also store this token to the side for later.

image

Now we’re ready to create our VSTS Build definition. Navigate to your destination project in VSTS and click on the Build & Release tab. Then click the +New button.

image

In the dialog, double click the Empty entry at the bottom.

image

Select GitHub as the repository source, check Continuous Integration, and make sure the Hosted agent is selected before hitting Create. This will automatically create the web hook in GitHub that triggers this build for us when new code is pushed to that repository.

image

On the Variables Tab, add two variables, GitHubToken and VSTSToken. Paste in the Personal Access Tokens you generated earlier and click the little lock symbol to encrypt them.

image

 

In the Repository tab, Click on the Manage link (your other fields on this page will currently be blank). This will open a new window to the services tab.

image

From the New Service Endpoint drop down, choose GitHub

image

On the popup, click to Grant Authorization and give the connection a name. Once the Service Endpoint is created, you can close that tab. Back in the repository tab, click the refresh button to fill in the drop down lists.

image

Almost Done – promise.

On the Build Tab, click Add build step

image

In the popup, click the All tab, scroll down to Command Line, and click the Add button 4 times to add 4 command line steps.

image

For each of the 4 steps, click the little edit icon next to its name and name them Pull from VSTS, Pull from Github, Push to VSTS, and Push to Github.

image

In Pull from VSTS, enter git as the tool and set the argument to pull https://$(VSTSToken)@intranoggin.visualstudio.com/_git/AlexaFunctions master

Note this is the url of the VSTS repository with the variable we created for our our personal access token.

image

For Pull from Github, it’s the same command but are pointing at our Github repository. We don’t need a personal access token here, because it’s a public repository.

pull https://github.com/Intranoggin/AlexaFunctions.git master

image

For Push to VSTS, again set the tool to git. the argument is push https://$(VSTSToken)@intranoggin.visualstudio.com/_git/AlexaFunctions head:master

note the url again uses our variable.

image

Push to Github also uses tool=git and argument=push https://$(GithubToken)@github.com/Intranoggin/AlexaFunctions.git head:master

We can’t push to Github without being authorized, so here’s where we use the variable for the GitHub personal access token we created earlier.

image

And FINALLY, click save.

image

From here on out, any time you check code into GitHub, it should automatically synchronize that code here to VSTS.

You can also kick it off manually by clicking the Queue new build button

image

Doing so will kick the build off and show you all of its output in a browser based commandline. If you’re having any trouble and your builds are failing, this is how you can troubleshoot the issue.

image


Posted: 2/7/2017 7:00:00 AM by Ryan Miller | with 0 comments
Filed under: GitHub, VSTS