Develop and deploy a web site with Microsoft WebMatrix

This guide describes how to use Microsoft WebMatrix to create and deploy a web site to Windows Azure. You will use a sample application from a WebMatrix site template.

You will learn:

How to sign into Windows Azure from within WebMatrix
How to create a site using a built in template with WebMatrix
How to deploy the customized web site directly from WebMatrix to Windows Azure.

Note

To complete this tutorial, you need a Windows Azure account that has the Windows Azure Web Sites feature enabled. You can create a free trial account and enable preview features in just a couple of minutes. For details, see Create a Windows Azure account and enable preview features.

Sign into Windows Azure

Launch WebMatrix
If this is the first time you've used WebMatrix 3, you will be prompted to sign into Windows Azure. Otherwise, you can click on the Sign In button, and choose Add Account. Choose to Sign in using your Microsoft Account.
If you have signed up for a Windows Azure account, you may log in using your Microsoft Account:

Create a site using a built in template for Windows Azure

On the start screen, click the New button, and choose Template Gallery to create a new site from the Template Gallery:
The Template Gallery will show a list of available templates that can run locally or on Windows Azure. Select Bakery from the list of templates, enter bakerysample for the Site Name, and click Next.
If you are signed into Windows Azure, you now have the option to create a Windows Azure Web Site for your local site. Choose a unique name, and select the data cetner where you would like your site to be created:

After WebMatrix finishes building the web site, the WebMatrix IDE is displayed:

Test the web site

The bakery sample includes a simulated order form that sends an email message with the item ordered to a Windows Live Hotmail account that you provide.

In the left hand navigation pane of WebMatrix, expand the bakerysample folder.
Open the Order.cshtml page by double-clicking the file name.
Find the comment that says //SMTP Configuration for Hotmail.
Change the values in the following lines to match your own email provider:
```
WebMail.SmtpServer = "smtp.live.com";
WebMail.SmtpPort  = 25;
WebMail.EnableSsl = true; 


//Enter your Hotmail credentials for UserName/Password and a "From" address for the e-mail
WebMail.UserName = "";
WebMail.Password = "";
WebMail.From = "";
```
Change the value of WebMail.SmtpServer to the name of the email server you normally use to send email. Then fill in values for the user name and password. Set the From property to your email address.
On the WebMatrix ribbon click Run to test the site.
Click Order Now on one of the products and send an order to yourself.
Check your email and make sure you got the order confirmation. If you have difficulties sending email, see Issues with Sending Email in the ASP.NET Web Pages (Razor) Troubleshooting Guide.

Deploy the customized web site from WebMatrix to Windows Azure

In WebMatrix, click Publish from the Home ribbon to display the Publish Preview dialog box for the web site.
Click to select the checkbox next to bakery.sdf and then click Continue. When publishing is completed the URL for the updated web site on Windows Azure is displayed at the bottom of the WebMatrix IDE.
Click on the link to open the web site in your browser:

The URL for the web site can also be found in the Windows Azure portal by clicking Web Sites to display all web sites for your subscription. The URL for each web site is displayed in the URL column on the web sites page.

Modify the web site and republish it to the Windows Azure web site

You can use WebMatrix to modify the site and republish it to your Windows Azure web site. In the following procedure you will add a check box to indicate that the order is a gift.

Open the Order.cshtml page.

Locate the "shiping" class form definition. Insert the following code just after the <li> block.

<li class="gift">
    <div class="fieldcontainer" data-role="fieldcontain">
        <label for="isGift">This is a gift</label>           
        <div>@Html.CheckBox("isGift")</div>
    </div>
</li>

Locate "var shipping = Request["orderShipping"];" line in the file and insert the following line of code just following it.
```
var gift = Request["isGift"];
```
Just after the block of code that validates that the shipping address is not empty in the following code snippet.
```
if(gift != null) {
    body += "This is a gift." + "<br/>";
}
```
Your order.cshtml file should look similar to the following image.
Save the file and run the site locally and send yourself a test order. Make sure to test the new check box.
Republish the site by clicking Publish on the Home ribbon.
On the Publish Preview dialog box make sure both the Order.cshtml is checked and click continue.
Click on the link to open the web site in your browser and test the update on your Windows Azure web site.

Next Steps

You've seen how to create and deploy a web site from WebMatrix to Windows Azure. To learn more about WebMatrix, check out these resources: