ADMIN

The following articles walk the user through creating an ASP.NET application; storing source control history in a Visual Studio Team Services project Git repository; and automatically deploying to an Azure web app whenever code changes are pushed to the repository.

In this article, I will show you how to automatically deploy code from your VSTS Team Project repository to an Azure Web App every time you push code changes to that repository.

This configuration is done in the Azure portal.

Log into your Azure account and navigate to the portal by clicking the PORTAL link at the top right, as shown in Fig. 1.

Fig. 1

From the Azure portal, select

New | Web + Mobile | Web App

as shown in Fig. 2.

Fig. 2

The Create Web App blade displays, as shown in Fig. 3.

Fig. 3

At the App Name field, enter a name for your app. This must be unique among Azure App Services. Although you can assign a custom domain to this later, the default URL will be

http://xxxx.azurewebsites.net

where xxxx is the name you assigned to this Web App.

If you navigate to this URL (or click the hyperlink in the Overview tab), you will see a default Azure We App page.

At the Resource Group field, select "Create New" and enter a name for your resource group.

At the "OS" field, select the operating system on which you want to deploy your Web App.

Click the [Create] button to create your Web App. This usually takes less than a minute. A message displays when the App is created with a [Go to Resource] button to quickly open your Web App. (Note: You can also find your Web App by selecting "All Resources" in the left sidebar.)

The Web App Management blade displays, as shown in Fig. 4.

Fig. 4

Select "Deployment Option" on the left menu of this blade to display the Deployment Option blade, as shown in Fig. 5.

Fig. 5

Click "Choose Source" to display a list of Source repository types, as shown in Fig. 6.

Fig. 6

Select "Visual Studio Team Services".

You will return to the "Deployment Option" blade, but options specific to VSTS will now display, as shown in Fig. 7.

Fig. 7

Select your VSTS Account and Project from the dropdown. (Note: Your account and project will only appear if you have linked your VSTS project to Azure, as described here.)

Click the [OK] button to configure this automation.

It should take less than a minute to complete.

