I put this together as a workshop a little while ago. Basically, you will learn how to setup an Azure App Service Website, Create a new Team Services Project, Create a new Website in Visual Studio, and leverage Team Services to build and release the website to the cloud.
Keep in mind that Team Services and Azure change fairly quickly, so the UI may not be exactly like the screen captures I have below.
In order to participate in this workshop, you will need the following;
An Azure Subscription by either…
- Activating your MSDN benefits
- Obtaining a Free Trial from the website
- Using a credit card to setup a pay as you go subscription
Team Services Site
- First Five users are Free
- If you have an MSDN subscription, access is included
Visual Studio (Community, Pro, or Enterprise)
- Ensure that you have the web development templates installed
- Ensure you have the Azure SDK installed
- Ensure that Visual Studio has been updated
High Level Steps
We will accomplish the following within this workshop:
Create an Azure App Service Web Site
Create a Team Services Project
Create a basic ASP.Net MVC site and Connect Visual Studio to Team Services
Push your initial commits to Team Services
Create a build for your site
Create a release process for your site
Estimated time to complete: 60 minutes.
Create an Azure App Service Web Site
In this section, you will create an Azure App Service Web Site.
Click ‘+ New;’
Choose ‘Web + Mobile’, Then Choose Web App;
You will need to configure your app service
Enter a name for your app (the name will be checked to see if it is unique)
Pick your subscription (It should be pre populated)
Create a new Resource Group (the name will be checked for uniqueness)
Pick or Create an App Service Plan
Select to have App Insights turned on
Select to Pin the app to your dashboard for convenience
Note: If you don’t already have an app service plan, you can quickly create a new one. Simply select ‘Create New’, give your app service a name, pick a location for your service plan, then select the pricing tier. The Basic pricing tier is fine for this workshop;
When complete, click the create button to create your website. This will validate the options that you selected and start provisioning your resources. Provisioning of the site should only take a couple of minutes.
When the deployment is complete, let’s go to the portal dashboard by clicking ‘Microsoft Azure’ in the top left corner;
This will take you to the portal dashboard. You should see your Web App Pinned;
Click on your newly provisioned web application to view it’s configuration;
To the left you will see all the configuration options available for your web application. To the right you will see your site URL, site publishing information , subscription, etc.
Click on the URL found towards the top and right of the blade to verify the site is up and running;
Go back to the website configuration page and click on the resource group name found around the top center of the blade;
This will open the resource group configuration page. A resource group is a logical container for various Azure resources. Note that you not only have your website in this container, you also have an application insights instance. Resource groups help you organize and manage your services as groups;
Create a Team Services Project
In this section we will create our Team Services Project.
Navigate to http://<yoursite>.visualstudio.com.
This takes you to your tenants landing page;
Under ‘Recent Project & Teams’, Click New;
Fill out a project name, a description, user scrum as your process template, and use Git as your version control system, then click ‘Create Project’;
After about a minute, your project will be provisioned. You will see a dialog prompting you to navigate to the project, click ‘Navigate to Project’;
Navigating to your project will take you to the project dashboard and present a welcome dialog offering a couple of suggestions as to where to start. In this case, click the ‘Code’ button;
Choosing code will give you information on how to connect to your newly created repository;
This is useful, but for our purposes we will connect to the repository from Visual Studio.
Create a basic ASP.Net MVC site and Connect Visual Studio to Team Services
Now that we have our website provisioned in Azure and we have Team Services ready, we need to connect visual studio to our project, create a quick site, and check in our initial code.
First things first, open visual studio 2015.
Go to the view menu and pick team explorer;
This will open the Team Explorer window;
At the top of the Team Explorer Home window, you will see an icon that looks like an electrical plug;
This will help you manage connections to Team Foundation Server, or in this case, Team Services. Click on the connections icon to open the connections dialog.
IF you have connected to a TFS or Team Services project in the past, you will see the projects in this dialog. In this case we want to add a connection to a new server, so click the ‘Manage Connections’ option and then click the ‘Connect to Team Project’ option;
This will open the Connect to the Team Foundation Server Dialog. If you have never connected to a TFS server before the dialog will be empty;
Click the ‘Servers’ button to add the Team Services connection from your tenant. This will open the add/remove team foundation server dialog.
Click the ‘Add’ button to add your new team services instance;
Enter the name of your instance ‘https://<yoursite>.visualstudio.com’ and then click ‘OK’.
Close the add/remove team foundation server dialog.
You should be back on the Connect to Team Foundation Server Dialog. If your server isn’t showing, select it from the server drop down.
You should see a list of projects in the dialog, check the project we just created and click connect;
The Dialog will close and your ‘Team Explorer – Connect’ window will have your new project added to it;
The folder with the arrow pointing down indicates that we have not yet cloned our repository to our local machine. Double click the project and you will be prompted to clone your repository. Click on the ‘Clone this Repository’ link to start the process;
Once you click the link, you will be presented with the URL to the remote repository (the one on Team Services) and a file location where visual studio will place the local, cloned repository. You can enter an alternate location if you want. Once you have selected the location for your local repository, click the ‘clone’ button.
At this pointyou have an empty git repository linked to your remote team services repository. Now we need to create our web application, then push it to team services.
To do this, we need to click on the ‘New….’ Link under solutions. This will be towards the bottom of the dialog;
Clicking the new button will open the new project dialog. Under visual c#, pick Web, and then highlight ASP.NET web application (.Net Framework). Change the name of the application to something like WorkshopWebPrj. Then click ‘OK. Note the location is in your local Repository;
Clicking OK will prompt you to select a template for your web application. For this demo, select MVC.
Next, click the ‘Change Authentication’ button and pick ‘No Authentication’, then click ‘OK’.
Your authentication mode should show ‘No Authentication’. Click ‘OK’ to create your default ASP.Net MVC site.
In a few moments, your web project should be created and ready to go. You chould see something like the following;
To Quickly test that your application runs, click the green triangle to start your debug session;
This may take a few moments while it spins up IIS Express for the first time. When done, you should see your web application running.
Click the red square to drop out of debug mode;
At this point, we have a running web application, we are connected to Team services, and we are ready to push our changes.
Push your initial commits to Team Services
We now need to push our web project from our local machine to our Team Services Site.
Go to your ‘Team Explorer -Home’ dialog and click the ‘Changes’ button under projects;
You may be prompted to enter your GIT user information. The defaults are usually fine, if not, make any edits necessary and then click ‘Save’;
Once done, ‘Team Explorer – Changes’ should be displayed. This shows all the files that have been modified since you last checked in your code. Since we just created the project, all the files are listed.
Before you can commit your changes, you need to enter a commit message, usually saying something about the changes you are about to commit to the repository;
Enter something like ‘initial commit’. As soon as you have something in the commit message dialog, the ‘Commit All’ button becomes active. Click the ‘Commit All’ button to commit the changes to our local repository;
After you click the commit button, you are prompted to sync your changes with team services. Since we want to push the code to Team Services, click the ‘Sync’ link.
Clicking the sync link opens ‘Team Explorer – Synchronization’. This is where you choose how you would like to sync the commit with the server. IN our case, since there is nothing on the server yet, we are going to select the ‘Push’ option which is under ‘Outgoing Commits (1)’.
This should only take a few moments. When done you will be shown a confirmation message;
Click the ‘Home’ button (looks like a little house) to take us to Team Explorers Home Dialog;
To verify everything synced to team services, we will want to click on our project link which is in the Visual Studio Team Services Group and should look like;
This will take use to our Team Services Repository;
If you click on the ‘History’ Tab, you can see the commit we just pushed to the server;
Next, we will create a build to build our application and ready it for release.
Create a Build for your site
Now that we have our web application pushed to team services, we need to create a build definition to build our solution before we release the site to Azure.
Hover over the ‘Build & Release’ Tab at the top of the page to pull down another menu and then select ‘Builds’;
Click the ‘+ New Definition’ button;
Choose the ‘ASP.NET Build (Preview)’ definition template as a starting point for our application and then click ‘Next’;
This will open a dialog prompting you for some settings. The default settings are fine for our purposes, simple click ‘Create’;
Clicking create will take you to your build definition. The default options will work just fine. Click the ‘Save’ button towards the top and left of the screen to save your definition;
You will be prompted to name your definition and choose a folder location. Simply leave the defaults and click ‘OK’;
Once saved, click ‘Queue New Build’ to create our first build;
You will be given an opportunity to override some of the settings. Leave the defaults and click ‘OK’;
You will be taken to a screen which will show you your build output in real time. It may take a moment for the hosted controller to initialize;
After a few moments, you should start to see build output and then your build should complete.
Note that my build number is 20161103.1. This is a link that will take you to a build summary page. Click the link.
The build summary page has a lot of information about the build. Feel free to explore. When done, we will move on and create a release to publish our website to Azure.
Create a Release Process for your site
Almost done. Last thing to do is create a release process to push our compiled web application to our hosted Website.
Hover over the ‘Build & Release’ tab to show the sub menu, then click the ‘Releases’ option;
This will take us to all of our Release Definitions. Since we don’t have any yet, we are only shown a ‘+ New Definition’ button. Click the button to create a new Release Definition;
Much like when creating a build, you are prompted to pick from a list of templates. Select the ‘Azure App Service Deployment’ and click ‘Next’;
We now need to link the release to a build so the release definition knows where to get the artifacts to release. For our purposes, leave all the options set to their defaults and click ‘Next’;
Once you click create, you will be taken to your new release definition. This will look a lot like a build definition with the addition of environments and more agent options. Click on the ‘Deploy Azure App Service’ task to configure your deployment;
We first need to add a connection to our Azure subscription. This will populate our drop down for the ‘AzureRM Subscription’ field. To do this, we need to create an SPN in Azure, then link Team Services to Azure using the SPN.
NOTE: you will only have to do this once for this project. Once you have created the service endpoint within your project, in can be used in multiple builds and multiple releases. You can also connect your project to multiple Azure subscriptions.
The Easiest way to do this is via a PowerShell script. Download the script from here; https://raw.githubusercontent.com/Microsoft/vso-agent-tasks/master/Tasks/DeployAzureResourceGroup/SPNCreation.ps1 and save it somewhere convenient.
Open a PowerShell command prompt at the location where you saved the script and type .\SPNCreation.ps1 to run the script.
You will be presented with a warning, choose to run the script once;
When the script runs, it will prompt you for several pieces of information. The first is your subscription name. You can find your azure subscription name by logging into the azure portal at http://portal.azure.com and clicking the ‘gear’ icon in the top right portion of the page to open settings;
This will open your portal settings and you will see your subscription name. In my case, my subscription name is ‘Windows Azure MSDN – Visual Studio Ultimate’. Copy the name of the subscription, this is what you need for the first prompt;
The next prompt is going to ask you for a password. This is a password of your choosing, use anything you like, just write it down as you will need it later;
This script will now prompt you to log into your azure subscription, and then will spend some time setting up the SPN. Once done, you will receive the rest of the information you need to link Team Services to Azure;
We now have everything we need to create our connection.
Go back to Team Services and click the ‘Manage’ link next to the drop down. This will open a new tab and allow you to add a new service endpoint. You should see the following;
Click the ‘New Service Endpoint’ and pick ‘Azure Resource Manager’;
Click the ‘Here’ link kto show a form allowing you to manually enter the data;
After Clicking ‘here’, enter the information provided to you via the PowerShell script.
Connection Name: anything you want to call it’
Subscription ID: provided by the PowerShell script
Subscription Name: provided by the PowerShell script
Service Principal Client ID: Use the Service Principal ID from the PowerShell script
Service Principal Key: this is the password you entered in the PowerShell script
Tenant ID: this is provided by the PowerShell script
Once you click ok, it should take a couple of moments to setup the service endpoint. When complete you will see the following;
Close this browser tab and go back to the browser tab where you were creating your release.
In your release definition, click the refresh button next to the AzureRM subscription drop down to pick up the service endpoint we just added;
Use the drop down for ‘AzureRM Subscription’ to select the Azure Service Connection we just added;
Next, use the ‘App Service Name *’ drop down to pick the Azure App Service WebSite you created earlier and save your release definition;
At this point we are all set to kick off our release. Click the ‘Release’ button and then select ‘Create Release’ option to start the release process;
A ‘Create new release…’ dialog will open. Select a build from the build definition and click create;
Queueing a new release doesn’t automatically take you to the release summary. You will see a light bule bar appear, notifying you that the release has been queued. In my case, Release-1. Click on ‘Release-1’, or your equivalent, to navigate to the release summary page.
The release summary will give you high level information about the release. Since we just queued it, it is in process. Click on the ‘Logs’ tab to drill into some more detail and watch the release process;
At this point, we are waiting for a hosted build agent to become available. Just wait a little while for the release to start…
We have a build agent and we are starting the release. IN a few moments you should see a live log stream output to your browser;
Here we have log information as the release is progressing…
And finally, our release has completed;
If we navigate to our Azure App Service Website, we can see that our new website has been published;
Clean Up (Optional)
If you would like to clean up your environments, here is how you do it.
First, let’s remove the SPN from our Azure Subscription.
Go to; http://portal.azure.com
Click on ‘Azure Active Directory’
Click on App Registrations
Identify the SPN we created when we added our service connector to Team Services.
Click on the SPN and then click delete;
To remove the website, we will delete the resource group to clean up everything we created.
Go to your dashboard, you should see your website pinned here. Click the website;
This will open your website, but we want to go up one level to the resource group. The website overview will have a link to the resource group at the top left of the blade. Click the link to go to the resource group;
Clicking the Resource Group link takes you to the Resource Group overview. This will show you all the artifacts that were created with your website. Simply click the ‘Delete’ icon to delete the resource group and all of the resources in it;
You will need to type in the resource group name as a confirmation;
At this point, Azure has been cleaned up.
Next, let’s remove the Team Services Team Project.
Navigate to your VSTS Subscription https://<yoursite>.visualstudio.com
You will be taken to your subscription landing page, click on the ‘Settings’ gear icon in the top tool bar to take us to account settings;
If you have not navigated to the ‘Overview’ tab, please do so.
This will show you all the projects within your tenant;
Click on the project you want to delete, then click the “…” three dot button to expose the delete option. Click ‘delete’;
You will be asked to confirm the delete by typing in the project name;
Type in the name and Delete the project.
Last item we need to clean up is your local workstation.
Open visual studio. Note, you will see an error in Team Explorer because we deleted the team project… this is expected;
Double click on your solution to load it from the local repository;
Click on Solution Explorer;
Right click the solution and navigate to folder;
This will open a file explorer to the location where your solution files are. Before we delete the files, lets close the solution. In visual studio, click the file menu, then click close solution;
Then close Visual Studio.
Go back to the file explorer window we opened so we can delete the local files;
We need to go up a few directorys. In my case, I want to delete the ‘Workshop2’ folder and all of its contents;
That’s it, you have removed the workshop artifacts from Azure, Team Services, and your local workstation.