Creating a Webrole Project in Windows Azure

In this tutorial we will learn how to set up Visual Studio for a Windows Azure (cloud) project. On completing this tutorial, you'll have a simple web application up and running in the cloud. We are assuming that you are familiar with the Azure Portal. The following are the steps described in this tutorial:

  • Setting up Azure project
  • Designing web role project
  • Development of web role project
  • Deployment to Windows Azure

SETTING UP AZURE PROJECT

Procedure

1. For setting up the project, first for the Webrole project you need to sign in to the Azure Portal.
2. In the portal create a cloud service with a unique URL (Here it is example1.cloudapp.net) and a specified server location (here it is in Southeast Asia).

cloud service

3. Now for using Visual Studio, in the file menu select "New project" and then in the cloud pane of the window edit the name of the project to example1 (it is not necessary that both the project name and cloud service name will be the same) and click "Ok".

cloud service name

4. After clicking "Ok" a small window is shown from which we need to select a type of Webrole project, here we will select ASP.NET web role and give a name to it. Let's name it "firstwebrole" then click "Ok" to continue.

firstwebrole

5. You will see the following files in your Solution Explorer.

solution explorer
 
DESIGNING WEBROLE  PROJECT

1. We will create a web form that will display the text entered into the TextBox after clicking the "Submit" button.
2. A wire frame of the form is:

frame of the form
 
DEVELOPING WEBROLE PROJECT

Procedure

1. Now in Visual Studio go to the Solution Explorer tab and right-click the Webrole (here it is firstwebrole) then seelct "Add" > "Add new item". A window will appear for selecting the web form (top of the window) name; nme it "firstform.aspx" and click "Add" to continue:

web form

2. Then open the "firstform.aspx" file in design mode and drag & drop the following ASP.NET controls to the form and when you run the project in the local environment you will see the form as:

run the project
3. Open the "firstfom.aspx.cs" file and write the business logic for displaying the name entered in the testbox on a button click event:

protected void Button1_Click(object sender, EventArgs e)

{

   label1.Text = TextBox1.Text;

}
 
4. Run the project using Ctrl+f5 and test the application. You are now ready to deploy to the Windows Azure Portal

test the application
 
DEPLOYMENT TO WINDOWS AZURE

Procedure

1. Now login to the Windows Azure Portal and click on pane cloud services, you can see here the service we created earlier named "example1".

created Service

2. Click on "example1 cloud service". We can see the deployment settings under which two options will exist:

  • New Production deployment (for running in a real environment)
  • Staging deployment (for testing the application)

3. Now come to Visual Studio and right-click the project then seelct "example1" -> "Package", then a small window will appear, in this window click on the package button. After some time a folder with following two files will appear:

files
 
These files will be upload on the portal.

4. Now on the portal click NEW PRODUCTION DEPLOYMENT a window will appear then pick the corresponding file by browsing to the same folder in which published file was created in previous step and select files. also we need to provide a deployment label name (can be any name depends on requirement).

NEW PRODUCTION DEPLOYMENT
  
5. Now upload the files. It will take 5 to 10 minutes depending on your internet speed. The upload progress will appear in the bottom pane of the portal.

Upload progress

Cloud Service Status

test application

9. Congratulations! We have successfully deployed a Webrole project in a cloud environment, in other words Windows Azure.