Any code currently in the project's repository will be deployed to Azure. You can see this by once again navigating to the Web App's URL (http://xxxx.azurewebsites.net).

Future code code pushed to the Team repository will also be deployed automatically to Azure.

In this article, you learned how to set up automatic deployment to an Azure Web App each time code is pushed to a VSTS project code repository.

The location of your project is determined by the combination of the "Location" textbox and the "Solution name" textbox (assuming you have not unchecked "Create new directory for solution"). Verify that this points to the location of the local Git repository that was created above.

Uncheck the "Create new Git repository" checkbox.

Make any other desired changes and click the [OK] button to create a new button.

At the New ASP.NET Application dialog (Fig. 7), click [OK] to create the project.

Fig. 7

A new project will be created in the repository directory similar to the one shown in the Solution Explorer (View | Solution Explorer) in Fig. 8.

Fig. 8

You can check this initial code into your version control repository from the Visual Studio Team Explorer (View | Team Explorer). Click the [Changes] button in the Team Explorer to display the Changes panel, as shown in Fig. 9.

Fig. 9

Enter a comment, such as “Initial commit” and click the [Commit All] button. This will commit your changes to the local Git Repository.

To push your changes up to the VSTS repository, you will need to access the Team Explorer Sync panel. You can navigate to this panel by clicking to dropdown near the top of the Changes panel and selecting “Sync” from the menu displayed, as shown in Fig. 10.

Fig. 10

The Sync panel displays, as shown in Fig. 11.

Fig. 11

Click the “Sync” link. You should see a message indicating that the local and remote repositories are syncing, meaning that the local repository is merging any changes from the remote repository and your local commits are being pushed up to the remote repository in VSTS. The following message displays when this sync is complete:

Successfully synchronized incoming and outgoing commits.

If you return to the project code page in VSTS and refresh the web page, you should see all your code checked in. Fig. 12 shows my project after I checked in my initial commit.

Fig. 12

In this article, I showed you how to create a new ASP.NET project in Visual Studio and store the code in an existing Visual Studio Team Systems Git repository.

This is Part 1 in a series of articles about integrating VSTS, Azure Web Apps, ASP.NET applications, and Visual Studio.

If you want to publish code from your repository to Azure, the easiest way to do this is to create the account from within the Azure portal.

Log into your Azure account and navigate to the portal by clicking the PORTAL link at the top right, as shown in Fig. 1.

Fig. 1

From the Azure portal, select

New | Developer Tools | Team project

as shown in Fig. 2.

Fig. 2

The "New Team Project" blade displays, as shown in Fig. 3

Fig. 3

Enter a Name to identify this team.

Click "Configure required settings" under "Account"; then, click "Create a new account" and enter a name for your VSTS Account (Fig. 4). This name must be unique among all VSTS account, because it will be used in a URL to connect to the account.

Fig. 4

Click [OK] to close the "New Account" blade.

Review all the settings in the New Project dialog. You may wish to change the location, so that it is closer to your team members. (For me, this defaulted to Brazil, so I changed it to Central US). My completed blade is shown in Fig. 5.

Fig. 5

Click [Create] to begin creating the Team Project.

It may take a minute or two to create the VSTS Account and a project within that account.

To view the account and project in VSTS, open a new browser tab and navigate to https://xxxx.visualstudio.com/_admin

where xxxx is the name of the account you just created. You can see my account displayed in Fig. 6.

Fig. 6

In this article, I showed how to create a team project in VSTS and link it to Azure. In the next article, I will show how to create an ASP.NET application in Visual Studio and push that application’s code into this team project’s code repository.

I admit that I am a novice when it comes to Git. But I recognize the importance of this version control system, so I documented the most important commands.

Git is a distributed version control system, so it is necessary to commit changes to a local repository (a repository on your local computer) before pushing those changes to a central repository that can be shared by others.

Commands

My needs are simple. In the vast majority of cases, I want only to get the latest code, make my changes, save them to a local repository, and share those changes with others. Git contains a lot of commands, but the following git commands suffice for most of my needs:

git init

git config

git add .

git pull

git commit

git push

Here is a brief description of each command:

git init

Intialize an empty Git repository

git config

Store information, such as username and email address in a local config file, so you don't need to re-type it later.

git remote add

Associate the local git repository with a remote repository

git add

Adds files in the current folder to the git repository

git commit –m “Comment about change”

Commits changed files to the local repository. The “-m” switch allows you to provide a comment describing the code you are committing.

git pull repositoryname branch

Retrieves code from the remote repository and merges it with your local code

git push repositoryname branch

Pushes any changes from your local repository to a central repository

Workflow

My usual workflow is below. It assumes my code is in the local directory c:\development\MyProject and that the remote repository is named “myproj”.

At the "Repository name" textbox, enter a name for your repository. This should be brief, but enough to identify the project to you and others.

At the "Description" textbox, you may enter a short description of the project, if you like. This is useful if you want others to contribute.

Use the radio buttons to select whether this will be Public (anyone can view the files in the repository) or Private (only those you invite can see the files). You can only create a private repository if you have a paid GitHub account. Free accounts can only have public repositories.

Checking the checkbox labeled: "Initialize this repository with a README" will create a README.MD file in your repository. This file is displayed on the main page of your project below the list of other files. It should contain text and Markdown language. For a description of Markdown, check out http://daringfireball.net/projects/markdown/.

There are two dropdowns at the bottom of the page: "Add gitignore" and "Add a license".

A gitignore contains a list of files that might be on your disc, but that you don't want in source control. These might be user configuration files or binary output files. Selecting a type of projects creates a gitignore file containing files typically ignored by that project type. For example, if I select "Visual Studio" from the "Add gitignore" dropdown, a file will be created that tells GitHub to not check in "SUO" files or files in my "bin" folder. Of course, you can always edit the gitignore file after it is created.

The "Add a license" dropdown (Fig 4)allows you to assign a license to the files in your repository.

Fig 4

The license dictates how others can legally use these files and programs - for example, whether they can make money off of code that you share here. There is a good description of each software license at http://opensource.org/licenses/.

After you complete the form, click the [Create Repository] button. Your repository will be created in a few seconds.

Are you a TFS user or interested in using this product? In the past, it was necessary to install TFS onto a central server or virtual machine before using it. No more. Now, Team Foundation Services allows you to access a TFS server hosted by Microsoft.

The service is free for small teams (<5 people) while it is in Preview, but I have not seen any future pricing announcements.

Get started by navigating to visualstudio.com and signing up for an account. Note the URL, up to ".visualstudio.com". This is the server name. You will need this to integrate with Visual Studio solutions. In my case, it is "https://giard.visualstudio.com".

At the home page, click the [New Team Project] button (Fig. 1)

The "Create Team Project" dialog displays (Fig. 2). Enter a project name and description;

Next, select a Process template. The choices are:

Microsoft Visual Studio Scrum 3.0 - Preview

MSF for Agile Software Development 7.0 - Preview

MSF for CMMI Process Improvement 7.0 - Preview

Finally, select a Version Control repository. Currently, TFS and Git are supported. Click [Create Project] and you will be ready to start using TFS within a few seconds.

The navigation is simple and intuitive.

You can add and remove team members by clicking the Manage All Members link.

You can enter a new Task, Bug, Issue, Feature, or Test Case using dialogues similar to those found in the Visual Studio Team Explorer.

The source control repository can be seen by clicking the "Code" link on the top menu. From here, you can download files but not upload them.

TFS source control is easiest to use when you integrate it with Visual Studio. Open a solution in Visual Studio and select File | Source Control | Add Solution to Source Control

You may be prompted to add a TFS server. If so, use the URL ending in ".visualstudio.com" that you noted from above. (Fig. 3)

Select the Team project to which this solution belongs (Fig. 4) and click the [Connect] button.cl

i

From here you check-in, check-out, branch, merge, and get latest in the same way that you would use a TFS server within your enterprise.

Team Foundation Service allows you to manage projects on your own or with organizations that don't have the hardware and/or time to set up their own TFS server. It can be a simple solution to integrating your project with Application Lifecycle Management tools.