Hands-On Lab

Getting Started with Git using Team Foundation Server 2013

Lab version: 12.0.21005.1

Last updated: 12/30/2013

CONTENTS

OVERVIEW ............................................................................................................................................. 3

EXERCISE 1: GETTING STARTED WITH GIT ........................................................................................ 3

EXERCISE 2: GIT BRANCHING AND MERGING ................................................................................. 21

Overview

In this lab, you’ll learn about Git support introduced in Team Foundation Server 2013 and Visual Studio

2013. Git is a distributed version control system. Git repositories can live locally (such as on a

developer’s machine) and can now be hosted by Team Foundation Server. You will learn how to

establish a local Git repository, which can easily be synchronized with a centralized Git repository in

Team Foundation Server. In addition, you will learn about Git branching and merging support.

Prerequisites

In order to complete this lab you will need the Visual Studio 2013 virtual machine provided by Microsoft.

For more information on acquiring and using this virtual machine, please see this blog post.

About the Fabrikam Fiber Scenario

This set of hands-on-labs uses a fictional company, Fabrikam Fiber, as a backdrop to the scenarios you

are learning about. Fabrikam Fiber provides cable television and related services to the United States.

They are growing rapidly and have embraced Windows Azure to scale their customer-facing web site

directly to end-users to allow them to self-service tickets and track technicians. They also use an on-

premises ASP.NET MVC application for their customer service representatives to administer customer

orders.

In this set of hands-on labs, you will take part in a number of scenarios that involve the development

and testing team at Fabrikam Fiber. The team, which consists of 8-10 people, has decided to use Visual

Studio application lifecycle management tools to manage their source code, run their builds, test their

web sites, and plan and track the project.

Exercises

This hands-on lab includes the following exercises:

1. Getting Started with Git

2. Git Branching and Merging

Estimated time to complete this lab: 30 minutes.

Exercise 1: Getting Started with Git

In this exercise, you will learn how to create, clone, and push commits to a Git repository with Team

Foundation Server 2013.

1. Log in as Julia Ilyiana (VSALM\Julia). All user passwords are P2ssw0rd.

2. Launch Visual Studio 2013 from the taskbar and open Team Explorer. You should now be

connected to the FabrikamFiber team project. If you are not automatically connected to the

FabrikamFiber project, select the Connect to Team Projects button ( ) to do so.

Figure 1

Connecting to Team Explorer - Home

3. There are a few reasons why Fabrikam Fiber might want to use Git as their source control

option within Team Foundation Server. One reason could be that they are collaborating with

developers using a tool such as Xcode, which supports the Git protocol natively. Another reason

could be that they have developers working offline (such as during a commute) who want to

commit code locally when they are offline and check this code into Team Foundation Server

when they get into the office. Microsoft now offers teams the ability to utilize Git without

sacrificing the integrated application lifecycle management capabilities offered by Team

Foundation Server. Visual Studio 2013 also provides developers with a great experience for

working with any Git repository – whether it’s hosted by Team Foundation Server, a local

repository, or another Git provider.

4. Select File | New | Team Project from the main menu.

5. Name the new project “FabrikamCommunity” and then select the Next button.

Figure 2

Creating new team project

6. Select the Next button to accept the default process template.

Figure 3

Creating new team project

7. Select the option labeled “Do not configure a SharePoint site at this time” and then select the

Next button.

Figure 4

Creating a new team project

8. Select the Git version control system and then select the Finish button.

Figure 5

Creating new team project backed by a Git repository

9. After the new Git team project has been created, select the Close button to return to Visual

Studio.

10. Select the Clone Repository link.

Figure 6

Clone repository

11. Accept the default endpoint and repository location and then select the Clone button.

Figure 7

Clone repository to local folder

12. In Team Explorer – Home, select the Settings tile.

Figure 8

Project settings

13. Select the Git Settings link.

Figure 9

Git settings

14. Enter an email address for Julia (julia.ilyiana@vsalm) and then select the Update button.

Figure 10

Setting email address

15. Select the Home button in Team Explorer.

Figure 11

Navigating home

16. Create a new work item for the product backlog by selecting Team | New Work Item | Product

Backlog Item from the main menu.

17. Enter a title of “Create new web site” and then select the Save Work Item button. Take note of

the ID once the work item is saved.

Figure 12

Creating new Product Backlog Item

18. In Team Explorer – Home, select the New… link underneath the Solutions section.

Figure 13

Creating a new solution

19. Select the ASP.NET MVC 4 Web Application template and then select the OK button to create

the web site.

Figure 14

Creating new web site

20. Select the OK button to accept the default options for the new ASP.NET MVC 4 project and

finish the new project wizard.

21. In Team Explorer – Home, select the Changes tile.

Figure 15

Viewing changes

22. Scroll down the list of included changes to the end and note that .gitattributes and .gitignore

files were automatically added to the project. The .gitattributes file contains various settings to

