Wednesday, May 13, 2015

Building a Blog - Setting up Visual Studio with Git

We have our Git repository in the cloud waiting for our Blog Project to arrive. I hope you have saved your link to the repository you have created as you will need it now when we set our Blog Project to work with, using Visual Studio Express 2013 for Web. I can't think of anything else worth mentioning before we do this, so lets just get on with it.

Launch up your Microsoft Visual Studio Express 2013 for Web, which, if you haven't you can download here: Visual Studio 2013 for Web

1. Once you open it, you should check for additional updates if there are any, and then click on the new project. Once you do that you will get this window:


New project in Visual Studio 2013

As you can see I've chosen on the left panel Visual C# and then ASP.NET Web Application and gave it the name BlogProject_Dusan_MVC. Again, I am using my personal name as I am building blog for myself, but you can give it your name or whatever name you like. But! As you can see I marked red to check the "Add to source control" option. We need to check this so that we can use our project with our Git repository. Click Okey and then you will get a screen like this:


Choose a template in Visual Studio 2013
You have a few templates that you can choose to start upon. Since my goal is to build the blog from scratch using MVC technology, so my template is going to be Empty. But once I select Empty, I must choose core references for MVC. So do that. Select Empty, then check with the MVC, check box. Click Okey and VS2013 will start making your project folder. Once it is done, you should get something like this:


Source Control in Visual Studio 2013

As you might have guessed, yes, we are choosing Git. This window is asking us to choose source control that we have selected to Add in one of the two previous windows. Click Ok.

You should have now in your Solution Explorer of VisualStudio something like this:

Solution Explorer in Visual Studio

As you can see your project folder is quite empty and it only has a necessary files and folders needed to use MVC technology. We won't do anything here in Solution Explorer tab, but instead we are going to Team Explorer tab.

Team Explorer in Visual Studio
This tab allows us to make changes to our repository, see the branches of the repository and commit every change we do for our project to the repository. Right now we just want to get our project to the repository so click Settings first.

Team Explorer Git Settings


In this window you should set the user name you are using on your github.com and email address you have registered with on the github.com. But also you should set a Local Repository location. As you can see on the picture I have pretty much default value. Now click on the Home button in the Team Explorer tab and lets go to Unsynced Commits:

Team Explorer Unsynced Commits

As you can see we are being asked to enter our Remote Repository where we will be publishing our project and changes we make to it. So if you remember your link or still have it written somewhere, you should get that link from your repository on github.com. Copy-paste it or just write it out inside the field and click publish. After that you should get a window like this:


Connecting to github.com in Visual Studio

It is asking you for the user name and password you have registered on the github.com. So do write in those and click Ok. If you have entered the proper username and password you should get in Team Explorer notification like this:

Notification for remote connection


Now if you go to your repository on the github.com you should see you have those files that otherwise would be confusing to explain what are they for. I know some people would say "oh well you didn't have to do it that way" but I am really trying to make things as simple as they can get and to also have sense in how they work. So if you go to the repository on github.com you should see something these files:

Github.com Initial repository files

You can see that we have only 2 files that are Initial repository files. Our project is not there yet as we didn't do any Commits that included project files, but rather an Intial Commit that just established connection with our VisualStudio. So lets add those project files.

Go back to Visual Studio Express 2013 for Web and go to Team Explorer and click that Home button again and choose Changes. You should see something like this:

Team Explorer Changes



As you can see, you have 11 Included Changes.

========================================================================
ADDITIONAL INFO: When you created a project in Visual Studio selecting the AddSourceControl you already created a local repository. Once you have connected to a remote repository, you've done the commit of that local repository which basically had only those 2 files you previously saw on github.com. Once you actually ended up choosing the Templates before you created a project in Visual Studio 2013 and then pressing Okey, it is the moment when you actually added the files to the repository and that is why you see those 11 Included Changes. There are other ways you can get repository ready for your project. Like getting that default Initial repository files on the github.com first, and then downloading it to your local repository, but if i would have said this earlier it would be hard to explain what is actually happening.
================================================================

The additional info is just there in order to try clearing out what has actually happened and why do you see the things you see in Team Explorer. You don't need to bother about that additional info as I said there is two ways you can get your repository ready. The way I have shown you, is the way that makes the most sense to me and the way I understand why it works the way it works.

Anyway, back to Team Explorer. You have a yellow field saying "Enter a commit message <Required>". You should always write a commit message when you are committing a new set of changes. Since our change right now is the project files and folders being added to the repository I will write "Getting the project files to the repository" and click Commit.

As you can see, you get info in Team Explorer saying that you just made a commit to local repository. If you want to upload local repository the way it is now, meaning with all the files you've just added to it, sync your changes with the server. You can go back to Unsynced commits now and choose Sync, or just click on that warning Sync. If everything done right, it should notify you about our success.Now if you go to github.com and check your repository, it will have the folder with the files of our project.

Project Uploaded to Repository

So there you go, you've set, Git and Visual Studio and now you are ready to always back up your latest changes that you are working on your project. The good thing to remember is to write out the README.txt file in your repository, on the github.com so that if in any case you want someone to work with you on your project they can read what is it about.

I know I haven't covered branches for Git, but I will do so once we get to do specific parts of the application. For now you should have in mind that branches allow different people to work on specific parts of your project without any interference with what you are doing.

In the next post we will work on getting Blog name and Posts connected and start building a database for it.