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.
Click the Node category, and then select Starter Site. Give your site a name, and then click Next.
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.
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
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:
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.
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/.
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.
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/.
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:
When the gallery loads, search for NodePowerTools. Select it, and then click Install:
After installing the extension, you'll see a Debug button alongside buttons for other extensions you may have installed: