Building an Azure Web Site Application, Part I

In this series, I’ll be discussing the process of building a simple, but complete, .Net 4.5 web application, and how to host and manage it in Windows Azure. We won’t be skipping anything in this series – this will be a real application that will be live on the web, so it will have to take things like security and exception handling seriously. It will eventually be performing a service that is hopefully useful to people, it’s not only an Azure demo. I’ll be covering things in detail, but may skip some steps – if you’ve never made a .Net web application at all before, you’d probably be better off starting with one of the tutorials on www.asp.net.

Creating the Project

I’ll be using Visual Studio Express 2012 for Web. The easiest way to install this with the Azure tools is probably using this package from the Windows Azure site. Create a new project, and choose C#, then Web, and pick the ASP.NET MVC 4 Web Application.

image

Next, I install Twitter Bootstrap, because I like it. You can use the default stuff instead, or install some other framework if you prefer.

In the Package Manager Console (that’s View –> Other Windows –> Package Manager Console, by the way), do:

install-package twitter.bootstrap.mvc4
install-package twitter.bootstrap.mvc4.sample

 

I see a couple of error messages in Visual Studio at this point, but the Readme advises me to close and restart Visual Studio, and so I do. After that, it’s fine.

 

I also make a small change to Views\Shared\_BootstrapLayout.cshtml, to let it render a section called “featured” that’s included in the default Index.cshtml – without making that change or a similar one, we would get an error.

image

After this, we can do Ctrl-F5 and we’ve got a running site.

Setting up the Azure Web Site

Now that we’ve got our web application running, we need to publish it to Azure. I’ll assume you’ve already signed up for Azure – if not, why not start with the free trial? To create the web site is really simple – just go to your management portal, click on the Web Sites side-tab.

image

Then click the big “New” button at the bottom of the page:

image

Choose the “Quick Create” option – this will let you get a site up after just specifying a name.

image

Then just enter a name for your site, pick a region near you, and click on “Create web site.”

image

When the creation process finishes, your site will automatically be available on the web at whatever_name_you_picked.azurewebsites.net.

Publishing

In Visual Studio 2012, you can now easily publish your existing web application directly to the Azure Web Site you just set up. Just right-click on the project and choose Publish.

image

This leads to a dialog where you can choose a deployment profile. Deployment profiles are files that tell Visual Studio what it needs to know to publish to the correct location. Fortunately, Azure can provide you with a deployment profile automatically. Go back to the Azure management portal, click on the Web Sites side-tab, then click on the name of the web site you just set up. This brings you to the dashboard for your site. Under the bandwidth/usage chart and off to the right (you may have to scroll down a bit) there is a “quick glance” section. In that section is a link to “Download publish profile,” which is what you want. Click that and you’ll download the profile for your site.

image

Now switch back to Visual Studio, and bring up the Publish dialog again. Click the Import button to import your new profile.

image

Once you’ve got your profile installed and selected, you can click Next to see what it’s imported, or just click Publish to do the publishing. Once the deployment process has completed, it will open your application in the browser – your web application has now been published, and you can republish at any time without having to import the profile again, it’s now part of your project.

Next Steps

In the next installment, we’ll talk about error handling and diagnostics!

No Comments