Tuesday, January 31, 2017

Utilize Visual Studio 2015 with GitHub extension to improve development efficiency

After our source repository migrated to GitHub, SharePoint developers started to use either Git window commends or SourceTree to manage the source code while developing projects inside Visual studio.

The major issue for Visual studio will not be able to identify which branch you are and difficult to switch branches. Developers had hard time to jump around different tools during the development phase and merge release phase. Since Visual studio 2015 has much better GitHub extension, my goal is to education all developers to utilize the Visual studio 2015 with GitHub extension to manage the day to day development for GitHub projects. We will cover the following topics.
  • Install GitHub extension
  • Create local project and add to location GitHub
  • Create Github new project and publish local project to remote GitHub
  • Check whcih branch you are working on
  • Create local branch and sync to remote Github
  • Verify local changes and push local change code to remote
  • Tog between branches
  • Merge branches
  • Clone project and different branches to local
  • Pull changes from remote GitHub to local
  • Checkout from remote GitHub branch

1. Install GitHub extension.
If you have Visual Studio 2015 already installed, you could install it two different ways.
  • Install from GitHub extension for Visual Studio and install separately
  • Click Visual Studio 2015 Tools -> Extensions and Updates. Search Github and install “Github Extension for  Visual Studio”

If you have not install Visual Studio 2015, you can select Visual Studio custom installation and select GitHub component as in this blog.

2. Create local project and add to local GitHub
Create a SharePoint Ad-in SharePoint hosted demo project named “SharePointGitHubDemo”. Right click the project and click “Add Solution to  Source Control …”
You will find the files inside Visual Studio will have an locker icon on and local .git folder created to complete the local GitHub configuration.

In Team Explore view, you can also see local Git repository project listed.





3. Create Github new project and publish local project to remote GitHub
In Team Explore view, Click “Connect…” and then “GitHub Enterprise”. Under GitHub user name, password, and the GitHub Enterprise server url such as  “https://github.mycompany.com/”. You will connect to the remote Github.





Make some changes to some files and right click the "commit" from project explore on the file. You will be redirect to change page and “Commit All and Push” will push all changes to Github if you have the remote Github project created in advance. Otherwise, click “Sync” and then “Publish to GitHub”. Fill in the project name, description, and the organize name of the project. Click “Publish” button. New GitHub project will be created and code will be pushed.

4. Check which branch you are working on.
In Team Explore view, click “Home” icon and then “Branches”. The branch you are on is the one highlighted. The example below shows you are working on "develop" branch.



5. Create local branch and sync to remote Github
In Team Explore view, click “Home” icon and then “Branches”. All the branches will be displayed. Right click the branch you would  like to branch out like “master” branch and select “New local branch from”. Enter the name of the branch and create. The new local like “newBranch” branch will be created.

Update some files and then click “Sync”. Then the “Push” under “Outgoing Commits”. You may need to click “Publish” if this is the first time to commit to remove. The develop branch changes from local will be pushed to remote “newBranch” branch.


After the sync, the icon on the file will changed to "Checked in".

7. Tog between branches
In Team Explore view, click “Home” icon and then “Branches”. Double click the branch you like to go. The branch will be highlighted.

8. Merge branches
In Team Explore view, click “Home” icon and then “Branches”. Click the "merge" link. You can select the branch you like to merge into the current branch. In this example, we will merge "develop4" branch into "master".



9. Clone remote GitHub project and different branches to local
In Team Explore view, click “Home” icon and then “Manage Connections” icon. Click "Clone" under "Local Git Repositories". Enter the Github project URL and local GitHub project location. Click "clone" and you will have the project cloned in local.


The default branch on the local will be master branch. You will need to right click project and "New branch from..." and then select the branch from GitHub you like to create to your local. You can pull all different branches you are interested in to your local.

10. Pull changes from remote GitHub to local
After you clone the local branches, you might want to make sure you have the latest code. You can do this in Team Explore view, click “Home” icon and then "Sync". Click "Pull" to pull all changes from Github to local. 

Click "Home" icon and double click the project at the bottom. The project will be open in "Solution" explore from local.

11. Checkout file change history
In "Solution Explore" view, right click the file and then "View history". You can see the change history.



At this point, you should be able to use Visual Studio for your development and integrate with GitHub without leave Visual Studio. We can also use Visual Studio to ingrate with "Team Services' for CI and CD.

One action from GitHub that is normally we use at end of the development phase is to add release tag. I'm not able to find how to do it directly from GitHub extension at this time. You can find other Visual Studio 2015 update 3 new features here.


No comments:

Post a Comment