Free trial *Internet Service Required

Node.js Web Application using Express

Node.js includes a minimal set of functionality in the core runtime. Developers often use 3rd party modules to provide additional functionality when developing a Node.js application. In this tutorial you will extend the application created in the Node.js Web Application tutorial by using modules.

This tutorial assumes that you have completed the Node.js Web Application tutorial.

You will learn:

How to use node package manager (npm) to install a module
How to use the Express module

A screenshot of the complted application is below:

A web browser displaying Welcome to Express in Windows Azure

Installing Modules

Node modules can be installed using the node package manager. The command format used to install a module using the package manager is npm install <module_name>. Packages installed in this way are stored in the node_modules folder in the directory the command is ran in. Node automatically looks for modules within the node_modules folder in the application folder, so it is important that you run the npm command from the folder that contains your application when installing modules.

Perform the following steps to add the Express module to the application you created through the Node.js Web Application tutorial.

If it is not already open, start the Windows Azure PowerShell for Node.js from the Start menu by expanding All Programs, Windows Azure SDK Node.js - November 2011, right-click Windows Azure PowerShell for Node.js, and then select Run As Administrator.
Change directories to the folder containing your application. For example, C:\node\tasklist\WebRole1.
Install the Express module by issuing the following command:
```
PS C:\node\tasklist\WebRole1> npm install express
```
Note: By default, the command above installs the latest version of the modules. This tutorial was created with Express version 2.5.5. If you encounter problems using a newer version of Express, you can install the 2.5.5 version by using npm install express@2.5.5.

The output of the npm command should look similar to the result below. You can see the list of modules installed as well as any dependencies.

Generating an Express Application

The Express (expressjs.com) module provides a web framework for building MVC applications. It provides APIs for processing HTTP requests and supports view template engines for generating HTTP responses. It also includes a various tools and add-ons required by MVC applications, including the ability to generate basic MVC scaffolding for a web application.

Perform the following steps to replace the existing application with one generated using the Express scaffolding tool.

To create an Express web application using the scaffolding tool, enter the command below:
```
PS C:\node\tasklist\WebRole1> .\node_modules\.bin\express
```
You are prompted to overwrite your earlier application. Enter y or yes to continue. Express generates the app.js file and a folder structure for building your application.
$The output of the .\node_modules\.bin\express command.$
Delete your existing server.js and rename the generated app.js file to server.js. by entering the commands below. This is required because the Windows Azure WebRole in our application is configured to dispatch HTTP requests to server.js.
```
PS C:\node\tasklist\WebRole1> del server.js
PS C:\node\tasklist\WebRole1> ren app.js server.js
```
View the directory contents:
```
PS C:\node\tasklist\WebRole1> ls
```
Note that several files and folders have been created as part of the Express scaffolding, including the package.json file which defines additional dependencies required for this application.
To install additional dependencies defined in the package.json file, enter the following command:
```
PS C:\node\tasklist\WebRole1> npm install
```
Open the server.js file in Notepad, using the following command:
```
PS C:\node\tasklist\WebRole1> notepad server.js
```
Replace the last two lines of the file with the code below.
```
app.listen(process.env.port);
```
This configures Node to listen on the environment PORT value provided by Windows Azure when published to the cloud.

Note: At the time of this writing, express scaffolding sometimes generated LF-only line breaks (Unix-style). If you’re experiencing this, you can open the file in WordPad or Visual Studio and save, thereby replacing LF with CRLF line breaks. Save the server.js file.
Use the following command to run the application in the Windows Azure emulator:
```
PS C:\node\tasklist\WebRole1> Start-AzureEmulator -launch
```

Modifying the View

Now you’ll modify the view to display the message “Welcome to Express in Windows Azure”.

Enter the following command to open the index.jade file:
```
PS C:\node\tasklist\WebRole1> notepad views/index.jade
```
As mentioned earlier, Jade is the view engine you are using here. Notice that it uses a style that does not require any tags. For more information on the Jade view engine, see http://jade-lang.com.
Modify the last line of text by appending in Windows Azure.
Save the file and exit Notepad.
Refresh your browser and you will see your changes.

Creating a New View

For the task list application add a new Home view. This view will display existing tasks and allow adding new tasks and marking tasks as completed. For now, the view just has a static placeholder.

From the Windows Azure Powershell window, enter the following command to create a new home view template.
```
PS C:\node\tasklist\WebRole1> notepad views/home.jade
```
Select “Yes” to create the new file. Paste the contents below into home.jade. Save the file and close it.
```
h1= title
p A work in progress.
```
In order to have your app handle the home request you will modify the server.js adding a route entry for /home. First open server.js.
```
PS C:\node\tasklist\WebRole1> notepad server.js
```
Add the home route after the default route as shown below:
```
app.get('/home', function(req, res){
  res.render('home', {
    title: 'Home'
  });
});
```
The app.get call tells node to handle requests using an HTTP GET. The first parameter of the function call specifies which URL should be handled, in this case /home. Next a callback is provided for handling the actual request. The first parameter is the incoming request, the second parameter is the response. The next line instructs Express to render home.jade (.jade is not required) passing in Home as the title.
Browse the Express hello world application running in the emulator, navigating to the new Home view you just added.
```
PS C:\node\tasklist\WebRole1> start http://localhost:81/home
```

Re-Publishing the Application To Windows Azure

Now that we augmented the Hello World application to use Express, you can publish it to Windows Azure by updating the deployment to the existing hosted service. In the Windows PowerShell window, call the Publish-AzureService cmdlet to redeploy your hosted service to Windows Azure.

PS C:\node\tasklist\WebRole1> Publish-AzureService -launch

Since there is a previous deployment of this application, Windows Azure performs an in-place update. As such, the cmdlet completes faster than the initial deployment. After the deployment is complete, you see the following response:

The output of the publish command

As before, because you specified the –launch option, the browser opens and displays your application running in Windows Azure when publishing is completed.

A web browser displaying the Express page. The URL indicates it is now hosted on Windows Azure.