Work with GitHub repositories using Git menu of Visual Studio

Visual Studio 2019 now presents a new Git menu and improved source control experience. It is worthwhile for any beginner in ASP.NET Core 5.0 to familiarize themselves with these new features. To that end this article takes a quick look at some of  the common options available as a part of the new Git experience.

Let's get going!

Begin by creating a new ASP.NET Core MVC project named HelloGitHub using Visual Studio.

The following figure shows this newly created project in the Solution Explorer. 

At this stage HelloGitHub is not under any source control. Let's use Git as the source control mechanism.

You will notice that there is a new top level menu called Git. Opening the menu will reveal the following menu options.

First we will create a Git and GitHub repository for the HelloGitHub project. To do so, click on the Create Git Repository menu option. This will open the following dialog.

Notice several sections of this dialog. The Local path is where your local Git repository gets created. Typically your project's local folder will be selected here. Under that folder a .git subfolder gets created for the local Git repository.

To create a GitHub repository you need to sign-in using a Microsoft Account or GitHub Account.

You can also specify a repository name. By default project name is used as the repository name. Also, by default the Private repository checkbox is checked indicating the repository is going to be a private one. Uncheck it if you want to create a public repository.

At the bottom of the dialog you can also see the URL of the GitHub repository.

Click on Create ad Push button to create the new repository and push all your code to it.

After successfully creating the repository your Solution Explorer should display locks for all the files that are now added to the source control.

Just to confirm that a new GitHub repository has got created, go to your GitHub account. You should see the newly created repo there.

As you can see, a private repo named HelloGitHub exists under your GitHub account.

Now let's make some changes to our code and push it to the HelloGitHub repository.

Open Index.cshtml file from Views folder and modify it as follows:

@{
    ViewData["Title"] = "Home Page";
}

<h1>Hello from new Visual Studio Git experience!</h1>

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com
/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

Save the file. Then click on the Git menu and select Commit or Stash menu option.

This will open Git Changes window as shown below:

Here, you can specify a commit message and click on the Commit All and Push option. This will commit all the changes to local repository and also push them to GitHub repository.

After a successful push your GitHub repo should reflect the change. 

Now let's see how to Pull from GitHub repository. First we will do some modifications to the Index.cshtml file outside Visual Studio and then we will pull the changes using Visual Studio.

Go to your repository using GitHub web interface and change Index.cshtml (you can change the heading we added previously) using the Edit option.

At this stage your local Index.cshtml won't have the changed content. Click on the Git menu and select Pull menu option. 

The changes will be pulled from the remote repository and local Index.cshtml will now reflect the changes.

Next, go to web interface again and change Index.cshtml yet another time. Also change the local Index.cshtml in Visual Studio IDE and commit the changes to local repository. At this stage your remote Index.cshtml have some changes that weren't pulled into your local version. And now you have changed the local version and are trying to update the remote repository.

When you try to Push the changes you will get an error.

As you can see, VS detected that there some conflict between local and remote code and it asks you to Pull the remote code first before you push.

Click on Pull and Push button. You will get this message in Git Changes windw:

The VS editor will also have Open Merge Editor option as shown below:

Click on it will open another window that highlights the conflict from local and remote files.

This windows has three sections - remote file on the left side, local file on the right side, and the final result based on your action at the bottom.

Suppose we want to keep the changes from our local file. So, check the checkbox from the right side pane. The result pane will reflect the final outcome. Then click on the Accept Merge option at the top.

Finally, try to commit and pull the code again. This time it will successfully take the local changes to the GitHub repository.

The Git menu also allows you to view history and manage branches. For example, the following figure shows Manage Branches window.

Let's conclude this article by learning how to Clone a Git repository using Visual Studio.

Click on the Clone repository menu option.

This will open the following dialog:

Here, you can either enter URL of a Git repository to be cloned or you can also browse from GitHub using one of the Browse a repository options.

For this example I am going to enter URL of the HelloGitHub repository we created earlier. The Path textbox is where you specify a local folder to keep the repository files.

After clicking on the Clone button VS will do the needful :

and will load the project in Solution Explorer.

You can now work with the project and do all Git operations as discussed earlier.

I hope you got some idea about the new Git experience offered by Visual Studio. To read more go here.

That's it for now! Keep coding!!