control Git behavior whereas the .gitignore file specifies patterns and extensions to ignore

when detecting changes.

Figure 16

Included changes

23. Enter a commit message of “initial MVC site for work item #245”. If the Product Backlog Item

that you saved has a different ID, use that number instead. Typing ‘#’ followed by the work item

ID will automatically link the commit to the work item when pushed to the server.

Figure 17

Entering a commit message

24. Commit the changes by selecting the Commit button. Note that the commit is persisted locally

and is not shared with the server.

Figure 18

Committing changes locally

25. Let’s make a small change to the web site. In Solution Explorer, open the _Layout.cshtml file

from the Views | Shared folder.

Figure 19

Opening _Layout.cshtml

26. Modify the title as shown in the following screenshot (from “My ASP.NET Application” to

“Community”).

Figure 20

Modifying markup

27. In Team Explorer – Changes, enter a commit message and then select the Commit button. Save

changes to files when prompted.

Figure 21

Entering a commit message

28. Navigate to the commits view by selecting the Unsynced Commits link.

Figure 22

Navigating to commits view

29. The Team Explorer – Unsynced Commits view shows both incoming and outgoing commits.

Here we can see the two local commits that are ready to be pushed to the server.

Figure 23

Outgoing commits

30. Select the Sync button to perform both a pull and a push to ensure we have the latest source

before pushing our updates.

Figure 24

Synchronizing with the server

Figure 25

Synchronizing with the server

31. Finally, let’s take a quick peek at what these commits look like in the web portal. In Team

Explorer – Home, select the Web Portal link.

Figure 26

Launching web portal

32. Select the Code tab in the web portal.

Figure 27

Navigating to Code

33. Select the Commits tab to see the two commits. Note that the relative size of the commits (in

terms of number of modified files) can be determined by viewing the size of the circles

rendered to the left of the commits.

Figure 28

Commits view

Note: It may take a few moments after pushing a commit before the commit size indicators

show up. You can refresh the page if necessary.

34. Select the link associated with the first commit.

Figure 29

Selecting the first commit

35. Note that the “Create new web site” work item is linked to the commit. Select the link to open

the work item.

Note: It may take a few minutes before the work item gets linked to the commit. In the event

that the link has not been made yet, go ahead and continue on with the rest of the lab.

Figure 30

Viewing linked work item

Figure 31

Viewing linked work item

Exercise 2: Git Branching and Merging

In this exercise, you will learn about Git branching and merging support in Visual Studio 2013. In general,

branching is often used to help switch development contexts and to isolate risk. Git branching is no

different in that regard. Create a Git branch is a lightweight (and therefore fast) operation, as you are

simply creating a new reference to an existing commit. This is very different from Team Foundation

Version Control (TFVC) branching where the entire source tree needs to be duplicated server-side. We

will also take a quick look at the merging support for Git projects.

1. Return to Visual Studio and open Team Explorer – Home.

2. Select the Branches tile.

Figure 32

Branches tile

3. Let’s say that we would like to create a new branch to do some development work on the web

site. Select the New Branch dropdown, enter a name of “Development”, and then select the

Create Branch button. In this case, the new branch will be based off the master branch.

Figure 33

Creating new branch

4. Note that the new branch was created locally and has not been published to the server. You can

create as many branches as you want locally, and you do not have to be online with TFS in order

to do this.

Figure 34

New local branch

5. In Solution Explorer, open the HomeController.cs file from the Controllers folder (if not already

open).

6. Modify the About method as shown in the following screenshot.

Figure 35

Modifying source code from new branch

7. Select the Changes link in Team Explorer - Branches.

Figure 36

Changes link from the Team Explorer - Branches view

8. Enter a commit message of “dev version” and then select the Commit button. Save changes

when prompted.

Figure 37

Commit changes

9. At this point, the changes have been committed locally. In the Team Explorer – Changes

window, select the Branch dropdown and then select the master branch.

Figure 38

Switching between branches

10. After switching to the master branch, note that original version of the HomeController.cs file is

automatically shown in the code editor window.

Figure 39

Switching between branches

11. You don’t have to publish the branch to the server yet if you want to continue working locally.

As you saw in the previous exercise, you can continue to work locally and add additional

commits to the new branch. In Team Explorer – Branches, right-click on the Development

branch and select View History.

Figure 40

Viewing history for local branch

Figure 41

Source history for selected branch

12. When you are ready, you can delete the branch, merge it back into your master branch, or push

it to the server-side repository so that teammates can access it. Let’s go ahead and publish the

branch by right-clicking the Development branch and selecting the Publish Branch option.

Figure 42

Publishing branch

Figure 43

Successful publication

13. You can easily switch between branches by double-clicking on the branch nodes in Team

Explorer – Branches. Go ahead and switch back to the Development branch.

Figure 44

Switching between branches

14. Now let’s say that another team member makes a modification to the HomeController.cs file

