WebMatrix 3 is the free site editor for Azure

On May 1st, Microsoft officially launched WebMatrix 3. As with so many other Microsoft products, the third version is the one worth serious consideration. WebMatrix is a simple, yet powerful way to whip up quick web sites – particularly so when combined with Windows Azure Web Sites.

Most professional developers do not have an active recollection of WebMatrix. That’s ok, because the tool isn’t really aimed for their day job. But it is potentially useful for anyone publishing information on the Internet – including professional developers. Furthermore, WebMatrix 3 represents the latest incarnation of a technology line that has had its effect on many development scenarios. For these reasons, I think this is a good time for even professionals to look at WebMatrix.

A decade in a nutshell

WebMatrix-timelineAlready in 2003, Microsoft released ”ASP.NET Web Matrix”, a free but unsupported WYSIWYG HTML editor that enabled simple ASP.NET programming tasks.

Starting from Visual Studio 2005, Microsoft decided to release the Visual Studio Express line – i.e. free and lightweight versions of the full IDE. This meant the end of ASP.NET Web Matrix, and Visual Web Developer 2005 became the recommended free alternative.

From 2005 through 2011, the name Web Matrix wasn’t much spoken, as Express Editions took its place.

But in July 2010, Microsoft launched WebMatrix – words written as one, no ASP.NET mentioned – in its new form: Again, it is a standalone web site editor with support for Web Platform Installer templates and modules, multiple deployment approaches and a simple code editor.

WebMatrix 2 was launched in fall 2012, delivering many usability features, preliminary Windows Azure support and – somewhat surprisingly – support for developing sites in PHP and Node.js as well. WebMatrix 3 now tops this with features such as source control support, complete Azure Web Sites integration and remote site editing in the cloud. The next chapters will overview WebMatrix’ capabilities and its usage scenarios.

Making site creation easy

WebMatrix is aimed at non-professional development where you need to quickly whip up something that works easily. It is not a full-fledged programming platform by any measure: for example, there is no debugger or real compilation support in the editor.

image

But WebMatrix’ forte is the quick creation and editing of sites. You have three alternative approaches to creating a site: A blank project, a project from template (on ASP.NET, PHP or Node.js), or a project based on an app. The first two are close to their Visual Studio equivalents: you get a code-focused view into an empty project, or one populated with typical templates, styles and so forth. The templates are quite nicely done, but nothing earth-shattering.

imageThe best part of the templates is their end-to-end ease of use. Suppose you want to make a quick PHP site? WebMatrix will crack out the Web Platform Installer and configure everything for you. Want to try your hand with Node.js? Create a new project, and within minutes you’ll find your server installed with iisnode (Support for fast Node.js on IIS), NPM (Node.js package manager) and the other necessary tooling.

There has never been an easier way to try out PHP or Node.js on Windows. That alone is a sufficient reason to take WebMatrix for a spin.

Another angle at WebMatrix is the app gallery. It enables you to install stuff from the Windows Web App Gallery, which includes a host of web applications ranging from high-profile content management platforms such as WordPress, Joomla and Umbraco to e-commerce engines and wiki toolkits.

WebMatrix enables single-click installation of said applications – though really, it is the Web Platform Installer doing its magic. For example, creating a new web site and picking WordPress from the gallery installs a MySQL server on your computer and configures your WordPress installation to run from that. There really is no technical installation required; you just configure your content parameters (blog name, admin password etc.) and you’re ready to go.

Given a relatively fast Internet pipe, WebMatrix can get you a WordPress site running on your local IIS in three minutes. With zero pre-configuration.

While most developers wouldn’t kickstart their professional projects with such a simple approach, most developers also find themselves wanting to deploy their own blogs, or needing to support relatives or sports clubs wishing to publish simple sites. WebMatrix makes this sort of non-professional publishing very smooth indeed, enabling you to easily develop the sites locally and then push them online.

Integrating with Windows Azure

imageOnce your site is complete, WebMatrix helps you deploy it. The simplest approach is using FTP to push the files, but more advanced hosters support the Microsoft Web Deploy stack (a.k.a. msdeploy). With Azure, the support goes even one notch further: you can actually create the site in WebMatrix.

