Scott Hanselman

WebMatrix 2 - Front End Web Developers take note (ASP.NET, PHP, node.js and more)

September 19, '12 Comments [32] Posted in ASP.NET | ASP.NET MVC | Mobile | Open Source | WebMatrix
Sponsored By

Did you notice the release of WebMatrix 2? WebMatrix is a free, lightweight web development tool introduced in 2010. It's focus is on simplifying the web development experience for ASP.NET and PHP, and more recently node. Rob Conery actually turned me onto WebMatrix and we use it for the This Developer's Life Podcast website. I recommend it for students, designers, and web pros that either don't need or don't want the whole Visual Studio experience. It's also a nice companion to Sublime Text 2. There's even Git extensions, LESS, easy deployment and more for the front end developer.

If you want to download WebMatrix 2 and get started, it's free. It will use the Web Platform installer to install and you can use it along site VS if you want, or all by itself on any machine. It's actually a great companion for sites like Codecademy. Watch Vishal and Brady give a brief overview of the new features in WebMatrix 2 on Channel 9.

HTML, JavaScript, & CSS

The new Web Matrix 2 HTML editor adds useful stuff like code outlining, tag completion, formatting, syntax validation, and IntelliSense for HTML5.

WebMatrix has intellisense

The JavaScript editor has a better auto-formatting experience, and IntelliSense:

Intellisense in JavaScript

The new CSS editor in WebMatrix shares a lot with the new features included in the Visual Studio 2012 CSS editor. There's the color pickers, IntelliSense for the latest CSS3 modules, and better language support:

New CSS Color Picker

Here's the new hotness that I'm digging. For those who want to go beyond basic CSS, you can get preprocessors like LESS and Sass. Folks have been asking for better preprocessor support, and WebMatrix 2 includes support for LESS and Sass. The LESS editor supports the same great CSS features, along with IntelliSense for custom variables and mix-ins:

LESS

Like I said, there's lots of stuff built in. It's kind of a playground for features that will move their way between VS and WebMatrix.

File New Item

 

Related Videos: To learn more about the new CSS editors in WebMatrix 2, check out these short videos:

Razor with ASP.NET Web Pages 2

As I mentioned, Rob and I use ASP.NET Web Pages on This Developers Life. It's kind of like PHP in that you can mix code and HTML in one file except the syntax is Razor and the language is C#. The combination of WebMatrix and ASP.NET Web Pages is an easy way to get started with web development. Make a file, start writing HTML then add some code. Later you can graduate (if you want) to ASP.NET MVC. In addition to improving the web editors, WebMatrix 2 adds IntelliSense for Razor, C#, and Visual Basic:

Intellisense in Razor

WebMatrix 2 and ASP.NET Web Pages 2 include many built in helpers that make it easy to do common things like send email, post a tweet, or resize an image. If the built in packages and helpers in Web Pages 2 aren't enough for what you want, WebMatrix now also supports installing libraries and helpers directly from NuGet!

WebMatrix pulls from NuGet

Video: Justin and Vishal build an image sharing site with ASP.NET Web Pages and Windows Azure Web Sites.

Web Development with PHP

For applications that use PHP, there is a brand new PHP editor that features IntelliSense, code collapsing, and PHP 5.4 support. There's docs showing up inline there as well.

PHP Editor has intellisense

Video: Thao and Brady show the new PHP features in WebMatrix 2.

Web Development with Node.js

I have mentioned Azure before on the site and now that it supports Git deployment as well as node.js I've been paying more attention to it. One of the goals of WebMatrix 2 and Windows Azure is to make it easier to develop and host open source applications on the Windows platform. December brought support for node.js to Windows Azure. While Azure is making it easier to host node.js applications in cloud, WebMatrix 2 is aiming to improve the development experience. Out of the box are multiple project templates, IntelliSense, and support for several new languages. There's even an Express.js template.

Node.js in WebMatrix

Along with IntelliSense for the core modules built into node.js, WebMatrix also provides IntelliSense for third party modules installed via the Node Package Manager (NPM). This makes using things like the Windows Azure npm package much simpler:

Azure in node

