One of the best things about Windows Azure, or perhaps one of the most confusing, is that there are many ways to accomplish a task. In this post I’ve attempted to describe what I believe to be the shortest path to a working Web App using Microsoft’s recently announced App Service. This version doesn’t require any manual importing of publisher settings files, everything is basically wizard based. Of course just publishing a Hello World app isn’t particularly useful so in this app we’ll include how to set up a complete development solution that combines Visual Studio 2013, the Azure SDK, Visual Studio Online, and Azure App Service to create a fully functional continuous deployment environment.
Prerequisites
To follow along this primer, you’ll need to have the following items installed.
- Windows Azure Account (Free Trial available)
- Visual Studio 2013 (You can use any version including the free Community version)
- Azure SDK version 2.5.1 (March 2015 Release)
Step 1: Setup your Visual Studio Online Account
Using the Azure Preview Portal (http://portal.azure.com) you can setup a new Visual Studio Online Team Project by selecting “New” in the bottom left portion of the window. This brings up the Create blade. From here select “Developer services” and then “Team Project”. Now you should see the “New Team Project” blade. In this blade you’ll create the Visual Studio Online team project that will hold your source code and which you can use to manage your work across multiple developers. The picture below shows how I set up a Team Project for a new corporate website for Fifth Street Partners.
Once this process is complete, and it’s generally very quick, you should see the blade for your team project.
On this blade, there is a link that says “Open in Visual Studio”. Click that and Visual Studio 2013 will be started with the connection to your Visual Studio Online account already set.
Step 2. Setup Visual Studio Workspace
The next thing we need to do is to setup the workspace that we’ll use for our source code. This is done on the Team Explorer window which should be showing a yellow warning stating that you need to configure your workspace to check out solutions. Click on “Configure your workspace” and you’ll be able to configure your workspace mappings between the source control on Visual Studio Online and your local director. The image below shows what that should look like.
Now that your Visual Studio 2013 is properly mapped to the source code repository on Visual Studio Online, it’s time to add some code.
Step 3. Create a new Web App
Inside Visual Studio, create a new project from the “File” menu. Don’t click on the “New Web Site” menu option as this doesn’t give us all of the features we want. Instead click on the “New Project” link and we’ll select the right one from the list. Drill down to the language of your choice and then select the Web option. Here you should see just one item for ASP.NET Web Application. If you select this you’ll also see on the right that you have the option to add Azure Application Insights to your website and configure where that telemetry data will go in your Azure account. For more information on this go to http://azure.microsoft.com/en-us/services/application-insights/. For now it’s safe to assume you’re going to want to use this. The image below shows the options set for my project.
The next screen you should see is the New ASP.NET Project selection. This is where you can choose what type of web project to build with various options as well as any authentication model you want to use. In the bottom right you’ll also notice that you can select the “Host in the cloud” option with a drop down for Web App. Make sure this is clicked and that you choose Web App.
The next thing you will need to do is to authenticate to the Azure service. You’ll see a screen similar to this one asking for your credentials. Use the same credentials you used to set up your Azure account.
The next screen you should see is Visual Studio asking if you want to add your project to source control. This is why we setup the Workspace before hand as you can now easily add the new project to your existing workspace which will allow you to check in your files to your Visual Studio Online account.
At this point your web app is fully functional. You can build and run your app locally making any modifications you might want. Next let’s go ahead and check in your files to Visual Studio Online. To check in your files, just click on “Pending Changes” in the Team Explorer window, add a check-in comment and click the “Check In” button. When the code is all checked in you’re ready to setup continuous deployment.
Finally, let’s make sure this Web App will publish to Azure by right clicking on the Web project in Solution Explorer and selecting Publish. This brings up the “Publish Web” screen with all of the settings already set. You shouldn’t need to change anything here and this point since all of the certificates and publish profiles were downloaded when the project was created in Visual Studio. Just click on the “Publish” button and you should see your app pop up in your default browser after the publish is complete.
Step 4. Setting up Continuous Deployment
This step is CRAZY simple with the new Azure App Service blade. Just go back to your Azure Preview Portal. You should now see a Web App, in the case of my project called FifthStreetPartnersWeb. Click on this item and you’ll bring up the blade that gives you a ton of information on your running instance.
If you scroll down on this blade you’ll find the link shown below.
Click on this link and you’ll see the Continuous Deployment Blade with two simple options. Just select the source control, which in our case is Visual Studio Online and then select the Team Project. Click on the OK button and a new Build definition will be added to Visual Studio Online that will deploy the latest checked in code to your Azure Web App instance.
Check out how this works by going back into your Visual Studio project and make some changes to your Website. Go back into Team Explorer and perform a check in. When the code is checked in go to the Builds section of Team Explorer and you should see that a build has been kicked off with a build definition name ending in “_CD”. This is your continuous deployment build. Click on that and when it completes you should see this in Visual Studio.
And that’s it, you now have a fully functional Web App complete with source control and continuous deployment. From here, you can start to explore the other Azure App Service features like API Apps, Mobile Apps, and Logic Apps.