What actually gets created is a Windows Azure Web Site. If you’re unfamiliar with WAWS, it is the simplest version of web hosting available on Azure. For more information, check out my comparisons of Azure Web hosting architectures.

Thereafter using Windows Azure is a breeze. Clicking the Publish button will then push your site with all its dependencies into the cloud. For example, publishing your WordPress site would push all the files on your site into the cloud. It would also make sure the necessary PHP components are installed, and your MySQL database would then be pushed into Azure’s MySQL hosting.

image

 

Working in WebMatrix

While WebMatrix isn’t as full-featured as Visual Studio IDE, the differences won’t matter for most simple applications. The following rundown of WebMatrix features aims to illustrate the key differences between the tools.

WebMatrix-workflow

  • Importantly, WebMatrix has an extensibility model. Its extensions are its own so there aren’t that many of them, but the number is growing. This mechanism will help developers overcome the problems created by the missing features.
  • image Almost all actions in the UI are linked to tutorials on Microsoft site and Pluralsight videos guiding the user. The Pluralsight videos are of the typical good quality, and are available for free.
  • The code editor has VS-like features such as IntelliSense, but lacks others such as snippets and refactorings. Overall, it is a sufficient experience for simple development.
  • With ASP.NET, lack of compilation means you have to organize your shared code into the App_Code directory. Of course, there’s nothing stopping you from using whatever assemblies or NuGet packages you lay your hands on.
  • With PHP and Node.js, lack of compilation is of course a non-issue. For these languages WebMatrix is just a quite decent syntax-highlighting and IntelliSense-complete editor.
  • WebMatrix embraces modern supporting web technologies to an extent – actually farther than Visual Studio. For example, TypeScript gets syntax highlighting natively and you can get compilation through a separate extension. Also, CoffeeScript, LESS and Sass are supported and compiled by a separate plugin.
  • WebMatrix has a built-in editor for manipulating the schema and contents of MySQL and SQL Server databases. For SQL Server, the Compact model .sdf files are supported (and used by default).
  • image Git and TFS source control is natively supported within the IDE, but you can use anything you want. Note that both these are shipped as plugins (although installed by default), enabling fast upgrade cycles – and of course, addition of other SCM integrations.
  • The editor can check the web site for typical errors such as missing meta fields, broken links and such. Additionally, WebMatrix provides an easy UI to test the site in any browsers you have installed on your computer. Through plugins you can also use various mobile device emulators and BrowserStack, the cloud-based multibrowser testing environment.
  • Once deployed, you can employ “Remove view” to edit files on the production site without specifically downloading them to your computer. This enables quick fixes and edits right there in the production, without going through the full publishing process (not that it would take more than thirty seconds either).
  • imageWithin ASP.NET, you can leverage the ASP.NET Web Helpers NuGet package, which enables several easy-to-use shortcuts for various common tasks.These helpers are not technically bound to WebMatrix, but to the non-compiling web pages development model.

 

Summary

WebMatrix has matured to the point of being very useful for non-professional web developers trying to whip up quick web sites. It is also technologically solid enough to be useful for professionals for quick mockups and technology tests.

While WebMatrix does not really promote best development practices (inline code and remote editing are the foremost examples of problematic paradigms), it does provide excellent productivity for simple scenarios.

For really specific areas of repetitive development, web professionals might be able to unload some of their work to others by creating templates, NuGet packages or even local extensions that enable some hardcore business users to create and maintain simple sites.

Although WebMatrix is still far from complete, most obvious annoyances (to a pro developer anyway) are actually differences from Visual Studio – a valid approach, but not a real concern for the main target audience.


Jouni works as a consultant focusing on Microsoft technologies and technology strategy. He is also a Microsoft Regional Director. Prior to his current job, he has an extensive background in development, IT administration and business management. He's been doing this for a living since 1995.

One Response to “WebMatrix 3 is the free site editor for Azure”

  1. 94Fay

    Aug 02. 2017

    Hi admin, i must say you have high quality articles here.
    Your blog should go viral. You need initial traffic
    boost only. How to get it? Search for: Mertiso’s tips
    go viral

Leave a Reply