Node.js uses a variety of rendering engines for writing views. I am told there are more planned and today WebMatrix 2 includes support for both Jade and EJS. I like Jade, myself.

Jade in WebMatrix

I'm not sure where you fall in the Great CoffeeScript debate, but some developers like to write their applications using CoffeeScript. WebMatrix supports that also.CoffeeScript in WebMatrix

Video: Justin and Vishal show new Node.js features in WebMatrix 2.

Streamlined Database Tools

The database tools in WebMatrix work with SQL Server, SQL Compact Edition, and MySQL as well.:

MySQL in WebMatrix. Scandalous.

When you're ready to publish your application, WebMatrix 2 will include your Database along with the list of changed files:

Publishing a database

Video: Learn more about managing databases in WebMatrix 2.

Mobile Web Development

You can integrate an iPhone or iPad simulator into Visual Studio, as I've blogged before. WebMatrix 2 adds an extensible model for adding new browsers, and also includes support for simulating Windows Phone 7 as well as the iPhone and iPad via a partnership with Electric Plum. Full disclosure: I love the Electric Plum guys. So nice.

iPad and iPhone

The templates included in WebMatrix 2 look nice on mobile devices out of the box since they use a combination of responsive design and jQuery Mobile.

iPhone

iPad

For those working with jQuery Mobile, there's included IntelliSense for custom data-* attributes.

jQuery Mobile

Videos: For more examples of using the mobile capabilities in WebMatrix 2, check out these videos:

The Application Gallery

There's a metric pile of Open Source projects in the Application Gallery so you can get WordPRess or Umbraco or whatever running just by File | New. Takes just a minute or two. ASP.NET and PHP apps all live together.

Web Gallery

After you install your application, there is now a customizable dashboard, designed specifically for your app type. That means that WebMatrix knows you're using WordPress and will show you stuff that WordPress folks care about.

The team has worked with the community to provide a customizable experience for many of the applications in the gallery. The dashboard provides a series of links and resources that make it easier to learn more about your app.

WordPress

For many of the applications in the gallery, there are a core set of files that should not be changed. WebMatrix will even warn users of these files.

Don't touch that file!

While customizing an application, WebMatrix 2 also includes application-specific IntelliSense. This is useful when you're just getting started working with a new application:

clip_image025

Windows Azure & Remote Editing

You can also create and deploy apps directly from the Windows Azure portal. So, rather than starting from an app on your machine, you can create it in Azure, get it running then...

clip_image027

...you've got remote site editing. After creating an application in the cloud, you can directly open a remote view into your site. This is great for making edits on the go. I'd personally use Git or source control, but I do have to admit I have a few sites that are just up there as brochures and aren't formally deployed. This feature is nice for those sites.

Remote Editing

For users using Windows Azure, the management portal allows users to install WebMatrix and open their site by clicking on a button in the command bar. This will download the site and install any required dependencies. This means once you've made your site in Azure, you can open it in WebMatrix, it will install, figure out your app (if it's in the gallery) and open it.

WebMatrix from Azure

When you've finished making your changes, the same publish command will only push the files that have changed back to your host.

WordPress editing

Video: Watch Faith customize a WordPress site and deploy it to Windows Azure.

Extension Gallery

If you're interested in extending WebMatrix 2, there is a new SDK that allows anyone to add new features or functionality. Many of the things in this post (including the mobile emulators!) are actually extensions that ship with WebMatrix 2.

Extensions

When you're ready to start building, check out the extension gallery. It has a list of extensions currently available, along with documentation on how to make your own extension.

Video: Watch Walter show you how to build a basic extension and publish it to the WebMatrix 2 extension gallery.

Wrapping it up

This release of WebMatrix 2 supports making apps ASP.NET, PHP, and node.js. You can download WebMatrix free. Let the team know if you have any feedback. Thanks Justin for helping me with some details and screenshots on this post!

Related Links