and commits that change to the master branch, before Julia has a chance to merge in her

development changes.

15. Switch users and log in as Adam Barr (VSALM\Adam). All user passwords are P2ssw0rd.

16. Launch Visual Studio 2013 from the taskbar.

17. Select the Connect to Team Projects button from Team Explorer – Home.

Figure 45

Connect to team project

18. Select the Select Team Projects… link.

Figure 46

Connect to team project

19. Select the FabrikamCommunity team project and then select the Connect button.

Figure 47

Connect to team project

20. Double-click on the FabrikamCommunity project shown in Team Explorer - Connect. Note that

the Git project has a special icon.

Figure 48

Connect to team project

21. Clone the repository using default options as you did in the first exercise.

22. Open the Git Settings from Team Explorer – Settings as you did in the first exercise and add an

email address for Adam. The email address that you use does not matter for the purposes of

this demonstration.

Figure 49

Setting up Git email

23. Double-click on the MvcApplication1.sln solution shown in Team Explorer – Home.

Figure 50

Open solution

24. Modify the same HomeController.cs file that Julia did, but this time change the text to be

something different.

Figure 51

Modifying web page title

25. In Team Explorer – Changes, enter a commit message of “Adam’s version” and then select the

Commit button. Save changes when prompted. Note that Adam has chosen to commit changes

to the master branch.

Figure 52

Commit changes

26. Select the Sync link.

Figure 53

Sync changes with server

27. Select the Sync button.

Figure 54

Sync button

28. Switch users once again to log in as Julia.

29. From Julia’s perspective, she has so far created a local branch based off the master, made a

change to a file, and then published that branch. Julia would like to go ahead and merge her

Development branch back into the master branch.

30. In Team Explorer – Branches, select the Merge dropdown.

Figure 55

Merging Git branches

31. Select Development as the source and Master as the target. Select the Merge button to start

the merge process.

Figure 56

Merging Git branches

32. Note that the Master repository is currently selected and that HomeController.cs shows the

development version of the text. The merge was performed locally by updating the Master

branch to point to the latest commit of the Development branch.

Figure 57

Merge completed locally

33. Right-click on the Master branch in Team Explorer – Branches and select the View History…

option. The history view should look identical to the one you saw earlier, except this time both

the Development and Master branch designators (in red) point to the same commit.

Figure 58

Merge completed locally

34. Still unaware of Adam’s change that he pushed to the Main branch earlier, Julia will now

attempt to push her commit. Select the Unsynced Commits link.

Figure 59

Navigating to Unsynced Commits view

35. Select the Sync button to attempt a pull and a push with the server.

Figure 60

Synchronizing with server repository

36. Visual Studio reports that we can’t push our commit yet due to a conflict.

Figure 61

Conflict between two different commits

37. Select the Resolve the Conflicts link.

Figure 62

Resolving conflicts

38. In the Team Explorer – Resolve Conflicts view, select the HomeController.cs _Layout.cshtml

the Conflicts section.

Figure 63

Resolving conflicts

39. Select the Merge button.

Figure 64

Starting manual merge process

40. The Merge window used for Git conflict resolution is very similar to the one used with Team

Foundation Version Control. We will go ahead and assume that Julia’s change is correct, so

check the box shown in the top-right pane.

Figure 65

Merge window

41. Select the Accept Merge button.

Figure 66

Merge window

42. Select the Commit Merge button.

Figure 67

Commit the resolved merge

43. In the Team Explorer – Changes view, note that conflicts have been resolved but the merge still

needs to be committed. Select the Commit button. Save changes when prompted.

Figure 68

Commit the resolved merge

44. Select the Unsynced Commits link.

Figure 69

Unsynced Commits

45. Select the Sync button to finish the merge process.

Figure 70

Syncing with server

46. Select the Web Portal link in Team Explorer – Home.

Figure 71

Opening the Fabrikam Fiber web portal

47. Select the Code tab.

Figure 72

Navigating to Code view

48. Select the Commits tab to view all commits pushed to the repository.

Figure 73

Commits view

49. Select the Branches tab to view all branches published to the repository.

Figure 74

Branches view

50. Finally, let’s take a quick peek at managing security and permissions for Git repositories hosted

in Team Foundation Server. Select the FabrikamCommunity dropdown and then select the

Manage Repositories link.

Figure 75

Managing repositories

51. The first thing to note is that you can create additional Git repositories within the same team

project.

Figure 76

Option to create additional Git repositories

52. Select the FabrikamCommunity repository node.

Figure 77

Navigating to repository node

53. You can manage repository level security here for your users and security groups.

Figure 78

Managing repository security

54. Select the Master branch node. Security level settings that affect only the currently selected

branch can be made here, providing fine-grained control for your repository if needed.

Figure 79

Managing branch security

To give feedback please write to VSKitFdbk@Microsoft.com

Copyright © 2014 by Microsoft Corporation. All rights reserved.