Develop and Deploy Web Apps on Windows Azure with Microsoft WebMatrix 2

WebMatrix 2, a free tool from Microsoft, might well be the sleeper hit development tool you've never heard of. If you're a web developer, regardless of your chosen development language or platform, you should seriously consider taking a look at WebMatrix 2. If you're planning to host or are already hosting your websites in Windows Azure, you should be aware of WebMatrix's deep integration with the Windows Azure Portal, which makes deployments super quick (usually measured in seconds, not minutes) and painless (WebMatrix 2 takes care of handling the synchronization headaches for you). What's more, WebMatrix 2 provides rich support for a wide swath of web programming languages and platforms, including:

In addition to these technologies, WebMatrix 2 speeds up your development cycle by providing rich support for customizing sites built on open-source web apps for blogs, content management systems (CMSs), e-commerce, forums, media galleries, and wikis -- among them Drupal 7, Joomla!, WordPress, Umbraco, DotNetNuke, and Orchard.

Once you have your site structured in WebMatrix, regardless of whether your site is, say, hand-crafted PHP or a fully database-driven Drupal site, pushing it out for hosting within Windows Azure websites is a breeze. In this article, I'll lead you on a tour of the major features that WebMatrix offers, then provide an example that shows how easy it is to customize a Drupal site and deploy it to Windows Azure websites, all performed using WebMatrix 2.

Getting Acquainted with WebMatrix 2

WebMatrix is an extremely flexible web development environment that handles diverse workflows. You can start from scratch locally (where you create a new website locally, edit and test locally, and ultimately push it out to a remote server); open an existing local site on your file system; or even open an existing remote website (where you can edit individual files in situ or download the entire site, so that you can run tests locally before pushing the changes back to the live server). Deployments to your remote site are performed within WebMatrix using FTP or Web Deploy.

You can create a new site in one of two ways, as shown in WebMatrix's start screen in Figure 1.


Figure 1: WebMatrix Start Screen

You can either choose to start from a template via the Templates option, which provides the scaffolding for a site that you customize (such as for an ASP.NET website), or you can create a new site from a web app from the App Gallery (such as when creating a WordPress site).

Some web apps in the App Gallery extend WebMatrix core functionality to provide a more tailored experience. Such extensions include additional buttons in the Ribbon that, for example, take you to key configuration pages within the application, as well as support statement completion when editing code that's both language-specific (e.g., PHP) and application-specific (e.g., WordPress). Additionally, WebMatrix provides a pluggable model for running your website within various device emulators such as iPhone, iPad, and Windows Phone.

One of the biggest productivity boosts that WebMatrix gives web developers is the help it provides in setting up the development environment. Suppose you want to build a Drupal website but have never configured your machine for doing so. When you select a site from the App Gallery, WebMatrix will install and configure all the dependencies for that platform on your system. To continue with the example, Drupal requires PHP and a SQL Server or MySQL database. WebMatrix can install and configure any of these dependencies that your machine lacks.

Experiencing WebMatrix 2

Rather than run through a bulleted list of the features that make WebMatrix compelling, let's instead take a look at those features in action. More specifically, let's explore what the WebMatrix experience is like, starting from a clean box with only a fresh installation of Windows 7 to creating a new site and then deploying it to Windows Azure websites. For the sake of choosing something a little less familiar to most .NET developers, let's follow this process to build a Drupal 7 website.

Installing WebMatrix

When you click the Download button from the WebMatrix download site and run the executable, you'll first observe that Web Platform Installer 4.0 is installed and ready to begin the WebMatrix 2 installation. (Web Platform installer will take care of inspecting your system for the required prerequisites and adding them to the installation process.) Because we started on a clean Windows 7 machine, we see on the Web Platform Installer 4.0 screen that .NET Framework 4, SQL Server 4 Compact, IIS 7.5 Express, and Web Deploy will be installed along with WebMatrix. After you click I Accept, Web Platform Installer will simultaneously download and install the required software. When the installation process is finished, you'll be ready to run WebMatrix from the Start menu; it's that simple.

Creating Your First Drupal Site in WebMatrix

With WebMatrix installed, let's move on to building our Drupal website. From the home screen, click the App Gallery button. From the gallery, shown in Figure 2, choose Acquia Drupal 7, name your site, and click Next.


Figure 2: Choosing Drupal from the Gallery

Now you must select the database you want to use, as shown in Figure 3. In our example, we choose to use SQL Server. Note that neither SQL Server nor MySQL are installed.


Figure 3: Choosing the Database

After you've clicked Next, note all the prerequisites that WebMatrix 2 downloads and installs for you automatically. These prerequisites are required to configure your machine to run Drupal and include the following applications:

You must accept the EULA to proceed. After you've done so, WebMatrix will download and install all the aforementioned dependencies required for Drupal. When the installation is finished, your machine will be fully ready to run Drupal, as shown in Figure 4. Using WebMatrix lets you avoid the hassle of setting up your machine and frees you to focus on implementing your site. So let's look at creating our Drupal site next.


Figure 4: A Successful Installation of Drupal and Its Dependencies by WebMatrix

Creating and Editing Your Drupal Site