Sponsor: Thanks to DevExpress for sponsoring this week's feed. Multi-channel experiences made easy: Discover DXTREME. Delight your users with apps designed expressly for their device. DXTREME, multi-channel tools build stunning apps across devices & optimize for the best of each platform, from Win8 to the iPhone. And, the powerful HTML5, CSS and JavaScript tools in DXTREME also build interactive web apps.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Simulating an iPhone or iPad browser for ASP.NET Mobile Web Development with WebMatrix 2 or Visual Studio 2012

June 11, '12 Comments [27] Posted in Apple | ASP.NET | Tools | WebMatrix
Sponsored By

I mentioned the Electric Plum Mobile Simulator as a nice way to check your site on an iPhone while using a Windows machine in my post called "Create a great mobile experience for your website today. Please."

Microsoft WebMatrix 2 RC is out this week and has a nice feature included - support for the Electric Plum Mobile Simulator for iPhone and iPad built right in. WebMatrix is Microsoft's lightweight editor for ASP.NET, PHP and node.js, as well the best way to install open source applications. It's a bit of a playground for the team. Features can be tried out in WebMatrix, and if they pop, we can move them into Visual Studio. I've been singing about Electric Plum for months, so I'm happy to see it in WebMatrix.

Here's how to use the iPhone simulator there, and how to add an iPhone Simulator to Visual Studio 2012 RC's list of browsers manually.

First, install WebMatrix 2 RC. You'll want this even if you're going to add Electric Plum to Visual Studio. From the Run menu, select Add new...

Adding iPhones to the WebMatrix run menu

From here, you'll go to the Browser Extension area where you can add not only iPhone and iPad but also the Windows Phone 7 emulator.

New Mobile emulators in WebMatrix 2 include iPhone

Now the Run button has more browsers as a choice. Here I've left the iPhone as the default choice.

My Run button now has an iPhone picture on it

And when I run it, I get the nice Electric Plum iPhone simulation with my current site loaded automatically. (Did you notice that WebMatrix used NuGet to install this feature? All these extensions are buried in C:\Users\YOU\AppData\Local\Microsoft\WebMatrix\Extensions\20RC currently)

Electric Plum Mobile Simulator

To add this browser to Visual Studio 2012 RC, go to the new browser button (integrated with the Debug button) while in a web project and select Browse With... and add in C:\Users\YOU\AppData\Local\Microsoft\WebMatrix\Extensions\20RC\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe. For arguments put in 1 for the iPhone.

Adding Electric Plum's iPhone simulator in my Visual Studio

Now, make another entry for IPad and use arguments "2" for iPad. Your VIsual Studio 2012 RC menu should now look like this.

Look, iPhone's in my Visual Studio Menu

Now, this is just using the basic version of Electric Plum that you can download inside WebMatrix. You can get a MUCH more functional version for $29.99. It will give you a developer console, GPS support, accelerometer and some additional HTML5 support like local storage, etc. If you're seriously doing iPhone websites on a Windows machine, it's a bargain and you get both iPhone and iPad plus a load of features.

(NOTE: I am NOT affliated with Electric Plum nor do I sell their products. I just think they are cool folks.)

Have fun! Do you want to see stuff like this in VS? Tell me in the comments and I'll make sure the right people see your voice!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Hanselminutes.com: Rewriting a 5 year old VB.NET WebForms application as an ASP.NET Web Pages application with Razor

September 27, '11 Comments [24] Posted in ASP.NET | VS2010 | WebMatrix
Sponsored By

I'm planning on updating the Hanselminutes.com website to look more modern and look more like this newly redesigned blog. Until then, one of the things I wanted to try was to update the application with some simpler code. The Hanselminutes podcast website is running the same VB.NET WebForms application it was on the day I started the show in January of 2006 (almost 300 episodes ago!)

Sure, the app runs fine and there's no real reason to update it, but I wanted to see how quickly I could do it and if the code felt cleaner. I'll probably do a post where I update this .NET 1.1 WebForms app to .NET 4 and show how to maintain it. In this case, I'm updating it to Razor just because it sounded like fun. No other reason.

There's a few requirements I need to make sure I don't miss:

  • I'd like a new URL scheme. Currently showid is the database, not the logical "show id." Rather than
  • I can't break any existing links, so I want to HTTP 301 redirect from the old style to the new style.
  • I'll keep the look and feel now, but update it after.
  • Folks shouldn't notice the difference.
  • I need to use the existing wacky 2004 database, it's tables and stored procedures because all of Carl's existing backend administration systems feed into it.

But, it's such a basic application, it's basically a bunch of for loops. So, here's what I did tonight.

UPDATE: Check out the updates below as I was using inline SQL when there was no reason to! Very cool stuff in the Massive micro-ORM that I wasn't taking advantage of. Rob Conery has done a post as a result of my foolishness.

Importing the layout

I started in WebMatrix, although I could have just as easily used Visual Studio. I created a new "Starter Site." I took the existing ASP.NET WebForms application's Hanselminutes.master and copy/pasted it into the new ASP.NET Web Pages _SiteLayout.cshtml.

I then added a RenderBody() call where my WebForms application's master page had a ContentPlaceholder:

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>

I added in the existing CSS and Scripts and that got me here. A "hello world" equivalent:

Hanselminutes - Step 0

Then, I copied the Default.aspx ASP.NET WebForms code into Default.cshtml. This ASPX file has lots of server side WebForms controls like this:

<asp:HyperLink ID="hPermalink" Font-Bold="True" Text="Permalink" runat="server"/> 

But since Web Pages doesn't process any of those, they are literally ignored and sent across as if they were HTML markup. They aren't valid tags so the browser ignores them. That gets me here. More is laid out but there's no data behind it, of course.

 Hanselminutes - Step 1

Next, I need to get to the data.

Getting at the Data

I can get at the data in a number of ways, but I like lightweight and easy so I'm using Rob Conery's "Massive" micro-orm. It's 500 lines of code, so that's nice.

UPDATE: Rob Conery pointed out that everyone thinks that Massive and micro-ORMs like it require inline SQL. That they just turn table rows into objects. Turns out I was using Massive in an OK way, but not the easiest way. Note below as I've added before and after details.

There's a good discussion of WebMatrix.Data, WebMatrix.Data.StronglyTyped, Massive, and Simple.Data over at Mikesdotnetting. They are all very similar. Use the one that makes you happy. Also look at Dapper from Sam Saffron and friends and check out my Massive vs. Dapper Podcast.

The easiest page to do first is the Archives page. It's a for loop of links, so a good place to get started.

In WebForms the archives uses a DataGrid like this:

<asp:DataGrid ID="dgArchive" ForeColor="Black" GridLines="None" CellPadding="2" BackColor="#EFEFDA"
BorderWidth="1px" BorderColor="Khaki" Width="100%" runat="server" PagerStyle-Visible="false"
AutoGenerateColumns="False" ShowFooter="false" DataKeyField="ShowID" ShowHeader="False"
PageSize="999">
<FooterStyle BackColor="Tan"></FooterStyle>
<AlternatingItemStyle BackColor="#F4F7E0"></AlternatingItemStyle>
<Columns>
<asp:BoundColumn DataField="ShowNumber" Visible="True"></asp:BoundColumn>
<asp:HyperLinkColumn ItemStyle-ForeColor="Black" DataNavigateUrlField="ShowID" DataNavigateUrlFormatString="default.aspx?showID={0}" DataTextField="ShowTitle"/>
<asp:BoundColumn DataField="ShowID" Visible="False"></asp:BoundColumn>
<asp:BoundColumn DataField="DatePublished" HeaderText="Date" DataFormatString="{0:yyyy-MMM-dd}">
</asp:BoundColumn>
</Columns>
</asp:DataGrid>

There's some color alternating going on, hard-coded colors, kind of cheesy, and some columns for the data. It's a half-decade old. I didn't write it. But as developers we inherit old code all the time.

The Massive ORM needs a connection string in the web.config, so I'll put one there.

<connectionStrings>
<add name="hanselminutes"
connectionString="Data Source=yada yada yada"
providerName="System.Data.SqlClient" />
</connectionStrings>

We've got a table called "Shows," so I need to let Massive know about it.

using System;
using System.Collections.Generic;
using System.Web;

public class Shows : DynamicModel
{
//you don't have to specify the connection - Massive will use the first one it finds in your config
public Shows():base("hanselminutes")
{
PrimaryKeyField = "ShowID";
}
}

Next, I'll reuse the same SQL Query used in 2006, except now with Massive. I'll just see if I can get the titles first with inline SQL.

@{
dynamic tbl = new Shows();
var shows = tbl.Query(@"SELECT ShowID, DatePublished, ShowTitle, Description, Enabled, ShowNumber
FROM Shows
WHERE Enabled = 1
ORDER BY DatePublished DESC");

foreach(var show in shows) {
@show.ShowTitle<br/>
}
}

Cool, that works. But I've got inline SQL here and it's, well, inline SQL. Rob points out that Massive will let you use the Jon Skeet-designed named parameter syntax such that I can just do this and the same result as the inline SQL! I'm such a goof for forgetting this.

show = tbl.Find(Enabled: 1, orderby: "DatePublished DESC");

Ok, just to be clear, here is the whole thing again, except with smarter use of Massive.

@{    
dynamic tbl = new Shows();
show = tbl.Find(Enabled: 1, orderby: "DatePublished DESC");
forch(var show in shows)
{
@show.ShowTitle<br/>
}
}

Is nice, yes? I'll flesh out the table. Yes, a <table/>. Cause, it's, like, a table.

<table id="archives">
@foreach(var show in shows) {
<tr>
<td>@show.ShowID</td>
<td><a href="/@show.ShowNumber">@show.ShowTitle</a></td>
<td>@show.DatePublished.ToString("yyyy-MMM-dd")</td>
</tr>
}
</table>

Notice the href="" for the show is the ShowNumber, not the ShowID. It doesn't point anywhere yet, but I'll figure it out later.

Before they were doing some server side alternating color stuff. I need to update the CSS at some point, but since I'm redesigning soon, I'll just do it with jQuery on the client side, it's easier then the server-side if and gets the same result. Again, I'll change the template when I do the redesign.

<script type="text/javascript">
$(function() {
$('#archives tr:odd').css('backgroundColor','#EFEFDA');
$('#archives tr:even').css('backgroundColor','#F4F7E0');
});
</script>

Now I've got this page done, without the links hooked up. Nice and easy.

The complete Hanselminutes podcast archive - step 2

Here is the whole Archives page so far:

@{  
Layout = "~/_SiteLayout.cshtml";
Page.Title = "The complete Hanselminutes podcast archive";

dynamic tbl = new Shows();
var shows = shows = tbl.Find(Enabled: 1, orderby: "DatePublished DESC");
}

<table id="archiveTable" width="100%">
@foreach(var show in shows) {
<tr>
<td>@show.ShowNumber</td>
<td><a href="/@show.ShowNumber">@show.ShowTitle</a></td>
<td>@show.DatePublished.ToString("yyyy-MMM-dd")</td>
</tr>
}
</table>

<script type="text/javascript">
$(document).ready(function() {
$('#archiveTable tr:odd').css('backgroundColor','#EFEFDA');
$('#archiveTable tr:even').css('backgroundColor','#F4F7E0');
});
</script>

I can refactor the data access into a helper class and generally tidy up, but you get the idea.

On the home page I want to get the most recent show first using using inline SQL, that is, the LAST show:

lastShow = tbl.Single(@"SELECT Top 1 ShowID, DatePublished, ShowTitle, Description, Enabled, ShowNumber 
FROM Shows
WHERE Enabled = 1
ORDER BY DatePublished DESC").First();

And then again using Massive's syntax:

lastShow = tbl.Single(Enabled: 1, orderby: "DatePublished DESC");

At this point, it's easy to setup the home page by just sprinkling some Razor could around the original HTML template. I'm replacing <asp:Label> and <asp:Literal> with @lastShow.ShowID and things like this. Here I'm calling an existing Stored Proc and getting the filename and location then building an HTML5 <audio> element for all the MP3s.

@{
var files = tbl.Query("GetFilesByShowID @0", lastShowID);
foreach(var file in files) {
var filename = file.WebFilePath + file.FileName;
if (filename.EndsWith(".mp3")) {
<audio width='200' height='30' controls='controls' preload='auto'>
<source type='audio/mp3' src='@filename' />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width='320' height='240' type='application/x-shockwave-flash' data='flashmediaelement.swf'>
<param name='movie' value='flashmediaelement.swf' />
<param name='flashvars' value='controls=true&file=@filename' />
</object>
</audio>
}
}
}

Then, just 20 minutes of changing a bunch of asp:Controls to @lastShow.Something syntax and I was on my way. It's not pretty, but it's identical in functionality to the existing WebForms version.

Hanselminutes - Windows Internet Explorer (82)

Changing URLs

The only thing left is to make it so my URLs look like http://hanselminutes.com/1 instead of http://www.hanselminutes.com/default.aspx?showID=2.

There's lots of ways to do this, but the simplest is to take advantage of the URL rewriting that's built into IIS7. While i'm in there, I'll add a total of three rules.

Tiny URLs with just Number

This rule will take /123 and rewrite (not redirect) to /?showNumber=123. Because I'm redirecting such a "greedy" URL, it's important that I used the constraint of \d+ to just get numbers.

<rule name="number">
<match url="(\d+)" />
<action type="Rewrite" url="/?showNumber={R:0}" appendQueryString="false" />
<conditions logicalGrouping="MatchAny">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
</rule>

Default Document to /

This rule will take /default.aspx and make it /.

<rule name="Default Document" stopProcessing="true"> 
<match url="(.*?)/?Default\.aspx$" />
<action type="Redirect" url="{R:1}/" />
</rule>

Remove .ASPX extensions

This rule will change things like /archives.aspx to just /archives.

<rule name="RewriteASPX">
<match url="(.*).aspx" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Redirect" url="{R:1}" />
</rule>

But what if someone visits a link with a database ID, NOT a ShowID, like

http://hanselminutes.com/default.aspx?showID=300

Given a URL like this, I'll look up the show by showID, get the correct show number and then just redirect to /280 (the right number, given an old database ID of 300):

Response.RedirectPermanent("/" + lastShow.ShowNumber);

With these small changes in the web.config, plus one line of code, I'll have the same URL structure as before with 301 Permanent Redirects to the new structure that the rest of the site uses.

I'll also add one last rule to remove www. from the front of the URL which will make tweeting shows by ID nicer:

Remove www. and canonicalize domain name

<rule name="Cannonical Hostname"> 
<match url="(.*)" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false">
<add input="{HTTP_HOST}" pattern="^hanselminutes\.com$" negate="true" />
</conditions>
<action type="Redirect" url="http://hanselminutes.com/{R:1}" />
</rule>

So when this is up, the current (as of this writing) show is http://hanselminutes.com/285, nice and clean.

I haven't put the new site live yet, but I'll do some more testing and do it this week. It took about two hours while watching Breaking Bad on NetFlix to convert this five page VB.NET ASP.NET WebForms application to ASP.NET Web Pages, and I'm well positioned now to make database changes as well as change the template for a redesign. More importantly, I had fun.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

WebMatrix and node.js: The easiest way to get started with node on Windows

September 16, '11 Comments [24] Posted in IIS | nodejs | WebMatrix
Sponsored By

Tomasz Janczuk and Steve Sanderson are having entirely too much fun. I posted just two weeks ago on Installing and Running node.js applications within IIS on Windows - Are you mad? when Tomasz and the team got node.js running rather nicely under IIS. Now they've got a nice little development environment in WebMatrix.

Cats and Dogs, living together, mass hysteria

Then, Steve and Tomasz decide to share clever thing with us. Well, let me just show you. Remember, this is all in-progress goofing around v0.5 stuff at best but the concepts are sound.

node.js inside WebMatrix. You may start freaking out now.

And then:

Node.js Express Site1 - Microsoft WebMatrix (76)

Hit Run:

Node.js Express Site running on Windows

How can you use WebMatrix to develop node.js applications yourself? With these easy steps:

Isn't it lovely when LEGO pieces snap together so nicely?

Enjoy, Dear Reader.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Mix 11 - Web Platform and Tools Keynote Demo Script

April 13, '11 Comments [18] Posted in ASP.NET | ASP.NET MVC | HTML5 | IE9 | Javascript | Microsoft | Mix | NuGet | VS2010 | WebMatrix
Sponsored By

It's Day 1 of the Mix 11 conference here in Las Vegas. I work for the Web Platform and Tools (that's ASP.NET, IIS, IIS Media, etc) group and I did the Web Platform demos for Scott Guthrie's part of the keynote. A lot of people in Dev and QA worked hard all year long to make some fun and cool products and as the designated "talking head," I had just 16 minutes to make all of them (people + products) look good. I hope I did them all justice.

We built a backend and a front end for Rob and my sie http://www.thisdeveloperslife.com. The show is something Rob Conery and I do moonlighting on the side (it's our hobby, not our job nor a Microsoft thing) but we needed a new site and this was a fun idea since we built the original site in WebMatrix.

If you'd like ALL the new bits, no matter what's on your machine currently, go to http://www.asp.net/get-started and use one of the new "get everything" green buttons. It'll use Web Platform Installer and if you have nothing, you'll get the free VS Express. If you have Visual Studio proper, you'll get SP1, the new MVC 3 Tools Update as well as stuff like IIS Express and SQL Compact. Get Everything.

We updated the ASP.NET Website for Mix as well, with three new sections. We've also got three 3 intro videos for each technology, as well as an all new Learning Resource section AND free videos from Pluralsight!

Here's how you make the backend I made in the Keynote. You can watch it here. ScottGu and I were after the IE9/10 section. http://live.visitmix.com/Keynotes

You can seek within the Keynote using these links:

If you'd like a MUCH more detailed "Getting Started" tutorial of mine that Rick Anderson just updated to include the new MVC 3 Tools Update, check out the C# version here, and the VB version here.

This blog post just shows you how to do what I did, check out the tutorial for much more detail.

ASP.NET MVC 3 with Tools Update - This Developer's Life Backend Administration

From Visual Studio, click File | New Project and select ASP.NET MVC 3 Application. Name it "Backend."

Add New Project

Click Internet Application and make sure Use HTML 5 is checked.

New ASP.NET MVC 3 Project

Check out your packages.config if you like, or noticed the installed packages in NuGet.

Add Library Package Reference

Right click on Models, select Add Class. Name the file Podcast.cs. Here is your Entity Framework 4.1 Code First model:

namespace Backend.Models
{
public class Episode
{
public int Id { get; set; }
[Required]
public string Title { get; set; }
public DateTime? PublishedAt { get; set; }
public string Summary { get; set; }
public string LeadImage { get; set; }
public string ShortUrl { get; set; }
public virtual ICollection<MusicTrack> MusicTracks { get; set; }
}

public class MusicTrack
{
public int Id { get; set; }
public string Name { get; set; }
public string URL { get; set; }

public int EpisodeId { get; set; }
public Episode Episode { get; set; }
}
}

Now, make sure you compile. I press Ctrl-Shift-B to do this, but you can also do it from the Build Menu.

Right click on Controllers, select Add Controller. Make an EpisodeController. Pick the Entity Framework template (remember you can make your own, if you like. More on this soon!) and click the Data context class dropdown and Make a PodcastContext. Your dialog will look like this.

Add Controller

Compile. Now do the same thing for MusicTrack. Now, check our your Solution Explorer and all your scaffolded code.

Wow, that's a lot of scaffolded code!

Right click on References and select Add Library Reference. You can also do this from the Tools | Library Package Manager menu.

Click on Online on the left side to access NuGet.org, and in the upper right corner, search for "EntityFramework.SqlServerCompact" to bring down support for SQL Server Compact Edition.

Add Library Package Reference (52)

Now, run your app and visit /Episode. Make an episode or three, then visit /MusicTrack.

TDLAdminSite

Homework for you - Extend the Backend Demo!

  • Add the MvcScaffolding Nuget package and rerun the Add Controller commands. What's different?
  • Add an Editor Template for DateTimes with a jQuery DatePicker
  • Add different attributes like [StringLength] or [Range] to your Code First model. Delete the .SDF file in App_Data and re-run. How can you affect your database?
  • Add some other NuGet packages like IE9ify. What cool features can you add like Jump Lists using Javascript?

WebMatrix - This Developer's Life Frontend Administration

Ok, so now we need a frontend for our podcast site. We got one from http://www.templatemonster.com. They can sell you a template and then bring it down directly into Web Matrix. Since you may not want to buy a template just for this demo, you'll want to come up with some basic template for yourself. WebMatrix comes with a Bakery Template and some others, so perhaps try one of those. Perhaps the Bakery Template after clicking Web Site From Template.

We used a template like this, but like I said, I can't give it to you.

TDL Front

Maybe you can start here? ;)

