In an earlier article (Visual Studio Source Control With Git & Visual Studio Online) we discussed how to add an existing Visual Studio to source control using Git, including syncing with a remote Git repository on Microsoft’s Visual Studio Online website.

While perhaps not as common a choice as Dreamweaver or some other tools, one can use Visual Studio to manage non-ASP.NET website projects. One reason you might want to do this is to take advantage of Visual Studio’s built-in source control features. Dreamweaver has some basic source control features as well but relies more on external tools to manage everything. There are advantages and trade-offs either way, so it really kind of comes down to personal preference.

I recently decided to create VS projects to manage some WordPress plugins and themes, and I discovered that the process for getting everything going with Git and Visual Studio Online is a bit different and not as straightforward as one might like.

Install The Git Command Line Tools

Once again, since we may have some new people in the audience, before we do anything else, let’s make sure the Git command line tools are installed. Go to the View menu and select the Team Explorer item near the top. This will open the Team Explorer view if it’s not already open. Find that window and click the Home icon from the icons at the top, then click Settings in the next screen.

Once you’re in the Settings screen, near the bottom there should be a section labeled Git, and one of the links underneath it should be Install 3rd Party Tools. Click that and follow the prompts.

How To Git ‘er Done

There are many possible variations on the whole process that will work, but there are also some things that won’t work as you might expect if you have been using source control with ASP.NET web projects or non-web projects. Through trial and error, the method presented here seems to be the easiest and quickest method I’ve found.

You’ll want to start with an empty workspace in Visual Studio, no open project or solution.

This method starts by creating a local repository. Go to the Team Explorer window (select it from the View menu if it’s not already open), then to the Connect section by clicking on the electrical plug icon, or by clicking on the section title underneath the icon bar, which will bring up a menu with choices for the different pages of the source control management.

008

Once you’re on the Connect page, then under Local Git Repositories, click “New” and then select the path where your project will be located. At this point that should be an empty directory.

If you want to use an existing directory with files already in it, move them to a temporary location for now, because Git won’t allow you to create a new repository in a directory that already has files in it. (No, I dunno why. Seems dumb to me too, but I’d imagine there’s some reason that hasn’t yet occured to me.)

Once you have the path selected, click the Create button.

001

Now that the Git repository has been created, make sure it’s selected by double-clicking it in the list.

If you had moved the files from the specified directory out to a temporary location, now is the time to move them back. If it’s an empty project so far, then I recommend creating a simple text file named something like {project}.txt (with your project name) so that we can add it to the repository and kickstart things.

Now go to the File menu and choose Open->Website. Specify the same folder where you created the new Git repository. You should get a new solution with a single project/website listed, like this:

002

At this point, you should save your project. Select “Close Solution” from the “File” menu. You’ll get a message asking if you want to save. Save the solution file to the same folder where you created the new Git repository. You’ll probably want to also set the solution filename to “{project}.sln” or something else that makes more sense than “localhost_42341” or whatever other random name was created by Visual Studio.

Saving the solution file to the repository folder is important. If you save to a different folder, then the solution file itself won’t be able to be added to the source control project. That would be bad.

Once the solution has been saved and closed, reopen it. In the Solution Explorer, note the little plus signs next to the filenames. This indicates that the file will be added to source control with the next commit operation. However, since we just added an entire project, there may be files in the list that we didn’t want to include, so we’ll want to review everything and remove anything we don’t want to include.

Go to the Team Explorer window again, and click where it says “Connect”. A popup menu will appear. Select “Changes“.

003

At this point you’ll see that the “Included Changes” section includes all of the files in the project directory. However, there may be files that you do not want included in source control for one reason or another. Review the list of files and if you see anything that should not be included, click on it and drag it down to the “Untracked Files” section at the bottom. You can use control-click or shift-click to select multiple items at once before dragging them.

Now we’re ready to make our first commit to the repository. Scroll back to the top of the window and click in the yellow edit box where it says “Enter a commit message”. Enter something relevant like “Initial check-in of project”.

004

Once you’ve entered your message, click the “Commit” button. If all goes properly, you’ll get a message like “Commit eeaa0e65 created locally. Sync to share your changes with the server.

Before we can sync, we need to specify the remote repository with which we’ll be syncing. If you haven’t already created the project on Visual Studio Online, now is the time. Refer to the earlier article (Visual Studio Source Control With Git & Visual Studio Online) if you need information on doing that.

Once you’ve created the remote repository you’ll need the URL. You can get this from the “Code” section of the project on the website:

005

Go back to Visual Studio, and click on where it says “Unsynced Commits” at the top of the Team Explorer window. Then enter the URL in the yellow box under “Publish To Remote Repository“.

006

Click the “Publish” button and it will start uploading your files from the local repository to the remote server. This may take awhile, depending on how many files there are and your connection speed. Eventually you should get a message telling you that the publish is completed.

Now, when you commit changed files to the local repository, you can sync to the remote server by hitting the “Sync” button after the commit operation finishes.

That’s pretty much it as far as getting everything working with source control is concerned. Have fun!