DarksideCookie

I guess this post isn’t so much for us “professional” web developers as it is for the hobby developers. Having that said, I can probably think of about a hundred reasons why this would actually be good for me as a pro as well…

Microsoft has currently an Azure feature called Windows Azure Web Sites in preview. It is probably about to be released pretty soon, or at least I hope so. But I don’t want to get into Windows Azure Web Sites as such. What I want to have a quick chat about, is how extremely easy it is to get up and going with a simple website using Azure Web Sites and WebMatrix.

WebMatrix as a tool, is basically a small development environment, bundled with a bunch of things like IIS Express so on. It also has a whole heap of predefined templates, making it really easy to get up and running with a new blog or whatever. It also supports node.js and php development, which is quite neat…

But let’s start by looking at getting an Azure Web Site up and going…

The first thing you need to do is to log into the Azure management portal, and create a new Web Site. This is done by clicking the “Web Sites” link on the left hand side, and then the big ass plus sign at the bottom right of the screen. This opens up a creation pane thingy, where you can either select “Quick Create” to create an empty site, or “Create With Database” to create a site connected to a new, or existing, database, or last but not least, you can click “From Gallery” to create a site based on a template.

From gallery is a ridiculously simple way to get a whole application stood up for you within minutes. Among the templates found in the gallery, you have Drupal, BlogEngine.NET, DotNetNuke, phpBB and Composite C1 CMS, which is really awesome. It means that you can have a blog or CMS based application up and going within minutes…

I will go for “Quick Create” as I will build a custom application using WebMatrix.

All you need to do, is insert a unique Url, or rather a unique prefix to azurewebsites.net, select a region where you want to host it, and if you have more than one Azure account connected, select what account to use…and then of course click “Create Web Site”

(You can connect a custom domain, but in that case you have to scale up your site beyond the free limit…)

And then, a minute later, it says that you web site has been created

Now that the site is up and running, browsing to it will give you a simple default web page

Ok…now that we have a web site up and running, it is time to do what I promised in the beginning, and that is to work with it using WebMatrix. This is ridiculously simple to do if you are using IE, if you are in Chrome, it is a bit more complicated as you need to install an extension. Luckily, I have both installed, so I just switch over to IE for this step…

If you click on the newly created web site in the list of available web sites, you will get a dashboard showing some very empty statistics about your site. But you will also get a WebMatrix button at the bottom

Clicking that, will open a “pop-up” that asks for your permission to do things. Just say yes. After that, WebMatrix will pop-up for you.

(This obviously requires you to have WebMatrix installed, which can be done through the Web Platform Installer)

Once WebMatrix opens, it gives you a screen saying that an empty site was detected. This is pretty neat, cause it now offers you the ability to either pick an open source application from the Application Gallery, or pick a website from the Template Gallery. I don’t really know the difference between this to be honest, but I don’t really care in this case. For this post, I am choosing “No, continue anyway”, which let’s me start with a completely empty site.

Next, WebMatrix configures a bunch of things for you automatically, before giving you control to do what you want with your site. But the nice thing is that everything is now properly configured for publishing and stuff.

In my case, I start off by going to the “Settings” area and add a new default page called index.cshtml, which is what my single page will be called.

Then I go to “Files” (bottom left), and add a new CSHTML file called index.cshtml (no surprise there…). But as you can see, it supports a multitude of different file types, including Classic ASP, which is quite funny…

Adding a CSHTML page, does not mean that you will be doing ASP.NET MVC. You will get the Razor view engine, but not the MVC part. It is like a mix between classic asp with a Razor view engine, which means it supports layouts and .NET, which classic asp didn’t, but looking at it, it is very similar as you put all your code in the actual page…

Before adding any markup, I am also deleting the hostingstart.html page, as it is not needed anymore.

The HTML markup I am adding looks like this

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Is It Friday?</title>
    </head>
    <body>
        @if (DateTime.Now.DayOfWeek == DayOfWeek.Friday) 
        { 
            <h1>It's freaking FRIDAY today! Let the weekend begin!</h1> 
        }
        else if (DateTime.Now.DayOfWeek == DayOfWeek.Thursday) 
        { 
            <h1>No...but it is Friday eve!</h1> 
        } 
        else 
        { 
            <h1>Nah...it's just @DateTime.Now.DayOfWeek.ToString()</h1> 
        }
    </body>
</html>

It is just a simple “Is It Friday” app. You can now wither browse to it locally, with the address available in the “Site” section. Or, you can just publish it to the cloud. Running it locally for debugging is of course a good idea, but I leave that up to you…

Clicking “Publish” will do just that. it will find the files that have changed, and then upload those for you after confirming with you that you agree with which files have been modified.

And as you can see, it automatically includes a gazillion references for you, but you can ignore that for the most part. Just click “Continue”.

You can follow the progress at the bottom of the screen, and after just a minute or two, you will get a message saying it is done. The message also includes a link to the site, so all you have to do is to click it to see the result.

That’s all there is to it! Nice and easy! Don’t know if it really warranted its own blog post, but I found it so smooth and cool that I had to do something…