In previous post, we discussed about how to work with remotes in Git at command line. In this post, we are going to discuss how we can do the same from the very comforts of Visual Studio while we continue to host our source code on the GitHub. While it’s true that there is no command or built-in option available in Visual Studio to connect to GitHub, we can leverage one of the extensions available for GitHub.
Install GitHub Extension for Visual Studio
To search for this extension, let’s open Visual Studio first. From the tool bar menu, select Tools and then click on the ‘Extensions and Updates’:
From the left pane shown, click on the Online and then search for github from the right pane. This would prompt Visual Studio to search for relevant results from the marketplace and a list would be generated in the center pane. Out of the results shown, find the one named as ‘GitHub Extension for Visual Studio’ and then click on the download button just next to it:
This would take few minutes to download. To start with the installation process, we need to close Visual Studio and then follow the wizard.
Setup integration between Visual Studio and GitHub
For Visual Studio to be able to connect to GitHub, we need to provide it sign-in information. Go to Visual Studio -> Team Explorer and then click on the settings option. If you are not working on a solution inside Visual Studio, you will get the option of only Global Settings. If there is an existing solution already opened in Visual Studio, then you would get to see both Global Settings and Repository Settings:
The global settings would define the machine-wide settings for your user profile which then would be applicable to all git repositories. However, repository settings are scoped to only one git repository in reference. Let’s open Repository Settings, provide the username and email which match with our GitHub account and click Update:
Next, go to Home in Team Explorer, Manage Connections and then click on the sign-in next to GitHub:
It will prompt a window for you to sign-in to GitHub. Provide appropriate information and it will save the same.
Publish Source Code to GitHub
From the Team Explorer, go to Home and then go to Sync. In the menu shown, select ‘Publish to Github’:
I’ll use default settings in my case but you can change it as per your needs. After this, click Publish, which creates repository in GitHub, add remote to local repository and Push:
If everything goes fine, we should see a success message along with the url for the github repo inside visual studio itself:
At this point, we can either copy paste the link in the browser or just click it, which will open it in a browser and we should be able to see our code inside GitHub:
We can navigate around our code in the repository to verify that upload was successful. By default, it will sync only master branch. We’ll need to publish other branches, as and when we need the same.
Fetch Source code from GitHub
Let’s modify some files in the source code in the GitHub hosted code and then commit the same:
To fetch above change, go to Home icon in the Team Explorer, then click on Sync and then select Fetch followed by Pull:
Push Source code to GitHub
Let’s modify some code in the local repository inside Visual Studio and then commit the same:
To push above change, go to Home icon in the Team Explorer, then click on Sync and then select Push:
Alternatively, you can also select to do Sync, which will first perform Fetch, followed by Pull, followed by Push.
We can also verify from GitHub, if Push was successful or not:
Resolve merge conflicts
Merge conflicts are quite common if multiple developers are working for the same repository. This process is same irrespective of where you have hosted the centralized git repository. To know more on the merge conflicts and steps to resolve the same, click here.
Delete Remote information
Finally, let’s delete the remote. By this, we mean to remove the remote information only which is the equivalent of ‘git remote remove origin’. For this, go to Team Explorer -> Settings -> Repository Settings, and expand Remotes:
Click on ‘Remove’ to remove the remote.