How to Use the Node.js Starter Template in WebMatrix

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

Note: A full explanation of Node.js or express is beyond the scope of this article. For information on Node.js and express, see http://nodejs.org/ and http://expressjs.com.

Creating a Node.js site using the starter template

On the WebMatrix start screen, click the Templates button.

image

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

image

The first time you create an application based on a Node template, the dependencies that the template requires (like Node.js and Node Package Manager) will be installed on your computer. The next time you create a Node application, the template will use the prerequisites that you already installed.

After the site loads, you will see the site dashboard. The dashboard contains helpful links to documentation that explains how the site was built.

image

In the ribbon, click the Run button. The site will launch in your default browser. Take some time to make yourself familiar with the various parts of the site. The website includes examples of the following:

  • Parent/child layouts that use jade
  • A chat sample that uses socket.io
  • OAuth-based logins for Twitter, Facebook, and Windows Live
  • Mobile-friendly pages made possible by jQuery Mobile
  • Custom 404 and 500 pages
  • LESS CSS with express

image

Exploring the code

To get started exploring the code, go back to WebMatrix, and select the Files workspace. The tree view shows you the files used to run the site. Start by opening the server.js file. This file is the entry point for your application. Each section of the file contains a header describing the behavior of the code in that section:

image

Next, let’s take a look at the web.config file. This file is required for node applications to run on IIS Express and in Azure. It contains configuration that allows for static file handling, routing, debugging, logging, and detailed configuration of IIS Node. For more information on configuring Node.js applications on IIS, see https://github.com/tjanczuk/iisnode.


image

The views folder contains all of the UI for your site. Open the layout.jade file in the views folder to see how the UI is implemented. Jade is a popular template engine for node, and is used heavily with express. For information on jade, see http://jade-lang.com/.

image

The logic that manages routing for your site is located in the routes folder. Inside the folder, open the home.js file. This file contains the route logic for all of the views in your site. For more information on routing, visit http://expressjs.com/guide.html#routing.

image

To modify the CSS and JavaScript for your site, open the public folder. All of the files in this directory are externally served by a static file handler.

This site uses LESS CSS to render style sheets. To see an example of a LESS-based style sheet, open the style.less file in public/stylesheets/. For more information on LESS CSS, see http://lesscss.org/.

image

The template's client-side JavaScript is also stored in the public directory. To see how the application uses the client-side socket.io libraries to implement the chat feature, open the chat.js file in public/javascripts/. Socket.io lets you write real-time services in JavaScript with Node.js. For more information on socket.io, see http://socket.io/.

image

Using WebMatrix Extensions with Node.js

WebMatrix includes an extension gallery which provides useful third party extensions. Some of them make web development with Node in WebMatrix easier. They include:

  • Node Power Tools
  • Visual NPM
  • OrangeBits Compiler

To install extensions, click the Gallery icon in the ribbon:

image

When the gallery loads, search for NodePowerTools. Select it, and then click Install:

image

After installing the extension, you'll see a Debug button alongside buttons for other extensions you may have installed:

image

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!