After you click OK in the Finish dialog box, the initial setup for Drupal will run automatically, appearing in a new browser window. Here you need to run through the initial Drupal configuration. On the Configure site screen, simply provide a site name and site email address (the email doesn't have to be live). Here you'll also need to specify an administrator username and password, set your default country and time zone, and adjust your update notification settings as desired. When you're satisfied, click Save and continue.

Now you're done! You can click the Visit your new site link to view the Drupal site and begin configuring its content or close the browser and return to WebMatrix to edit its code files.

When you return to WebMatrix, you'll see a dashboard for your Drupal site, shown in Figure 5, which provides quick links for viewing the site in the browser and accessing it in Windows Explorer as well as links to Drupal community resources.


Figure 5: The Drupal Dashboard in WebMatrix

The Ribbon bar provides a button that takes you directly to the Drupal admin page within the browser. Whenever you want to revisit your site locally, you can click the URL link on the dashboard, then click the Run button.

Making a Code Change to a Drupal Site

With our new Drupal site open in WebMatrix, let's make a simple code change. There are some tasks in Drupal that you can't accomplish via the Drupal administration site and that require you to edit the PHP files directly. One such example is when you want to customize the layout of a theme. To make a trivial example of this, we'll add a fixed footer that reads "Website built with WebMatrix 2" to the theme's page template.

To begin, click the Files tab, navigate to page.tbl.php for the Bartik theme (under themesbartiktemplates), then double-click page.tpl.php to edit the PHP template file. With the file open in the editor, scroll down to the bottom; just inside the closing div tag for the footer, add an H2 element with the content shown in Figure 6.


Figure 6: Editing PHP in WebMatrix

To see this change in action, click the Run button (in the upper left of the WebMatrix Ribbon, under the Home tab). The updated site, shown in Figure 7, is very simple, indeed.


Figure 7: The Updated Drupal Site as Seen in the Browser

Deploying to Azure Websites

You can deploy to a hosting provider using FTP or Web Deploy. In addition, WebMatrix 2 includes support for deploying to Windows Azure websites, which provides the lowest-cost option for deploying a website to Azure. Here we'll see how to deploy our Drupal site to Azure using WebMatrix.

There are multiple ways to deploy to Azure websites using WebMatrix. If you haven't already created your website locally in WebMatrix, you can create a new website from within the Windows Azure Portal and launch WebMatrix from the portal to edit it. To do so, click Websites from the new Azure Portal and select your website from the list. Then click the WEBMATRIX button in the bottom toolbar, as shown in Figure 8.


Figure 8: Launching WebMatrix for a Website in the Windows Azure Portal

This will perform a ClickOnce installation of WebMatrix, if you haven't already installed it. If WebMatrix is already installed, then clicking the WEBMATRIX button will load WebMatrix and automatically open your Azure website as a remote site. You won't have to enter any connection details or credentials, because this process handles that process behind the scenes.

An alternative deployment approach is used when you've already created your website locally in WebMatrix and then want to push it out to an existing Windows Azure website. As of this writing, there's no way to provision a new Windows Azure website at deployment time from WebMatrix; you must first use the Azure Portal to create a placeholder website. To accomplish this "pre-provisioning," log on to the Azure Portal, click the + NEW button in the bottom toolbar, then select Website and From Gallery. On the Find Apps for Azure screen, select Acquia Drupal 7 and click the right arrow button.

Next, configure your Drupal website to create a new SQL database under the Azure subscription of your choice. Specify a username and password for the SQL Azure database that will be created, as shown in Figure 9, and click the right arrow button.


Figure 9: Configuring the Drupal Website in Azure

On the next screen, you specify the name of the SQL Azure database that will be created, the edition, maximum size, default collation, and whether the database should be created under an existing SQL Azure server or a new server should also be created. In our case, we chose to create a new SQL Azure server.

Finally, enter logon credentials for the SQL Azure server and select a region. Select the Allow Windows Azure Services to access the server check box to begin provisioning your Drupal website on Azure websites. In about 30 seconds, your website should be provisioned and ready for your deployment from WebMatrix.

For WebMatrix to authenticate with and deploy to your Azure website, you only need to provide a Publish Profile for the site you just created. To obtain this file, within the Azure Portal click the website so that you're taken to its dashboard. In the quick glance section, shown in Figure 10, click the Download publish profile link and save this file to your local drive.


Figure 10: The quick glance Pane

Now return to your website in WebMatrix and click the Publish button. In the dialog box that appears, shown in Figure 11, click the Import publish settings link under Common Tasks at the right, then select the Publish Profile you just downloaded. All the settings needed to deploy to the Azure website as well as to the SQL Azure database will be filled in for you and ready for use. Just click Continue to deploy your updated Drupal site.


Figure 11: Publishing Settings after Importing a Publish Profile

The first time you do this, WebMatrix will encourage you to run a compatibility check against the Azure website to ensure that it's compatible with your local site. You can skip this step if you want. However, assuming you choose to proceed with this check, you should ultimately see a successful outcome; click Continue.

Next, you'll see a dialog box, shown in Figure 12, which shows the differences between your local site and the remote site. For your initial deployment, you should select Delete files on the remote server that are not on my computer and the check box next to your database's name, so that everything is fully synchronized with your local copy. Then click Continue.


Figure 12: WebMatrix Publish Preview Dialog Box

The status of the deployment will be shown as a small pop-up window near the bottom of the WebMatrix screen. When publishing is finished, you'll see a "publishing complete" status. Clicking the link will take you to your newly updated Drupal site that you created and modified using WebMatrix.

Additional Features of WebMatrix

This article only scratched the surface of what you can do with WebMatrix 2. In addition to the features we looked at here, WebMatrix provides integrated tooling that lets you perform tasks such as managing the schema and data of your SQL Server and MySQL databases and running performance and search engine optimization (SEO) reports generated by crawling your website. Additionally, when running your website locally, you can easily monitor HTTP requests (which can be quite helpful for troubleshooting) -- plus, the tools provide more capabilities for editing your website's code. Give WebMatrix 2 a try and see for yourself how it can help your website development efforts.