Republished with Permission - Original Article

Last week I published several blog posts that covered some new web development technologies we are releasing:

IIS Developer Express: A lightweight web-server that is simple to setup, free, works with all versions of Windows, and is compatible with the full IIS 7.5.

SQL Server Compact Edition: A lightweight file-based database that is simple to setup, free, can be embedded within your ASP.NET applications, supports low-cost hosting environments, and enables databases to be optionally migrated to SQL Server.

ASP.NET “Razor”: A new view-engine option for ASP.NET that enables a code-focused templating syntax optimized around HTML generation.  You can use “Razor” to easily embed VB or C# within HTML.  It’s syntax is easy to write, simple to learn, and works with any text editor.

My posts last week covered how you’ll be able to take maximum advantage of these technologies using professional web development tools like Visual Studio 2010 and Visual Web Developer 2010 Express, and how these technologies will make your existing ASP.NET Web Forms and ASP.NET MVC development workflows even better.

Today we are also announcing a new lightweight web development tool that also integrates the above technologies, and makes it even easier for people to get started with web development using ASP.NET.  This tool is free, provides core coding and database support, integrates with an open source web application gallery, and includes support to easily publish/deploy sites and applications to web hosting providers.

We are calling this new tool WebMatrix, and the first preview beta of it is now available for download.

WebMatrix is a 15MB download (50MB if you don’t have .NET 4 installed) and is quick to install.

The 15MB download includes a lightweight development tool, IIS Express, SQL Compact Edition, and a set of ASP.NET extensions that enable you to build standalone ASP.NET Pages using the new Razor syntax, as well as a set of easy to use database and HTML helpers for performing common web-tasks.  WebMatrix can be installed side-by-side with Visual Studio 2010 and Visual Web Developer 2010 Express.

Note: Razor support within ASP.NET MVC applications is not included in this first beta of WebMatrix – it will instead show up later this month in a separate ASP.NET MVC Preview - which will also include Visual Studio tooling support for it.

WebMatrix is a task-focused tool that is designed to make it really easy to get started with web development.  It minimizes the number of concepts someone needs to learn in order to get simple things done, and includes and integrates all of the pieces necessary to quickly build Web sites.

When you run WebMatrix it starts by displaying a screen like below.  The three icons on the right-hand side provide the ability to create new Web sites – either using an existing open-source application from a web application gallery, from site templates that contain some default pages you can start from, or from an empty folder on disk:

Create a Web Site using an Existing Open Source Application in the Web Gallery

Let’s create a new Web site.  Instead of writing the site entirely ourselves, let’s use the Web Gallery and take advantage of the work others have done already.

We’ll begin by clicking the “Site from Web Gallery” link on the WebMatrix home-screen.  This will launch the below UI – which allows us to browse an online gallery of popular open-source applications that we can easily start from, tweak/customize, and then deploy using WebMatrix.  The applications within the gallery includes both ASP.NET and PHP applications

We can filter by category (Blog, CMS, eCommerce, etc) or simply scroll through the entire list.  For this first site let’s create a blog. We’ll build it using the popular BlogEngine.NET open source project:

When we select BlogEngine.NET and click “Next”, WebMatrix will identify (and offer to download) the required components that need to be installed on my local development machine in order for BlogEngine.NET to run.

IIS Express is included with WebMatrix, so I already have a web-server (and don’t need to-do anything in order to configure it).  SQL Compact Edition is also included with WebMatrix, so I also have a light-weight database (and don’t need to-do anything in order to configure it).  Because SQL Compact is brand new, most projects in the Web Gallery don’t support it yet.  We expect most projects in the Web Gallery will add it as an option though in the future.  If a project requires either SQL Express or MySQL as a database, and you don’t have them installed, they will show up in the dependencies list below, and WebMatrix will offer to automatically download, install, and configure them for you.

PHP applications in the web gallery (like WordPress, Drupal, Joomla and SugarCRM – all of which are there) will download and install both PHP and MySQL.

Because I already have SQL Express installed on my machine, the only thing in my download list is BlogEngine.NET itself:

When I click the “I Accept” button, WebMatrix will download everything we need and install it on our machine:

When we click the “OK” button, WebMatrix will open up our new BlogEngine.NET project and display a site overview page for us:

This view within WebMatrix provides an overview of the project, and some quick links to-do common things with it (we’ll look at these more in a bit).

To start – we’ll click the “Run” button in the Ribbon bar at the top.  Clicking the “Run” button will launch the site using the default browser you have configured on your system.  Alternatively, you can click to expand the list and pick which installed browser you want to run the site with.  Clicking the “Open in All Browsers” option will launch multiple browsers for you at once:

IIS Express is included as part of WebMatrix – and WebMatrix automatically configures IIS Express to run the project when it is opened within the tool (no extra steps or configuration required). 

Running BlogEngine.NET will launch a browser and bring up the default page for the application (see below).  BlogEngine.NET by default ships with a home page that includes instructions on how to customize the site:

If you read the text it describes how the default adminsitrator password is “admin”/”admin”, and how you can login and customize the look and feel and content of the site.  Let’s login, then use the online admin tool to customize some of the basic settings of the site (the name, about the author, etc) and post two quick blog posts to get the site started:

The beauty is that I didn’t have to write any code (nor see any code for that matter) and was able to get the basics of our site up and running in only a few minutes.  This experience is a pretty consistent with all of the other applications within the web gallery.  They are all designed such that you can quickly install them using WebMatrix, run them locally, and then use their built-in admin tools to tweak/customize their core content and structure.

Now that we’ve configured the basics of our blogging site, let’s now look at how we can customize it even further. To-do that let’s go back to WebMatrix and click on the “Files” node within the left-hand navigation bar of the tool:

