Hosting a Silverlight Application Through the Windows Azure CDN

Slalom Consultant Joel Forman

Slalom Consultant Joel Forman specializes in cloud computing and the Windows Azure Platform.

In a previous post, I showed how you can host a web site in Windows Azure and have the content served entirely through the Windows Azure Content Delivery Network.  This concept leverages a new capability of the CDN to source content from a hosted service, in addition to a public BLOB container.  I would like to extend this concept to a Silverlight application.  This has particular performance implications, because the .xap package file for your Silverlight application can be cached for your end users in the CDN to reduce latency!

I recorded a short demo illustrating to show how to leverage the CDN for your Silverlight app…

To review, here are a couple of key points about using the CDN with hosted services.

  • Create a “cdn” folder at the root of your site.
  • After deploying, add a new CDN endpoint for your hosted service in the Azure Management Portal, which maps to the “cdn” folder.

Enabling a Silverlight Application to be hosted through the CDN is pretty straightforward.  For this demo, I started with a regular Silverlight Application project in Visual Studio and its associated Web project. Follow these steps:

  1. Create a new folder called “cdn” at the root of your Web project.  This is the location that CDN endpoint will reference.
  2. Move content into the “cdn” folder.  For this demo, I moved the .html page that hosts my Silverlight and named it “index.html” so that it would be the default document for the folder.  I also moved the Silverlight.js file, which is relatively referenced by the .html file.
  3. Compile your solution and copy the .xap file into the “cdn” folder.  You will probably want to write a post-build task to do this, as you don’t want to have to manually copy this file.  This is an important step because having the .xap file downloaded to a client’s machine through the CDN is where you will see a significant performance gain.
  4. Updated the reference to your .xap file.  Make sure that it is being referenced relatively from the “cdn” folder.
  5. Add a new “Windows Azure Project” to the solution.  Do not add any new web or worker roles to the solution as part of this process.
  6. Right-click on Roles in your Windows Azure Project and add the existing web project that hosts your Silverlight application as a Web Role.
  7. Publish and deploy to a new hosted service in Windows Azure via the Windows Azure Management Portal.
  8. Enable a CDN endpoint in the Windows Azure Management Portal to your running hosted service, which will map to the “cdn” folder.

One the CDN endpoint is enabled, I can view my running Silverlight application via a CDN URL (custom domain names can be easily mapped).  In FireBug, you can verify that the Silverlight.xap file is being downloaded from the CDN, as well as the Silverlight.js file and the page itself.  Pretty cool!

As the CDN offering continues to evolve, there will be more and more ways to improve the performance of your applications, and ultimately the experience of your end users.

Follow Joel on Twitter: @seattlejoel.

Slalom Consulting's Seattle Office Slalom Consulting Cloud
More about Slalom Consulting’s Seattle office. More about Slalom Consulting’s Cloud focus.

subscribe by emailSubscribe to be emailed about new Cloud posts.

subscribe by emailSubscribe to be emailed about new Software Development posts.

About Joel Forman
Joel Forman is a Solution Architect at Slalom Consulting and specializes in cloud computing and the Windows Azure Platform.

7 Responses to Hosting a Silverlight Application Through the Windows Azure CDN

  1. Kunal Dhir says:

    Hi i have created a pivot viewer application, i tried to do everything as in the video, everything is fine but the publishing part is taking ages. It takes a lot of time. Is that due to my large pivot collection…?

    • Joel Forman says:

      It could be. The behavior you would see here is the uploading of your package would take a considerable amount of time, but the actual deployment once uploaded should be normal. Is your collection included within your application? Consider separating to reduce the size.

  2. Michael Read says:

    Hi Joel, I have been trying this out on my own silverlight app, once deployed all works well if I go to the index.html page direct, but if I go to the address I get a ‘forbidden’ error, for some weird reason it does not map to the default index.html page.

    Have you ever come across this before?

    Thanks for any insight you can give me. Mike

    • Joel Forman says:

      Hey Michael,

      I have encountered the behavior you describe when trying to host a web site out of the CDN, where the source is Windows Azure BLOB storage. This is because your storage account doesn’t act like a web server, with default documents such as index.html for directories or folders. When the source is BLOB storage, you have to specify the full blob name. Where is the source of your CDN content? Is it BLOB storage, or is it a hosted service? If it is a hosted service, under the “CDN” folder, then you should get the behavior you desire since a default document in the CDN folder should return.

  3. Mike Read says:

    Thanks Joel, It is a hosted service. It turned out the issue was that I did not specifically add the index.html page in the Web.config, I just assumed it would be looked for at the route ‘cdn’ folder.

  4. Web Hosting says:

    I really appreciate the information you provide. I will try it soon. And do not stop writing usefull articles like this.

  5. Jose Adrien says:

    I uploaded the xap in a blob storage and configured correctly cdn.
    Now I have a problem:
    I need to make some changes in my application and upload a new xap to update.
    The problem is that my users should clear the cache of the machine so that the browser re-download a xap.
    I’ve seen posts muichos that talk about it, you know what the best way to accomplish this upgrade?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: