How to Build Mobile-ready Sites with Node in WebMatrix

WebMatrix ships with site templates that make it easy to get started. The Node.js starter template is built on express, a flexible framework for building web applications. This template is the starting point for a full application - it shows examples of routing, middleware, custom errors, and more. For more information on express, please visit http://expressjs.com.

Note: It is not the goal of this article to teach you how to use Node.js or express. Please see http://nodejs.org/ and http://expressjs.com for information on Node.js and express.

Creating a site using the template

To get started, click the Templates button on the WebMatrix start screen:

image

Click the Node category, and then select Starter Site. Give your site a name, and then click Next.

image

At this point, any of the dependencies you need to run a Node.js application will be installed. This is only required the first time you create an application with Node.js. After the site loads, you will see the dashboard. The dashboard contains helpful links which point to the documentation on how the site was built:

image

To get started, click the Run button in the ribbon, at which point the site should launch in your favorite browser. Take some time to click around the various parts of the site. The site includes several examples including:

  • Using parent / child layouts with jade
  • A chat sample using socket.io
  • Enabling OAuth based logins with Twitter, Facebook, and Windows Live
  • Creating a mobile friendly site with jQuery Mobile
  • Creating custom 404 and 500 pages for your site
  • Using LESS CSS with express

image

Using the mobile emulators

When you clicked the Run button for the site, WebMatrix launched the browser that you have set as your default. If you click the down arrow in the button, you can see a list of all your installed browsers:

image

Using this menu, you can launch your site in the browser of your choice. WebMatrix also supports an extensibility model that allows additional browsers to be exposed to the application. This is how mobile emulators are installed in WebMatrix. To install an emulator, click the Add new… button in the run menu. This will display a list of mobile emulators you can install. Choose the emulator you want to use, and click Install:

image

After the emulator is installed, you can launch your site in the run menu. Here is the iPhone simulator:

image

Modifying the mobile layout

After learning how to install and use the mobile emulators, you’re ready to start modifying the content of your site. The Node Starter template automatically detects the browser’s capabilities at runtime. Based on the device detected, Express will either serve a standard desktop master layout or a mobile layout. The detection logic that inspects the request headers is part of the Connect middleware located at /middleware/locals.js. For more information on Connect, see http://www.senchalabs.org/connect/.

To use the template, this file does not need to be modified – it simply tells the program which master and child views should be served. To view the mobile master view, open /views/layout_mobile.jade:

image

This jade template uses jQuery Mobile to render your site. jQuery Mobile is ideal because it is based on HTML5, and works extremely well across a variety of mobile devices and form factors. For more information on jQuery Mobile, see http://jquerymobile.com/.

Any changes made to this view will be reflected in the master views of every page. However, the master view will still use the same child views when the page is rendered. The CSS for this template is designed using responsive layout techniques that allow you to use the same child views.

If you still want to use a different view based on a mobile or desktop device, it’s very easy. By convention, while browsing on a mobile device, the template looks for a view named {viewName}_layout.jade before looking for the standard desktop view. So, to create a special view for the About page, simply go to the Files workspace, copy about.jade, and rename it to about_mobile.jade:

image

Now, make some sample changes. First, remove the featured section. Next, remove Lorem ipsum and use some real text:

image

To test the changes, launch the site using your mobile emulator of choice. When you click the About page, you should see this message:

image

You can check the About page on a desktop browser, and verify that no changes have been made:

 

image

You've seen examples of modifying the template to make changes to the master mobile layout, using the same views in desktop and mobile browsers, and using specialized views. Enjoy!

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!