Note: Make sure you are using 0.10.3 or greater. Guang Yang, who is a PM on the team that writes the SDK pointed out that there is a bug in earlier versions that can cause issues in the SDK.

To upgrade Node.js head over to nodejs.org and click the install button. In order to upgrade the Windows Azure CLI tools simply use npm as show below.

npm install azure-cli -g

Note: On OS X you will need to run this command as sudo to install globally.

To install the latest version of the Windows Azure SDK for Node.js in your project you can use npm as well.

npm install azure

An alternative option is to use our one-click installers to install the SDK and tools together. You can find the Node.js installer here.

The reason, I am using Node.js is primarily because of cross-platform issues with many Ruby gems. I played around with Jekyll Asset Pipeline and it seemed like a great tool for combining and minifying static content, but it seems to have issues running on Windows. I use many different computers including several PCs (I love my Surface Pro) and a Macbook Air so cross-platform support is critical. I blog on both devices so my blog platform must work on each OS. Node.js is an obvious choice for this as it runs flawlessly on both platforms.

The second reason I chose to use Node.js rather than Ruby gems is because I am hosting this site on Github Pages to use their automatic Jekyll deployment. Unfortunately, Github Pages doesn't support Jekyll plugins so anything that does this level of customization must be done on my local machine anyway. This means it didn't really matter which tools I used.

Now, that you know why I am doing this. Lets talk about how. First, I decided to use node-minify to handle the actual combining and minifying of files. This node module works well, it is simple, and it works with several minification libraries like UglyJS, YUI Compressor, and Google Closure Complier. Since I avoid Java like the plague I am just using UglyJS. The optimization isn't quite as good as the other two, but it is enough for me.

Below you can see how node-minify can be used to combine and minify js and css files.

// Using UglifyJS for JS
new compressor.minify({
  type: 'uglifyjs',
  fileIn: ['assets/js/prettify.js', 'assets/js/app.js'],
  fileOut: 'assets/' + config.version + '.js',
  callback: function(err){
    if (err) {
      console.log(err);
    }
  }
});

// Using Sqwish for CSS
new compressor.minify({
  type: 'sqwish',
  fileIn: ['assets/css/bootstrap.min.css', 'assets/css/style.css'],
  fileOut: 'assets/' + config.version + '.css',
  callback: function(err){
    if (err) {
      console.log(err);
    }
  }
});

In addition to node-minify I also wanted something that would help me automate the various tasks of building the site. For this I chose Jake. Jake is a great tool that I have used on many other projects for creating build scripts.

I setup my jakefile.js with a few simple tasks.

task('default', ['minify', 'build'])

task('minify', function() {
  // Clean up old files
  var files = fs.readdirSync('./assets/');
  for (var i = files.length - 1; i >= 0; i--) {
    var file = files[i];
    if (path.extname(file) == '.js' || path.extname(file) == '.css') {
      fs.unlinkSync('./assets/' + file);
    }
  };

  // Combine and minify code here
  ...
});

task('build', function() {
  setConfigValue('version', config.version);
});

On thing you will notice is that my static content is being created with a uuid version number. This way each time I publish my site I get a new version. Eventually, I am going to change this code to only perform the minification if the css or js files change. The issue with using a random name is that I need to somehow tell Jekyll which files to use. For this, I set a configuration value in the _config.yml file that Jekyll uses. You can see that file below. The version number gets updated every time I build my static content.

markdown: rdiscount
pygments: false
permalink: /:year/:month/:day/:title/
paginate: 5
version: 63301a88-ec4f-4f35-b9a7-7533810aec30
name: Nathan Tottes's Blog
description: Thoughts and Experiences with Software Development.
url: http://ntotten.com

Finally, I need to reference this version number in my Jekyll layouts. This is easy and can be seen below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' 
      rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' 
      rel='stylesheet' type='text/css'>
    <link href='/assets/{{ site.version }}.css' 
      rel='stylesheet' type='text/css'>

Now when I publish the site to Github pages, Jekyll will use the version number to setup the static content path and my site will be served with the smaller and optimized js and css files. You can see the full jakefile.js in my website's Github repositoryy.

