Creating and Deploying an ASP.NET MVC Web App to Windows Azure

0 Flares Twitter 0 Facebook 0 StumbleUpon 0 Google+ 0 LinkedIn 0 0 Flares ×

Azure Logo

I thought I’d do a series of posts about some fairly simple, but fundamental things that you might want to do when creating a web application on Windows Azure with ASP.NET MVC 5. These posts will be pretty step-by-step, and not make any assumptions about the readers skill level or familiarity with the tools.

This first post is going to explain how to get started with ASP.NET MVC, create an project based on a template and publish that sample project to windows azure (All of these posts will assume you’re working on a windows machine).

If you have any questions, feel the pace is too slow/fast or feel that I have missed something, then please get in touch or leave a comment and I’ll do my best to help.

Series: ASP.NET Web Apps on Windows Azure

Workstation Setup

  1. To get started with asp.net mvc we’re going to need Microsoft Visual Studio, if you already have visual studio installed then great, if not you can download visual studio for free, and get it installed. If you are installing visual studio express, download and install the web edition.
  2. Next you’re going to need to install the windows azure software development kit (SDK), you can download it from the windows azure website. Just visit Windows Azure Downloads and get the latest SDK (version 2.2 as of writing this). Once you’ve downloaded it simply follow the instructions in the installer
    Download Azure Sdk

Creating an ASP.NET MVC Project

To get started we’re going to create an MVC project based on one of the standard templates installed with visual studio.

  1. Open Visual Studio and create a new project (this can be found on either the start screen called ‘New Project…’, or under File>>New>>Project…).
    Visual Studio New Project

  2. Now select the project type and give it a name

    • In the furthest left pane (project template types pane) select Installed>>Templates>>Visual C#>>Web
    • In the middle pane (the project template pane) select ASP.NET Web Application
    • In the bottom pane choose your project name, solution name and where the files will be created. For me my project is called ‘MyFirstWebAppProject’ and my solution is called ‘MyFirstWebAppSolution’. The folder where these will be created I left as the default (C:\Users\matt\Documents\Visual Studio 2013\Projects);
    • Click ‘OK’

    Projects and Solutions
    The difference between projects and solutions can seem confusing when you’re getting started. The simple answer is that your project represents the thing you’re working on, whereas a solution represents a collection of these things.
    Select Project Type and Name

  3. Next you need to select the ASP.NET template you want to use. For us we’re going to be creating an internet facing MVC web app.

    • In the ‘Select a template’ pane choose ‘MVC’.
    • The only folders we want selected is the MVC folder (should be this way by default).
    • And we want to keep the ‘Individual User Accounts’ as the authentication mechanism, as leave that as its default too.
    • Click ‘OK’

    Select MVC Template

This should get you up and running with a the template MVC project.

Brief Explanation of the Project Structure

Visual studio will have created a fully functioning template project for you to start working from. The solution explorer window should look like this. (The solution explorer is normally located on the right hand side of the screen, or can be activated by going to View>>Solution Explorer):

Solution Explorer

