Design and Deploy Visual Studio Light Switch 2011 Application in Windows Azure - Part 2

Introduction

In this article we are going to see how to deploy Visual Studio Light Switch 2011 Application to the Windows Azure Cloud Environment to access the application online in cloud.

Overview

In our earlier article we have seen how to design a Light Switch 2011 application using the Visual Studio IDE. In this article we are going to deploy the application to the Windows Azure Management Portal using the inbuilt publish tools available with the Visual Studio IDE.
Now let us open the Visual Studio Light Switch 2011 Application (VSLightSwitchAzure) and right click on the project name in the solution explorer to select the properties option. We can see the property window as shown in the screen below. As highlighted in the screen we need to select the option to run the application as a web client and select the server as Host Application Services using Windows Azure. Once the above options are selected we can click on the Publish button to proceed further to publish our application to the Windows Azure Cloud Environment.

Now, we need to do some simple steps (Creating Hosting Service) in the Windows Azure Management Portal. To create the hosted service follow the below steps
Login to Windows Azure Management Studio with Windows Live credentials using the below link (Note - We need to have a valid subscription to login to the account)
http://www.microsoft.com/windowsazure/
After successful login with the windows live credentials, we can now see the Management Portal with all the administration features as shown in the screen below.

Now click on the Hosted Services, Storage Account and CDN menu at the left bottom and we can see the list of hosted service already created. We can create a new Hosted Service by clicking on the New Hosted Service ribbon button at the top left corner as shown in the screen below.

Now click on the New Hosted Service will pop up a configuration window as shown in the screen below. Enter valid details and note that we should select Do Not Deploy check box in the Deployment Options list as shown in the screen below.

Once we are done with the configuration and the Service host is created we can see it is listed as shown in the screen below.

Now go back to Visual Studio Light Switch 2011 application properties and click on Publish to get started with the Publish Wizard of Windows Azure.

1. Right Click on Light Switch Application (VSLightSwitchAzure) and Select Properties
2. Select Application Type tab and then click on Publish
3. List of configurations will be available starting with Client Configuration
4. Select Web Check box since we are going to deploy the web application to Windows Azure Cloud Environment
5. Click on Next to proceed further and move on to next configuration.

Clicking on Next will move on to next configuration of the wizard which is Application Server Configuration. Here we need to select the type of the server which we are ready to host our application. Since we are going to host our application online to Azure we need to select Windows Azure check box as highlighted in the screen below. This option will provide the configuration steps required for hosting the application. Click on Next to proceed further.

Clicking on Next will move on to the next configuration tab which is Connect to Windows Azure. This configuration provides the authenticated bridge for publishing to windows azure, Copy the windows azure subscription id from the azure portal and paste it to the wizard as shown in the screen below. Next we need to select a certificate (Self signed) or we can create a new certificate using the inbuilt option as shown in the screen below.

Once we create a certificate we can see the certificate name and the details selected as shown in the screen below.

1. Newly created certificate F5DebugLightSwitch
2. Copy Path is used to copy the path of the certificate

After selecting the above options click on Next button.

Once we create the certificate we need to upload the certificate to the Windows Azure Management Portal under Hosted Services, Storage Accounts & CDN tab as shown in the screen below. To add our certificate which we created click on the Add Certificate option, once the certificate is added we can see the certificate listed as shown in the screen below.

Once we are done with the authentication section clicking on next will proceed to next configuration which is Azure Service Configuration. This configuration is used to define what are the services required to run the application and also the storages if any that are used by the application. Since in our example we don't have any storage accounts defined we can see the Storage section empty as highlighted in the screen below. In the service section select the service F5DebugLigthSwitch and the environment as production to populate the production environment settings. Once the above settings are done click on Next to proceed further.

We will create a new Storage Account to save our data for the application (VSLightSwitchAzure). To create a storage account go back to Windows Azure Management Portal and click on Storage account tab and select New Storage Account which will open a window as shown in the screen below. Enter the valid credentials (Url Name, Region) and click on OK to proceed further.

NoteTo get better performance we can always keep a specific Affinity Group mapped for all the services.

Once the Storage Account go back to the Publish Wizard and click on Refresh button, we can see our new storage account created as shown in the screen below. Click on Next to proceed further.

Once we click on Next button will move on to the next configuration section which is Security Settings. In this we need to select a Certificate (Or create a new .pfx certificate) which is self-signed. To create a certificate we can use the inbuilt option as shown in the screen below. Clicking on Create a certificate will open a popup to enter certain details about the certificate like Name of the certificate, Password validation and the path to save the certificate as shown in the screen below. Once the options are given and the certificate is created click on Next button to proceed further.

Clicking on Next button will proceed to the next configuration section which is Specify a Certificate. This configuration is exactly required to sign the .XAP file which is used for the deployment. To do that we no need to create a new certificate instead we can browse for the certificate which we created in the Connect to Windows Azure configuration section. So click on the Browse for a certificate button as highlighted in the screen below and select the certificate which we created and we can see the details of the certificate. Once we are done with the above changes click on Next to proceed further.

Clicking on next will provide the summary of the changes which we made to the Publish Wizard as shown in the screen below. Click on Publish to start publishing the application online to the Windows Azure Cloud Environment. We can see from the summary there is an Application Version control available by default starts with 1.0.0.0 and for each publish we can make the version increase for our reference.

Clicking on Publish will start publishing the application (VSLightSwitchAzure) to the cloud and we can see the status as well in the IDE as shown in the screen below.

Once the Build is succeeded we can see the status of the build at the bottom of the Visual Studio IDE as shown in the screen below.

Now we need to switch back to the Window Azure Management Portal and we can see the project getting initialized for publishing and we can see the status of each component as shown in the screen below. This process is a regular one which normally for all the application it takes place even when we do a manual upload of service configuration files to the Azure Portal.

Once the application is published successfully and the application is ready we can see the status of each component (Role, Instance etc.) shows the status message as Ready. At the right side menu we can see the DNS Name which indicates the URL of the application which is http://F5debugLightSwitch.CloudApp.net and at the bottom we can see the Input credentials and the status of the application as well as highlighted in the screen below.

Clicking on the DNS name will open our application online in a separate browser as shown in the screen below. Since our application had a Self Signed Certificate which is untrusted we get a message saying that the application connection is untrusted do we want to proceed further with the connection. Click on I Understand the Risks to proceed further as highlighted in the screen below.

Now we can see our application is available online in the Azure Cloud Environment as shown in the screen below.

No start entering the Expenses details as shown in the screen below. We can also see that the Account Balances section is not available to the online users since we made the visibility is false. Visual Studio Light Switch 2011 provides more comfortability to customize our requirement for developing efficient application.

Summary

In this article we have seen how to create an application using Visual Studio Light Switch 2011 and deploy the application to the Windows Azure Cloud to access the application online. In our next article we will see how to access the files of the deployed Light Switch Application in the cloud environment by enabling the Remote desktop connectivity for the application and accessing it remotely.