Fourth Coffee - Home - Windows Internet Explorer (54)

You can right click on App_Data and bring in the SQL Database File (Mine was called TDL.sdf, but yours may vary) from the first step with Add Existing File. Some templates include databases. You can use them if you like, or delete them.

Files in Web Matrix

For the demo, I had two database files. The one I created in the first step, and then another one that I already filled out with all our shows earlier.

Lots of data in the database

If you're using the Bakery Template it's a little different from our template since it's about products and includes a featured product, but it's still a cool template.

I skipped some steps in the keynote to make the demo flow, for example, my images were already in an images folder. For this blog post, I'll copy the images from http://www.thisdeveloperslife.com (or you can grab your family photos or whatever) and put them in /images.

Show Images

Next, I'll change the Default.cshtml for my (now) Bakery Template. I'll updated things in the Razor code like Products to Episode, and making sure I'm using column names from the TDL database, and not the Bakery one.

@{
Page.Title = "Home";

var db = Database.Open("TDL");
var shows = db.Query("SELECT * FROM Episodes").ToList();
}

<h1>Welcome to This Developer's Life!</h1>

<ul id="products">
@foreach (var s in shows) {
<li class="product">
<div class="productInfo">
<h3>@s.Title</h3>
<img class="product-image" src="@Href("~/Images/"+ s.LeadImage)" alt="Image of @s.Title" />
<p class="description">@s.Summary</p>
</div>
</li>
}
</ul>