This will open a file-system explorer view on the left-hand side of the tool, and allow us to browse the site, and open/edit/add/delete its files. 

Most of the applications within the web gallery support a concept of “themes” and enable developers to tweak/customize the layout, styling and UI of the application.  Above I’ve drilled into BlogEngine.NET’s “themes” folder and opened the Site.Master file to customize the “standard” theme’s master layout.  We could tweak/customize it, hit save, and then run the site again to see our changes applied (note: pressing F12 is the keyboard short-cut to re-run the application). 

WebMatrix provides a lightweight, integrated work environment that allows us to run and tweak sites locally.  After we’ve finished customizing it, and have added some default content to the database, we’ll want to publish it to a hosting provider so that others can access our blog on the Internet. 

WebMatrix includes built-in publishing support that makes it easy to deploy Web sites and Web applications to remote hosters.  WebMatrix supports using both FTP and FTP/SSL as well as the Microsoft Web Deploy (aka MSDeploy) infrastructure to easily deploy sites to both low-cost shared hosting providers, as well as virtual dedicated/dedicated hosting providers.

To publish a site using WebMatrix, simply expand the “Publish” icon within the top-level ribbon UI:

When we select the “Configure” option it will bring up the following UI that allows us to configure where we want to deploy our site:

If you don’t already have a hosting provider, you can click the “find web hosting” link at the top of the publish dialog to bring up a list of available hosting providers to choose from:

Hosting providers are now offering Windows hosting plans that include ASP.NET + SQL Server for as cheap as $3.50/month (and these inexpensive offers include support for ASP.NET 4, ASP.NET MVC 2, Web Deploy, URL Rewrite and other features). 

The “find web hosting” link this week includes a bunch of hosting providers who are also offering special free accounts that you can use with WebMatrix – enabling you to try it out at no cost (they also have everything setup to work well on the server-side with WebMatrix and are testing their offers with the WebMatrix publishing tools).

Once you sign-up for a hosting provider, you can then choose from a variety of ways to publish your site to it:

FTP and FTP/SSL enable you to easily publish the local files of your site over to a remote server. 

The “Web Deploy” option supports publishing both your site files and the database content – and is the recommended deployment option if your hoster supports it.  When the “Web Deploy” option is selected, WebMatrix will list all of the local databases within your project and provide you with the option to specify the connection-string at the remote hosting provider where your database should be deployed for production:

Note: By default BlogEngine.NET uses XML files to store content and settings (and doesn’t require a database).  With the current BlogEngine.NET on the web gallery you can just enter

"Data Source=empty;database=empty;uid=empty;pwd=empty" as the remote database connection string in order to publish the site without needing to setup a database.

When you click “Publish”, WebMatrix will display a preview of the deployment changes:

Note: because BlogEngine.NET doesn’t need a database we’ll keep the database deployment checkbox unchecked.  If we did want to transfer a database we could select it in the publishing preview wizard and WebMatrix will automatically transfer both the site files and the database schema+data to the remote host, deploy the database to the hosting server, and then update your published web.config connection-string to point to the production location. 

Once we click “continue” WebMatrix will start the publishing process for our site, and after it completes our site will then be live on the Internet.  No extra steps are required.

In addition to initial deployments, WebMatrix also supports incremental file updates on subsequent publishes.  Make a change to a local file, click the Publish button again, and WebMatrix will calculate the differences between your local site and your published one and only transfer the files that have been modified (notice that the database by default will not be redeployed to avoid overwriting any data on the remote host):

Clicking the “continue” button above will only transfer the one modified file.  This makes updating even large sites easy and fast.

I’ve walked through how to create a new Web site using an open source application within the web gallery.  Let’s now look at how we can alternatively use WebMatrix to do some development of a custom site.

The two right-most icons on the WebMatrix home-screen provide an easy way to create a new site that is either based on a simple template of pages, or an empty site with no content:

Let’s click the “Site From Template” icon and create a new site based on a template.  We’ll select the “Empty Site” template and name the site we want to create with it “FirstSite”:

When we click the “ok” button WebMatrix will load a site for us, and display a site overview page that contains links to common tasks:

Let’s click either the “Files” icon in the left-hand navigation bar or the “Browse your Files” link in the middle overview-screen. Selecting either of these will show us the file explorer.  The “Empty Site” template actually does have one file in it by default – a file named Index.cshtml.  We can double-click it to open it within the WebMatrix text editor:

Files with a .cshtml or .vbhtml extension are ones that use the new “Razor” template syntax that I blogged about last week.  You can use Razor files either as the view files for an ASP.NET MVC based application, or alternatively you can also use them as standalone pages within an ASP.NET Web site.  We are referring to these pages as simply “ASP.NET Web Pages” – and you can add them to both new projects as well as optionally drop them into existing ASP.NET Web Forms and ASP.NET MVC based applications.

ASP.NET Web Pages built using Razor provide a simple, low concept count, way to do web development.  Many people will likely argue that they are not as powerful, nor have as many features, as an ASP.NET Web Forms or ASP.NET MVC based application.  This is true - they don’t have as many features, nor do they expose as rich a programming model.

But they are conceptually very easy to understand, are lightweight to get started with, and for many audiences provide the easiest way to learn programming and begin to understand the basics of .NET development with VB or C#.  ASP.NET Web Pages are also convenient to use when all you need is some basic server scripting and data display/manipulation behavior, and you want to quickly put a site together.

In the next part of the article, we will discuss the steps required to be followed for building a first ASP.NET Web Page including database connectivity.

Hope this helps,

Scott

Follow Scott at: twitter.com/scottgu

Scott Guthrie

AspAdvice Forums

AspAdvice Mailing Lists