Extend Azure Mobile Services Node Modules

As you may already know, Azure Mobile Services allows you to quickly and easily create APIs that can be accessed via HTTP using GET, POST, PUT, etc.  What is great about the platform is that it allows you to fully leverage node.js to build these APIs using the familiar JavaScript language.  Even better yet, with Azure Mobile Services, you can deploy and manage all of the node scripts via Git.  This can be especially useful if you need to add node modules.  Today, I would like to present how you can extend the node modules available in Azure Mobile Services.

Dependencies


To follow along with this post, you will need the following:

  • Node installed on your machine
  • Git client installed on your machine
  • Azure account
  • Azure Mobile Service

The examples I’ll show leverage a single mobile service that I created in Azure that is configured with an API named ‘test’.  If you would like to follow along with this post, you will need to set up something similar.

Screenshot 2014-06-08 21.01.10

 

Adding Cheerio Module


In the remainder of this post, I will provide an example of how to add support in my test API for the cheerio node module.

For starters, we need to determine the Git endpoint where our code is hosted. This can be found within the “Configure” area for our Mobile Service.

kdkdk

  

We will also need to know the password that is configured for the git source control. If you have misplaced this, it can be reset via the Dashboard.

Screenshot 2014-06-08 20.49.05

 

Once you have the service setup and have located the necessary credentials, we’re ready to get started.  With these two items in hand,

1. Open a command window and navigate to the folder where you want to fetch the source code

2. Use the git command line tools to clone the remote repository (you will be prompted at this step for your password)

$ pwd
/Users/chris/Dev/azure-mobile
$ git clone https://cg.scm.azure-mobile.net/cg.git
Cloning into 'cg'...
remote: Counting objects: 130, done.
remote: Compressing objects: 100% (122/122), done.
remote: Total 130 (delta 43), reused 0 (delta 0)
Receiving objects: 100% (130/130), 28.23 KiB | 0 bytes/s, done.
Resolving deltas: 100% (43/43), done.
Checking connectivity... done.

 

Now that we have the repository cloned locally, we can install the cheerio module using npm. To do so,

1. Navigate to the service folder in the repository we just downloaded

$ cd cg/service/
$ pwd
/Users/chris/Dev/azure-mobile/cg/service

2. Use npm to install the module

</pre>
$ npm install cheerio
npm WARN package.json cg@1.0.0 No repository field.
npm WARN package.json cg@1.0.0 No README data
npm http GET https://registry.npmjs.org/cheerio
npm http 200 <a href="https://registry.npmjs.org/cheerio">https://registry.npmjs.org/cheerio</a></pre>
##### Section Snipped #####
npm http 200 https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz
cheerio@0.16.0 node_modules/cheerio
├── entities@1.1.1
├── lodash@2.4.1
├── CSSselect@0.4.1 (domutils@1.4.3, CSSwhat@0.4.7)
└── htmlparser2@3.7.2 (domelementtype@1.1.1, domutils@1.5.0, entities@1.0.0, domhandler@2.2.0, readable-stream@1.1.13-1)

 

Now that we’ve installed the node module locally, we need to push our updates back to azure via Git:

1. Navigate back to the root folder

$ cd ..
$ pwd
/Users/chris/Dev/azure-mobile/cg

2. Run git add to append the changes to our commit

$ git add .

3. Commit the changes

$ git commit

4. Push the changes back to azure

$ git push
# ... snipped ...
remote: Finished successfully.
remote: Deployment successful.
To https://cg.scm.azure-mobile.net/cg.git
612ffb7..893e99c master -> master

 

After completing these steps, the module should now be available in Azure.  Let’s modify our test API to utilize the cheerio module.

 

Leverage Cheerio Module in API


In a web browser, navigate to the Azure portal and locate the API section for our script.  To get there,

1. Browse the portal to the Mobile Services section from the menu

2. Click on the mobile service that hosts our test API

3. Browse to the API area for the service

4. Click on the service

 

The following screenshots depict these steps:

screen

Once you’ve browsed to the test API, you should see the API script page, which contains the JavaScript code for the API.  The initial set of code in the API should be similar to the following:

exports.get = function(request, response) {
     response.send(statusCodes.OK, { message : 'Hello World!' });
};

As a quick test, if we browse to the service (https://cg.azure-mobile.net/api/test), we receive the following JSON:

{"message":"Hello World!"}

 

Let’s change the code to leverage the newly added cheerio module.  We’ll do something simple, like generate some html using the libraries and then return that to the user.  Simple enough right?  Here’s what that looks like:

var cheerio = require('cheerio');

exports.get = function(request, response) {
    // create the div element
    var $ = cheerio.load("<div />");

    // append other elements and classes to the div
    $("div").addClass("main-container");
    $("div").append("<p id='hello'>");
    $("div").append("<p id='time'>");
    $("p#hello").text("Hello World!");
    $("p#time").text("The time is currently " + new Date());

    // return the HTML and HTTP 200
    response.send(statusCodes.OK, $.html());
};

The code above basically just creates a div with two nested paragraph elements with some text in them.  It then returns the HTML generated by cheerio to the caller along with HTTP status code OK (200).  If we browse the API, here is what we get:

<div class="main-container"><p id="hello">Hello World!</p><p id="time">The time is currently Mon Jun 09 2014 06:19:36 GMT+0000 (Coordinated Universal Time)</p></div>

 

Conclusion


As you can see, extending Azure Mobile Services with node modules is pretty easy.  You can also use this same approach to create your own modules that you can share across all of your APIs, which is a pretty useful feature for making your code reusable.

The example showed a pretty basic use case, which resulted in us building and returning HTML using our API.  This might not be a very useful feature in itself, but being able to add your own or third party modules is an extremely valuable feature.

I hope you enjoyed this post.  Please provide me your feedback using the comments below.  Use the sharing buttons to get social and spread the word about this post.

 

Add your comment Add your comment

Previously