The get started, you will need to create a service bus namespace and subscription. You can do this in the portal by clicking the "New" button and following the steps shown below.

After your topic is created, install the socket.io-servicebus module by running npm as shown below.

npm install https://github.com/ntotten/socket.io-servicebus/archive/master.tar.gz

Note: I am installing my fork of the socket.io-servicebus module. The module is also available on npm, but there are updates to this fork for automatically managing subscriptions. These updates will be in the main version shortly. You can see the pull request for my updates here.

With the module installed, open up your application. For this demo, I am using an express web app, but you can use whatever frameworks you would like. Configure the service bus store for Socket.IO as shown below.

// Setup the Service Bus store for Socket.IO
var sbstore = require('socket.io-servicebus');
io.configure(function () {
  io.set("transports", ["xhr-polling"]); 
  io.set("polling duration", 30); 
  io.set('store', new sbstore({
    topic: nconf.get("SERVICE_BUS_TOPIC"),
    connectionString: nconf.get("CUSTOMCONNSTR_SERVICEBUS"),
    logger: io.get('logger')
  }));
});

After you have configured the service bus store you are now ready to scale your application to use as many servers as required. You can download the full source of my sample application on Github.

You can see how to setup Github's password caching tool on their help documentation here. As their documentation mentions, you do need to ensure you are running Git version 1.7.0 or above.

You can see that after the password helper is setup we are prompted for credentials on the first commit, but on subsequent commits our cached credentials are used automatically.

First Push

Second Push

Hopefully that helps save a little time when developing on Windows Azure.

You can now find the source for the "Create a Node.js Application on Windows Azure with MongoDB" tutorial on Github. This application is a simple task list app written in Node.js that uses Mongoose to store data in MongoDB.

/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/Support/lsregister -kill -r -domain local -domain user;killall Finder;

Authenticating with Facebook

Since our app is going to be authentication with Facebook we will likely want to ask the user for additional Facebook permissions such as posting to a wall or reading additional friend data. This currently isn't supported in the Mobile Services SDK. So the first thing we need to do is change how the initial authentication is performed. To this we are going to use the Facebook SDK for Windows Phone. The Facebook SDK for Windows Phone is a layer on top of the Facebook SDK for .NET that helps with authentication and other phone specific scenarios.****

Warning: The Facebook SDK for Windows Phone is currently in alpha so things will change and break as we move toward version 1.0.0.

Starting with our default Mobile Services implementation of authentication as show in this tutorial we need to make a few minor changes.

First, we need to install the Facebook SDK for Windows Phone. To do this use NuGet. Since the package is pre-release you will need to use the Nuget console.

Install-Package Facebook.Client -pre

Next, add a static property for FacebookSessionClient to the App.xaml.cs file. You can add this property right above the MobileServiceClient property.

public static FacebookSessionClient FacebookSessionClient = 
    new FacebookSessionClient("[facebookAppId]");
public static MobileServiceClient MobileService = new MobileServiceClient(
    "https://[namespace].azure-mobile.net/",
    "[applicationKey]"
    );

Next, we will make a few changes to our authentication method in MainPage.xaml.cs as shown below.

private FacebookSession fbSession;
private MobileServiceUser user;
private async System.Threading.Tasks.Task Authenticate()
{
    while (fbSession == null)
    {
        string message;
        try
        {
            fbSession = await App.FacebookSessionClient
                .LoginAsync("email,publish_stream,friends_about_me");
            var client = new FacebookClient(fbSession.AccessToken);
            var token = JObject.FromObject(new
            {
                access_token = fbSession.AccessToken,
            });
            user = await App.MobileService
                .LoginAsync(MobileServiceAuthenticationProvider.Facebook, token);
            message =
                string.Format("You are now logged in - {0}", user.UserId);
        }
        catch (InvalidOperationException)
        {
            message = "You must log in. Login Required";
        }


        MessageBox.Show(message);
    }
}

As you can see, we are now using the FacebookSessionClient to perform the OAuth with Facebook. After the user authorizes the app with Facebook we then create a JToken object containing the Facebook Access Token and pass it to the MobileServiceClient's LogingAsync method. Mobile Services then makes a request to the Mobile Services REST API. On the server a new user is created and a Mobile Services authentication token is created. This token is returned to the client. Now the client is authenticated with both Facebook and Mobile Services.

Also, notice that the FacebookSessionClient's LoginAsync method allows us to pass in a string of permissions to request. In this case we are requesting the email, publish_stream, and friends_about_me permissions. You can change this list accordingly based on the needs of your app.

Using the Facebook Graph API

Now that we are authenticated and have a Facebook access token we can perform requests on the Facebook Graph API using the Facebook SDK for Windows Phone. In this case I am going to request a list of friends including their "About Me" details as we have the "friends_about_me" permission.

To get the Facebook access token simply access the AccessToken property on the FacebookSession object which we have in our app at fbSession. You can see below how you can make this Graph API request using the FacebookClient object.

private async Task GraphRequest()
{
    var client = new FacebookClient(fbSession.AccessToken);
    dynamic friends = await client.GetTaskAsync("me/friends");
    foreach (dynamic friend in friends.data)
    {
        string about = friend.about;
    }
}

Now you are free to interact with both the Facebook Graph API and the Mobile Services API as an authenticated user. You could also use the Facebook SDK for Windows Phone to request additional permissions if your application requires them.

If you are interested in more in depth look at this template, I definitely recommend reading the article written by Xinyang Qui who is the lead developer for this template. His article explains the components of the template, how the client-side app interacts with WebAPIs, and more. For this post, I want to show you some of the cool features of the template and how it can help you build amazing web apps.

Super Fast and Fluid

Ember makes it easy to build apps that are extremely responsive and will provide your users with a great experience. Head over to the deployed version of this template and click between the different views on the site. You will notice how fast the views load. This is because nearly everything  used to render the views is loaded on the first page load. Subsequent interactions with the app are fast and fluid.

Bundles and Minification for Performance

This template uses ASP.NET bundling and minification to decrease the file size and number of requests required to load your application. This is important for any web app, but even more so with a client-side app as you are likely to have hundreds of individual Javascript files as part of your completed project.

bundles.Add(new ScriptBundle("~/bundles/app").Include(
      "~/Scripts/app/app.js",
      "~/Scripts/app/router.js",
      "~/Scripts/app/helpers.js")
      .IncludeDirectory("~/Scripts/app/routes", "*.js")
      .IncludeDirectory("~/Scripts/app/models", "*.js")
      .IncludeDirectory("~/Scripts/app/views", "*.js")
      .IncludeDirectory("~/Scripts/app/controllers", "*.js"));

Packaging of Templates

Managing EmberJS templates can be tricky. Your production site should include all of the templates  in a single file or with the html page to decrease the number of requests you app makes. There are a number of strategies for packaging your templates, but we have made this process super simple with the Ember template. The template includes a helper method that renders all templates that are included in the templates folder. This means you don't need to worry about a build process that combines these files. Additionally, when you are writing your templates Visual Studio also now includes syntax highlighting for the Mustache syntax so your code looks great even inside script tags.

Adding a New View

Now that we have seen some of the cool features from the EmberJS template lets look at customizing this template. The first thing we will do is add a new view to the app. You will see how EmberJS makes this process extremely easy.

First, create a new template file called firstTemplate.html. You can use the code below for the body of the view.

<script type="text/x-handlebars" data-template-name="first">
    <h1>My First Template</h1>
</script>

Now to wire this up the only change you need to make is to add the route. Open the router.js file in the /Scripts/app folder. Add a new route as shown below.

App.Router.map(function () {
    this.route("index", { path: "/" });
    this.route("about");
    this.route("todoList", { path: "/todo" });
    this.route("first"); // New Route
});

That is everything required to create a new view. Navigate to http://localhost:PORT/#/first and you will see your view. Its that simple!

Linking to a View

Now that we have added a new view to the application we need to link to it. This is done using a special mustache helper that is part of Ember. Open the applicationTemplate.html file in the templates folder. You will see the existing links in the