It ends up being not much code. It's not as pretty as the more complex template we used, but you get the idea. You can take templates from anywhere (they don't need to be Razor templates, just HTML!) and then sprinkle in a little Razor code like I did.

I give you, "This Developer's Life - Cheesy Bakery Template Edition":

This Developer's Life Site - Cheesy Bakery Edition

Now if you like, click on Site, then ASP.NET Web Pages Administration (or, just visit /_Admin) and setup your password. I skipped the creating of a password in the keynote and used a site with an existing password we'd setup earlier. Read the instructions carefully.

Bakery6 - Microsoft WebMatrix (57)

The Web Pages Administration site runs local as part of your site, and is how WebMatrix talks to NuGet.org. From here you can get helpers like the Facebook helper, Twitter helper, Disqus helper and more. Some of these helpers, like Disqus, require more setup that I showed in the keynote. For example, you have to visit Disqus.com, sign up for an account and get an API key, then tell your site about it before you use the helper. The Facebook and Twitter helpers also include lots of options, for example, the Twitter helper can be vertical or horizontal, and look different ways. Also check out IE9ify, a jQuery plugin and NuGet package that lets you add JumpLists and IE9 stuff to your site.

ASP.NET Web Pages Administration - Package Manager - Windows Internet Explorer (58)

At the end, I clicked Publish and then just imported the settings file from my ISP. WebMatrix then used WebDeploy to send my site and database to a server. That server was internal to the Mix keynote demo network, but Rob Conery and deployed the site the exact same way at 3am Tues morning. The public site at http://www.thisdeveloperslife.com was written by Rob and I in WebMatrix, uses HTML5, jQuery with SQL CE for a database and is deployed with WebDeploy and sports a tidy HTML5 theme Rob wrote, inspired by the one from the demo.

I'll blog later in a separate post how I made the podcast player with HTML5 audio tags, jQuery and IE9 site pinning.

I hope you enjoy the products Dear Reader as much as we enjoyed building them!

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Page 1 of 2 in the WebMatrix category Next Page

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.