I could spend an entire day explaining each feature of the project, but I just want to give you a quick heads up. In a future post I’ll go into more detail about each feature. For now heres some headlines working down the project structure top to bottom:

  1. The App_Start folder should contain several code files that do configurations at start-up. Things like setting up stylesheet bundling, specifying your websites routes* and setting up your websites security mechanism.
  2. The Content folder contains your cascading style sheets (CSS) – from the offset there is bootstrap.css which is a user interface (UI) framework, and Site.css which is the sites unique styling.
  3. Controllers are where a lot of the server side logic happens, its where the requests are received and handled*.
  4. The fonts folder is designed to contain font files for use in styling. In this case it contains several files that enable the use of the glyph icons set font awesome.
  5. The models are is the section that represents the main data structures of your system in code. The template provides entity framework models for account management (i.e. users logging in)*.
  6. The Scripts folder is heavy with javascript files such as jquery, bootstrap and modernizr.
  7. The Views folder is where all the html pages are defined*.
  8. The remaining files are made up of:

    • A favicon (the small icon that appears next to a bookmark in your browser).
    • The Global.asax which is an optional file that allows responding to application wide events.
    • Almost all visual studio project leverage nuget (package manager) extensively and the packages.config specifies the packages used in this project.
    • Startup.cs is used to enable OWIN (Open Web Interface for .NET) features such as authentication.
    • The web.config is the main configuration file of the application.

    * The core premise of an asp.net mvc project is that when you request a web address via your browser, mvc takes that address and looks at its configured routes to determine which controller to send the request to. The controller then takes the request and decides what to do with it, which often means talking to a database using a model. The controller then takes that model and passes some information from it to a view. The view generally takes the specificed html structures and merges it in a predetermined way with the model data to create some html, which is returned to you as a web page!

There is a lot to understand in there, but you dont need to know it all to get a web app off the ground, and in fact a lot of it may not be needed. For now though we’ll leave it as is, spin it up and take a look.

Within visual studio launch the project by pressing F5, or going to start debugging button on the toolbar, which should look something like this (although it may say Chrome or another browser name in it):
Start Debugging

Create the Azure Website

In order to deploy your website to windows azure you’re going to need to set-up an account. At Windows Azure website you can create an account for free and have a free trial. Furthermore, at this point in time you can set-up up to 10 azure websites for free – you cannot use custom domain names, ssl or several other features, but they are perfect for experimentation.

Once you have created you account head to http://manage.windowsazure.com where you can set-up your first website:

  1. From the main screen click the new button in the bottom left corner
    Azure new button
  2. The select

    1. Compute>>Web Site>>Quick Create
    2. Enter the name for your website, I used MyFirstWebAppForCodenutz (note that you have to choose a name thats available).
    3. Select a region where you want your site to be hosted, I chose West US (this isn’t important for this exercise)
    4. Press create website

    Create Azure Website

  3. You’ll have to wait a few seconds for azure to spin up the website, but you will be able to see in the interface a green tick denoting that it is ready to use:
    Azure website ready
  4. Once it is ready click on it, and select ‘Download publish profile’ – this should download a file to your computer called something like MyFirstWebAppForCodenutz.azurewebsites.net.PublishSettings

Now you’ve got an azure website ready, we can get to publishing your mvc site to the azure service.

Deploying to the Azure Website

  1. From visual studio, right click the website project and choose the ‘Publish…’ option. You should be presented with a publish dialog like this:
    Publish Dialog
  2. Choose ‘Import…’ – on this screen you can choose to import the profile directly from azure, or from a profile file. Either is very simple, but as we downloaded this file we’ll choose ‘Import from a publish profile file’. Click the browse button, select the file you just downloaded and click Ok. This will prepopulate a number of fields in the publish dialog which for now we dont need to worry about.
  3. Finally just click the ‘Publish’ button, and you website will be deployed to windows azure. *You should see the progress reported from within the visual studio output window with various bits of information like ‘Adding file…’ and ‘Adding ACLs’ etc. The first time you deploy tends to be the longest as all of the files have to be uploaded – subsequent deployments are much quicker as only the changed files are transferred.
  4. Once your website has finished deploying, visual studio should automatically open it in your browser for you, which should look something like this:

Website deployed and running

Wrapping up

In future posts I’m going to get more into some common scenarios such as setting up a database connection, sending emails and anything that might be useful when creating web apps. If there are any subjects you’d like covered, or would like to ask a question about then please ask and I’ll do my best to help you.

The Essential App Marketing Kit
Subscribe To My Newsletter To Get an Entire Chapter From The Book for FREE
Never display this again
0 Flares Twitter 0 Facebook 0 StumbleUpon 0 Google+ 0 LinkedIn 0 0 Flares ×