Getting Started with ASP.NET WebMatrix 2 and Azure Websites

Posted by: Sumit Maitra , on 9/26/2012, in Category Windows Azure
Views: 48189
Abstract: In this article, we take a look at how to get started with Windows Azure (right from the scratch as in account creation) and then use WebMatrix 2 to build and deploy our first simple Windows Azure WebSite.

Windows Azure team launched multiple features for Azure in the July 2012 refresh. One of them is Azure Websites. Azure Websites is Infrastructure as a Service and Platform as a Service bundled together. It offers up to 10 Azure WebSites free at the moment. In this article, we will see how we can sign up for Azure and get started with an Azure Website. The beauty of the system is you can scale your website as-per anticipated load, for example you can run it on a single instance in normal load hours, and when you anticipate more load, scale the number of instances it runs on by simply incrementing the number of instances. Rest of the configuration is taken care of.

WebMatrix 2 is a free application that comes with Microsoft’s Web Platform Installer. It is an easy to use Web Site management tool that is not as complicated as Visual Studio and yet generates/manages code that is easily editable in Visual Studio. WebMatrix 2 is targeted towards the average IT person (or even semi-technical Business user) who has to spin up web sites quickly to satisfy some small business requirement in the Enterprise. Having said that it offers multiple web platform templates like ASP.NET, PHP, NodeJs and HTML5. Hence it is not restricted to Microsoft Technologies only. Today we will see how to get started with WebMatrix 2. Going forward we will see how we can best use all its features.

 

Signing up for Windows Azure

To Sign up for Windows Azure you need a Microsoft ID, so a Hotmail.com account, Outlook.com account, msn.com or live.com account should do. If you already have an account, just sign-in and jump to the next section. If not, go ahead and follow the steps to get started with your Windows Azure 90 Day Trial.

The only other thing you need is a Valid Credit Card and a Phone Number. Before you scream, ‘rip-off’, the Credit Card is setup as a ‘zero Spending Limit’ account, so unless you authorize charges you won’t be billed instead your service will be discontinued. Details for this is outlined by the Azure Team here.

Another thing Microsoft will do a $1 transaction to confirm the card. They will revert it back, but if you, like me are in a country where USD is not the national currency, then your bank may charge additional fees for the USD transaction that’s non-refundable.

With the gotchas out of the way, head over to the Windows Azure Free Trail Signup Page

azure-signup-page

Step 1: Once you click on ‘Try it Now’, it will request you to login using a Microsoft ID. As soon as you log in, you will be presented with the following dialog

azure-signup-step-1

As mentioned here, you will need to provide a mobile phone number and a Credit Card. Click on the > arrow to continue to the next step.

Step 2: Verify your Account

Here you have to provide a valid mobile number. They already lock in your region based on your IP address (as you can see they have detected India for me). With the number, you have two options receive a SMS/Text message of receive a call. I picked SMS (incoming SMS is free in India) and click on the Send Text Message button.

azure-sign-up-step-2-a

Once you click on the Send Text button, you will get an additional field to enter the code that was sent to you in the message.

azure-sign-up-step-2-b

Click on Verify code. Once verified the ‘Next’ button will be enabled.

Step 3: Provide Credit Card Info. Click Next to continue to the Credit Card information page. Fill in your credit card details and finish off the wizard. Now you are subscribed to the 90 Day Trial.

azure-sign-up-complete

Building your first Azure WebSite with WebMatrix 2

Now that we have a Windows Azure account going, let see what it takes to setup our first WebSite.

Step 1: Login to your Azure Account Click on the ‘MANAGEMENT PORTAL’ to do to your Azure Dashboard, or directly navigate to the Management Portal

azure-web-site-step-2

Step 2: In the Management portal click on ‘New’ to start off the new Site creation process.

The basic setup is selected and all we have to do is provide a subdomain name. I have provided ‘sumitkm’ above. So the URL for the website will be http://sumitkm.azurewebsites.net/. Once you provide the subdomain the portal will verify its availability and indicate success via the ‘green check’.

Step 3: Click on ‘Create Web Site’ to kick off the website creation process.

Once the site creation is complete, you’ll see the site in the dashboard.

azure-web-site-step-3

Step 4: Click on the WebMatrix button to launch Microsoft WebMatrix2. If you don’t have it installed, it will attempt to install it for you via the Web Platform Installer. If you are using Firefox it will install a .NET helper plugin before it install the Web PI or launching WebMatrix2.

web-matrix-download-site

Once WebMatrix 2 launches you will get a screen similar to the following.

Step 5: Select ‘Yes, Install from the Template Gallery’. You can select Application Gallery too, to setup an application like WordPress, Orchard CMS, Umbraco etc. For our sample we will select the Template Gallery.

web-matrix-select-template

Step 6: As we can see, there are multiple templates available out of the box. Around 12 in total using various technologies like ASP.NET, PHP, NodeJS or plain HTML5. This tells us that WebMatrix2 can be used as a lightweight Source editor for all these technologies.

We provide a local site name (sumitkm in the screenshot) and click Next.

WebMatrix initiates the generation process and uses the template to generate the entire site. It shows the following screen

web-matrix-publish-complete

Step 7: Click continue to begin the publish process. Once publish complete you will see the ‘Publish Complete’ notice. Now the Site is available on the Web.

azure-web-site-default-content

If you navigate to the site, you will see the default site as follows

Updating the Site

Let us update the project to replace the default text in the home page. We will also enable a RSS Feed, Twitter Stream and Flickr Photo stream. Click on the ‘Files’ tab to list out all the files in the project.

Personal-Site-SiteLayout-Initial

 

The _SiteLayout.cshtml file has the Introduction. We open it and update the Text to something more appropriate.

Next we update the Contents/_Blog.cshtml file. We update the RSS Feed Url. I have used ‘http://sumitmaitra.wordpress.com/rss’ feel free to use your favorite RSS Feed here.

Publish-Step-3-Azure-15

For the Twitter updates we change the Contents/_Twitter.cshtml file. We provide a twitter handle, I have used mine here.

Publish-Step-3-Azure-16

Finally, Yahoo’s Flickr is an image service. To get pictures from the service you need to register with them and obtain a Key. The Key looks like a Random string. You have to provide the key and your user account to be able to fetch public images from Flickr’s timeline.

Publish-Step-3-Azure-17

With these 4 changes in place we are ready to publish the updates to our site.

Publish-Step-3-Azure-19

Click on the Publish button from the Ribbon on Top

web-matrix-update

clip_image002[8]
WebMatrix will detect the changed and added files and bring them up in the Publish Preview dialog. Once Publish Completes, you will get a notification at the bottom. Now you can visit the website to see
the changes

Publish-Step-3-Azure-18

Conclusion

We saw how easy it is to get started with Azure WebSites and WebMatrix 2. In an Enterprise setting where the Enterprise may have an Azure service account already available, Azure WebSite + WebMatrix 2 is an ideal combination for getting up and running with simple sites and applications.

Give me a +1 if you think it was a good article. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Akhilesh on Wednesday, September 26, 2012 11:46 PM
Good article. please write more about Azure based muti tenant solutions
Comment posted by Abby on Friday, October 5, 2012 5:23 AM
very informative post indeed.. being enrolled in http://www.wiziq.com/course/57-fresher-training-projects was looking for such articles online to assist me.. and your post helped me a lot
Comment posted by Oswaldo on Sunday, November 18, 2012 9:31 PM
good article i'm starting in WebMatrix and not as plugging my web project matrix with SQL Azure  if you can help me with this question would greatly appreciate it

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel