Subscribe: Serge van den Oever [Macaw]
Preview: Serge van den Oever [Macaw]

Serge van den Oever [Macaw]

SharePoint RIP. Azure, Node, hybrid mobile apps


SPA Series: Using sp-rest-proxy for local web development against real SharePoint data

Mon, 29 Aug 2016 15:46:27 GMT

A very interesting tool called sp-rest-proxy enables us to do local web development against real SharePoint data. All REST api requests are proxied to the real SharePoint in the context of a configured site under the credentials of a configured username and password.

Install sp-rest-proxy using: npm install sp-rest-proxy --save-dev. See sp-rest-proxy for the documentation.

As described in the documentation create a file server with the following contents:

Consuming Javascript libraries from TypeScript without type definition files

Sat, 09 Jul 2016 09:16:00 GMT

There are cases where you need to consume Javascript libraries or, for example, ReactJS components written in Javascript from your TypeScript code. Possible reasons: You find a great library or component "out in the wild" written in Javascript One of your team-members does not know/does not want to write TypeScript You want to consume components from an existing library or component set writen in Javascript Assume the situation where a ReactJS component MyComponent.jsx written in Javascript must be consumed from a component Home.tsx: The file MyComponent.jsx: import * as React from 'react';export class MyComponent extends React.Component {  constructor(props) { super(props); }  render() { return (

Hello from MyComponent

); }} We could import this component in different ways: import {MyComponent} from './MyComponent'; // ERROR: Cannot find module './MyComponent'const MyComponent = require('./MyComponent'); // Warning if used as // see X = require('./MyComponent'); // OK if used as const MyComponent = require('./MyComponent').MyComponent; // OKconst MyComponent = require('./MyComponent').default;// OK if defined as export default class MyComponentconst {MyComponent} = require('./MyComponent'); // OK, it's possible to destructure multiple components For details on how to specify types for desctructured object parameters see destructured object parameters in TypeScript. So if we want to consume the above JavaScript component from TypeScript in the component Home.tsx: import * as React from 'react';const MyComponent = require('./MyComponent').MyComponent;export class Home extends React.Component { render() { return (
); }} [...]

Polymer 1.0 - Polylint - use on project instead of component

Fri, 18 Sep 2015 16:33:00 GMT

The Polymer team just release Polylint, a tool to catch errors in your polymer project before even running your code.

The tool seems to be designed to work in a component, but it faisl in a project that follows the project structure as used in the Polymer Starter Kit.

You can see this structure at

In this structure the folder bower_components folder is located next to the app folder, instead of in the app folder.

To get started:

git clone

cd  polymer-starter-kit

bower install

Now if you run the command polylint --root app --input index.html you will get the following errors:

ERROR finding app\bower_components\webcomponentsjs\webcomponents-lite
Error: ENOENT, open 'C:\p\serge\polymer-starter-kit\app\bower_components\webcomponentsjs\webcomponents-lite'
at Error (native)
ERROR finding app\bower_components\iron-flex-layout\classes\iron-flex-layout.html
ERROR finding app\bower_components\iron-icons\iron-icons.html
ERROR finding app\bower_components\iron-pages\iron-pages.html
ERROR finding app\bower_components\iron-selector\iron-selector.html
ERROR finding app\bower_components\paper-drawer-panel\paper-drawer-panel.html
ERROR finding app\bower_components\paper-icon-button\paper-icon-button.html
ERROR finding app\bower_components\paper-item\paper-item.html
ERROR finding app\bower_components\paper-material\paper-material.html
ERROR finding app\bower_components\paper-menu\paper-menu.html
ERROR finding app\bower_components\paper-scroll-header-panel\paper-scroll-header-panel.html
ERROR finding app\bower_components\paper-styles\paper-styles-classes.html
ERROR finding app\bower_components\paper-toast\paper-toast.html
ERROR finding app\bower_components\paper-toolbar\paper-toolbar.html
ERROR finding app\bower_components\page\page
ERROR finding app\bower_components\polymer\polymer.html

This can be solved by creating a symbolic link bower_components in the app folder to ..\bower_components.

The following script RunPolylint.bat will do this, place it in the root of your project (next to the app folder.

:: RunPolylint.bat - by Serge van den Oever,
:: This script assumes that polylint in installed
:: globally through the following command:
:: npm install -g polylint
:: Polylint assumes that the bower_components folder is located
:: in the same folder as the entry point file as specified with --input.
:: This is the case for a Polymer component, but not for an application
:: that follows the structure of the Polymer Starter Kit.
:: This script solves this issue by creating a temporary symbolic link
:: to the folder bower_components in the folder app
@cd %~dp0
set root=app
set input=index.html
pushd %root%
mklink bower_components ..\bower_components
polylint --root %root% --input %input%
del %root\bower_components

Intel AppFramework create and use your choice of IcoMoon icons

Sun, 19 Jul 2015 23:14:53 GMT

The Intel AppFramework uses a small subset of the IcoMoon icons. This post describes how to make your own selection of IcoMoon icons and use it in your app. There is a free IcoMoon icon set with 490 icons available that we will use to make our selection from. Open the url Open the IcoMoon - Free icon set and select the icons you want to use in your app It is also possible to select all icons (we will do that for now) Select the Generate Font option at the bottom Press settings and select Font Name IcoMoon, select as Class Prefix icon. and select the option Encode & Embed Font in CSS Now click the download button Open the downloaded file and copy the file style.cssto your styles folder as customicons.css Open de customicons.css file and compare with the file appframework/build/icons.css (we need to copy over the appframework specific styles) Remove the first four lines with a file-based @font-facedefinition, we will use the embeded one @font-face { font-family: 'IcoMoon'; src: url('fonts/IcoMoon.eot'); } Replace: .icon { font-family: 'IcoMoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } with (check appframework/build/icons.css for changes): .icon:before { font-family:'IcoMoon'; speak:none; font-style:normal; font-weight:normal !important; font-variant:normal; text-transform:none; line-height:1; color:inherit; position:relative; font-size:1em; left:-3px; top:2px; } li .icon:before { position:relative; width:24px; height:100%; top:2px; line-height:0 !important; margin-right:4px; } { font-size:.7em; } .icon.big:before { font-size:1.5em; } and we are done!  In your main.css file include the appframework css files and your customicons.css file (or include directly in html): @import url(../appframework/build/af.ui.base.css);@import url(../appframework/build/af.ui.css);@import url(customicons.css); [...]

Intel AppFramework installation and documentation

Fri, 17 Jul 2015 22:19:00 GMT

I have written a mobile app with Ionic Framework but I must say that I'm not really font of the AngularJS framework, especially now that you know that version 1.3 as used in Ionic at the time of writing (version 1.0.1) is a dead end and version 2 is on the horizon. For a new mobile app I needed a mobile app UI framework that I can use in combination with ReactJS and that would work on an as wide range of mobile devices as possible. Reapp looks promising, but is still alpha and not very cross platform (for example Windows Phone). I ended up with Intel App Framework version 3, a simple framework with great support for multiple devices. It event tries to mimic the native style on each type of device, I'm not sure yet if i'm that happy about that, but it is also possible to override the ui time to a fixed ui (for example ios) for all devices. Installing Intel App Framework For client framework I normally use Bower. The Intel App Framework in available on Bower as the "intel-bower" package, but that package is not maintained and out of date, so don't use it. There is another reason why you shouldn't use it, it only contains the js and css files, not the samples which you really need due to a lack of documentation. More on that later. My approach is that I add the original appframework Git repository ito my project's Git repository a a submodule: git submodule add  appframework And to update this (an possibly other) submodules in your repository, just execute: git submodule foreach git pull Documentation The documentation available for the Intel App Framework is ... minimal. Your main entry point is at The most important entry in the documentation is, in this list you find some interesting things like: - UI Quickstart  - gives a nice initial introduction on using the Intel App Framework - OS Themes - how to disable custom os themes and specify the one you want to use on all devices (still mentions version 2.1?!) For all JavaScript api's and plugins see The documentation is very minimal (to say the least) about a lot of things. Good example: the section Vector Icons does not mention the available icons, and does not explain how to add your custom icons (I will write about that in a next blog post). One of the most important pages is the appframework/index.html kitchensink example. It is possible to run this page directly within the github repository by translating it's url from: to (see this stackoverflow page for more information on this translation) This is a list of all example pages in the appframework github repository. They are interesting to check out and its source code is one of the best sources of documentation: Kitchensink index.html (github source code) note: sample gives overview of all available vector fonts Kitchensink animbase.html (github source code) note: had to fork the appframework repository and make some changed because JQuery and FastClick were not referenced correctly Angular todo example (github source code) Backbone todo example (github source code) React todo example (github source  code) note: this is a very simplistic React example, I had some more trouble to get multiple panels provided by React rendering working Lancaster demo (github source code) note: had to fork the appframework repository and make some changed because JQuery and FastClick were not referenced correctly Template drawer (github source code) Template form (github source code) Template gridview (github source code)[...]

AngularJS 2 and TypeScript... some work to do...

Sat, 23 May 2015 22:36:09 GMT

After reading a great "First impressions" post on AngularJS 2 ( I headed over to the code repository of AngularJS 2 to see how they write their code now in my favorite front-end language: TypeScript. After looking at some of the code it is clear that the team has still some TypeScript to learn. A little example of something you find in most of the code: for example in the file

export class EventBinding {
fullName: string; // name/target:name, e.g "click", "window:resize"
source: ASTWithSource;

constructor(fullName: string, source: ASTWithSource) {
this.fullName = fullName;
this.source = source;

But one of the features of TypeScript is parameter property declaration and is shorthand for declaring a property with the same name as the parameter and initializing it with the value of the parameter. This would reduce the above code to:

export class EventBinding {
constructor(private fullName: string, private source: ASTWithSource) {

See chapter 8.3.1. of the TypeScript language specification.

And this is a really simple example. The code is full of this kind of initialization code.

Building an Ionic hybrid mobile app with TypeScript

Mon, 26 Jan 2015 13:00:11 GMT

Presentation based on experiences of building a hybrid mobile app using the Ionic framework, Cordova, AngularJS and TypeScript.

The app we have built is for Android and iOS.

src="//" width="476" height="400" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">

Cordova – file-transfer, unzip and present adventures

Fri, 21 Mar 2014 11:40:00 GMT

For a hybrid project I have a very simple requirement: download zip file, unzip it, serve content on a page from artifacts (html text, images). I started with Intel XDK, an environment I did some other work with. A great integrated development environment, but some of its big problems: lagging behind in version of Cordova, fixed set of selected plugins, no possibility to include other plugins. Because I wanted to unzip, I tried it with a Javascript only solution zip. The problem I had was that it worked if I downloaded the zip file over http using importHttpContent(), but I could’t get it working with loading from the local file system. Another problem I had was with where files ended up on different devices: in / on wp8, on /storage/sdcard0 on Android, and on iOS in even another location. I decided to go with plain Cordova, with the command-line commands. That was a good decision. It was now possible to use the latest version (3.4 at time of writing), and use the new file and file-transfer plugins that now support a huge improvement to hybrid development: the cdvfile protocol. Files can now be addressed with respect to one multi-platform root: cdvfile://, rather than through device-specific paths. There is also a great plugin available to unzip that understands the new cdvfile:// notation as well. I ended up with a simple example to showcase the download, unzip and present case. To get it working execute the following commands with a Cordova 3.4 installation: cordova create Cordova-TransferUnzipPresent com.svdoever.tranferunzippresent TransferUnzipPresent cd Cordova-TransferUnzipPresent cordova platform add android cordova plugin add org.apache.cordova.file cordova plugin add org.apache.cordova.file-transfer cordova plugin add Replace code in www\index.html with the code below cordova emulate android Works with iOS platform as well. The zip plugin does not work on wp8 (yet). The code: Cordova Download Unzip Display Sample



It works fine when jQuery is included, but not when you use the AngularJS JQLite implementation.
is used, the code works correctly.

Webstorm – great IDE for web development

Fri, 17 Jan 2014 00:09:40 GMT

I’m really interested in front-end web development, and although Visual Studio 2013 is the main IDE in our company I’m really impressed by Webstorm from JetBrains, the guys behind Resharper. It is a full featured web development IDE for under $50. Although I’m impressed by the better support of Visual Studio 2013 for web development, Webstorm feels like “exactly made” for web development.The reason I favor Webstorm right now is that Visual Studio is pushing you too much into the Microsoft way, with server side code, web.config files etc. I want to build single page apps, front-end (JavaScript and Typescript) code only, talking to services, that can be hosted on any web server, or even drop box, and can also be embedded into a Phonegap mobile application if needed.

And the great thing: it works on OSX and Windows, I have my code on dropbox and can hop from mac to windows without changing a thing.

Check out

Note: I’m in no way affiliated with, or sponsered by, JetBrains, just a happy and impressed user.

Visual Studio Online “Monaco”: the backend is in node

Mon, 09 Dec 2013 11:38:14 GMT

Probably to some surprise for some of you: the backend of Monaco is written in node, and actually a quite new version of node: version v0.10.21 (at the time of writing this post). Because it is running on IIS, it uses iisnode to run the site. The backend uses the following node modules: edge – Edge: run .NET and node code in-process ( express – Sinatra inspired web development framework ( glob - Match files using the patterns the shell uses, like stars and stuff. ( graceful-fs - A drop-in replacement for fs, making various improvements. ( ini - An ini encoder/decoder for node ( jake - JavaScript build tool, similar to Make or Rake ( nake - GNU Make/Ruby Rake like tasks management tool for NodeJS ( npm - A package manager for node ( optimist - Light-weight option parsing with an argv hash. No optstrings attached. ( sax - An evented streaming XML parser in JavaScript ( send - Better streaming static file server with Range and conditional-GET support ( The code base itself consists of the following files: D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/availableLanguages D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/config/db D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/config/home D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/config/logger D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/config/tools D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/config/workspaces D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/config D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/config/config.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/contributions D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/event/event.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/event/event D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/event/eventImpl D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/experiment/experiment.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/feedback/feedback.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/files/files.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/files/files D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/files/stat D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/git/git.config D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/git/git.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/git/git D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/output/output.contribution D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/process/commands/any D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/process/commands/azure D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/process/commands/commands D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/server/contrib/process/commands/express D:\Program Files (x86)\SiteExtensions/Monaco/1.0.[...]

Visual Studio Online “Monaco”: supported languages and file types

Mon, 09 Dec 2013 11:05:34 GMT

Diving into Visual Studio online I was wondering which languages / file types are supported. After some hacking I came to the following list: bat, coffeescript, cpp, csharp, css, fsharp, handlebars, html, ini, jade, java, javascript, jshtm, json, less, lua, markdown, php, powershell, python, razor, ruby, typescript, vb, xml. Not all languages will probably be supported out of the box, it probably depends on your msbuild / jake / whatever build script. I based this list on the following “support files” in the Monaco source code: D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/bat/bat D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/bat/bat.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/bat/bat.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/coffeescript/coffeescript D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/coffeescript/coffeescript.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/coffeescript/coffeescript.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/cpp/cpp D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/cpp/cpp.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/cpp/cpp.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/csharp/csharp D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/csharp/csharp.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/csharp/csharp.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/css.css D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/css D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/css.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/css.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/cssWorker D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/cssWorker.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/cssWorker.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/lib/beautify-css.license.txt D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/lib/cssLib D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/lib/cssLib.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/lib/cssLib.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/lib/csslint.license.txt D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/lib/OSSREADME.txt D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/monacoParticipant D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/monacoParticipant.nls D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/monacoParticipant.nls.keys D:\Program Files (x86)\SiteExtensions/Monaco/1.0.0-20131104/client/86a9221e/vs/languages/css/README D:\Program Files (x86)\SiteExte[...]

Hybrid mobile applications–what is it–what are the tools

Tue, 10 Sep 2013 22:06:23 GMT

As mentioned in a previous blog post I am going to write some observation posts on development tools that can be used to write hybrid mobile applications. What is a hybrid mobile application in my thoughts? I see it as a:

  • platform specific native “shell” application
  • utilizes a browser control as its rendering surface
  • provides an API that gives access to native device functions (camera, contacts, …)
  • makes the API available to Javascript running in the browser control
  • the application functionality is written using HTML, CSS and Javascript in the spirit of building web apps
  • the application specific code can be bundled and ”injected” into the shell application
  • the functionality provided by the shell application can be extended with plugins that are written for the native platform and provides additional API functions to the Javascript running in the browser control

There are many other possible ways to think about hybrid mobile apps, but the slice of approaches I’m most interested in is the one where you utilize web standards to build your mobile applications. There is a great blog post by Udayan Banerjee called Cross-Platform Hybrid Mobile Application Development – a Tool Comparison where he goes into great detail on the huge set of different tools that are available in the broad sense of hybrid mobile apps. He divides the tools into:

  • Mobile Web (JavaScript-CSS library), (see this)
  • Visual Tool (No access to Code), (see this)
  • App Generator (Native application for multiple platforms), (see this)
  • Hybrid App (Leverages embedded browser control), (see this)
  • Game Builder (see this)

I will only discuss tools that are in the Hybrid App space.

See the following post for some of my observations on tools in this space: (not written in the specified order)

  • Cordova (to be written)
  • PhoneGap / PhoneGap Build (to be written)
  • Intel XDK (to be written)
  • Red-gate Nomad (to be written)
  • Icenium (to be written)
  • DevExpress DevExtreme (to be written)

I will update the links when the posts are written.

Developing mobile apps–too many options?

Tue, 10 Sep 2013 15:50:16 GMT

It is unbelievable how many companies jumped on the mobile app development bandwagon.

In the early days life was easy. When you developed for iOS (iPhone, iPod Touch and iPad) you bought a Mac, downloaded XCode and started programming in Objective-C. For Android you grabbed a PC, downloaded the Android SDK and Java was your best friend. And for Windows Phone (yes it still exists) you downloaded a version of Visual Studio, the Windows Phone SDK and you started to hack away in good old C#.

The new trend for mobile apps that don’t ask too much from the platform (say non-game, and non-multimedia applications) is to develop them cross-platform without the need to rewrite the applications multiple times in different languages.

Wikipedia gives a nice overview of some of the available mobile application development platforms at And this overview is even far from complete.

Within the development platforms you see broadly two options for developing your cross-platform mobile apps:

  1. Development in one language for a native UI, where the interaction patterns are phone specific
  2. Development one one language for a cross-platform UI, where the interaction patterns are app specific

Of course there are all kind of mixes of the above two options, for example Appcelerator where you develop your code in Javascript with a platform independent API to create native UI elements, or a lot of JavaScript libraries like PhoneJS en KendoUI where you render web technology widgets using HTML, CSS and Javascript that try to behave like native widgets.

I am very interested in the Xamarin approach where you can use C# as the common app language, but create a native UI per platform. But I am also a strong believer of the “hybrid” development approach where you develop your application using HTML, CSS and Javascript, and wrap your “application” in a host application for packaging and deploying to the app stores.

In some following posts I will dive into a few of the development options for creating hybrid mobile applications using tooling like:

All above options have their roots in the Cordova project.

Azure Mobile Services: revealing the internals

Fri, 26 Jul 2013 00:54:09 GMT

I think this is an interesting blog post if you want to know how azure Mobile Services is working. Don’t forget to check the link at the end of this post to see all source code of Azure Mobile Services:-) The Azure Mobile Services documentation is … suboptimal. It is unclear in which context our server side scripts are running, which node modules are available, and which node modules are already loaded. The best way to get an idea on what is going on is by looking at the source code that is running inside Azure Mobile Services. In this post I will show some of the node scripts running Azure Mobile Services. These scripts are the scripts running today, but they may change as we speak. At least the scripts will give us some ideas what is happening. I will try to comment on some things that we see, but I’m absolutely no node expert, I just started to dive into this technology. Azure mobile services in built on top of node which is running in IIS8 using iisnode. To support the web features like the API’s Azure Mobile Services uses the Express web application framework for node. When you look at the getting started guide of Express you see that you need to “… Create a file named app or server”. If you look at the used Web.config file this is exactly the starting point that is on Azure Mobile Services as defined in the handlers section: Source-code of Web.config: [...]

Azure Mobile Services: available modules

Sat, 29 Jun 2013 23:23:06 GMT

Azure Mobile Services has documented a set of objects available in your Azure Mobile Services server side scripts at their documentation page Mobile Services server script reference. Although the documented list is a nice list of objects for the common things you want to do, it will be sooner than later that you will look for more functionality to be included in your script, especially with the new provided feature that you can now create your custom API’s. If you use GIT it is now possible to add any NPM module (node package manager module, say the NuGet of the node world), but why include a module if it is already available out of the box. And you can only use GIT with Azure Mobile Services if you are an administrator on your Azure Mobile Service, not if you are a co-administrator (will be solved in the future). Until now I did some trial and error experimentation to test if a certain module was available. This is easiest to do as follows:   Create a custom API, for example named experiment. In this API use the following code: exports.get = function (request, response) { var module = "nonexistingmodule"; var m = require(module); response.send(200, "Module '%s' found.", module); }; You can now test your service with the following request in your browser: If you get the result: {"code":500,"error":"Error: Internal Server Error"} you know that the module does not exist. In your logs you will find the following error: Error in script '/api/experiment.json'. Error: Cannot find module 'nonexistingmodule' [external code] atC:\DWASFiles\Sites\yourservice\VirtualDirectory0\site\wwwroot\App_Data\config\scripts\api\experiment:3:13[external code] If you require an existing (undocumented) module like the OAuth module in the following code, you will get success as a result: exports.get = function (request, response) { var module = "oauth"; var m = require(module); response.send(200, "Module '" + module + "' found."); }; If we look at the standard node documentation we see an extensive list of modules that can be used from your code. If we look at the list of files available in the Azure Mobile Services platform as documented in the blog post Azure Mobile Services: what files does it consist of? we see a folder node_modules with many more modules are used to build the Azure Mobile Services functionality on, but that can also be utilized from your server side node script code: apn - An interface to the Apple Push Notification service for Node. dpush - Send push notifications to Android devices using GCM. mpns - A Node interface to the Microsoft Push Notification Service (MPNS) for Windows Phone. wns - Send push notifications to Windows 8 devices using WNS. pusher - Node library for the Pusher server API (see also: azure - Windows Azure Client Library for node. express - Sinatra inspired web development framework. oauth - Library for interacting with OAuth 1.0, 1.0A, 2 and Echo. Provides simplified client access and allows for construction of more complex apis and OAuth providers. request - Simplified HTTP request client. sax - An evented streaming XML parser in JavaScript sendgrid - A NodeJS implementation of the SendGrid Api. sqlserver – In node repository known as msnodesql - Microsoft Driver for Node for SQL Server. tripwire - Break out from scripts blocking node event loop. underscore - JavaScript's functional programming helper library. underscore.string - String manipulation extensions [...]

Azure Mobile Services: what files does it consist of?

Sat, 29 Jun 2013 21:20:06 GMT

Azure Mobile Services is a platform that provides a small set of functionality consisting of authentication, custom data tables, custom API’s, scheduling scripts and push notifications to be used as the back-end of a mobile application or if you want, any application or web site. As described in my previous post Azure Mobile Services: lessons learned the documentation on what can be used in the custom scripts is a bit minimalistic. The list below of all files the complete Azure Mobile Services platform consists of ca shed some light on what is available in the platform. In following posts I will provide more detailed information on what we can conclude from this list of files. Below are the available files as available in the Azure Mobile Services platform. The bold files are files that describe your data model, api scripts, scheduler scripts and table scripts. Those are the files you configure/construct to provide the “configuration”/implementation of you mobile service. The files are located in a folder like C:\DWASFiles\Sites\youreservice\VirtualDirectory0\site\wwwroot. One file is missing in the list below and that is the event log file C:\DWASFiles\Sites\youreservice\VirtualDirectory0\site\LogFiles\eventlog.xml where your messages written with for example console.log() and exception catched by the system are written. NOTA BENE: the Azure Mobile Services system is a system that is under full development, new releases may change the list of files. ./app ./App_Data/config/datamodel.json ./App_Data/config/scripts/api/youreapi ./App_Data/config/scripts/api/youreapi.json ./App_Data/config/scripts/scheduler/placeholder ./App_Data/config/scripts/scheduler/youresheduler ./App_Data/config/scripts/shared/placeholder ./App_Data/config/scripts/table/placeholder ./App_Data/config/scripts/table/yourtable.insert ./App_Data/config/scripts/table/yourtable.update ./App_Data/config/scripts/table/yourtable.delete ./App_Data/config/scripts/table/ ./node_modules/apn/index ./node_modules/apn/lib/connection ./node_modules/apn/lib/device ./node_modules/apn/lib/errors ./node_modules/apn/lib/feedback ./node_modules/apn/lib/notification ./node_modules/apn/lib/util ./node_modules/apn/node_modules/q/package.json ./node_modules/apn/node_modules/q/q ./node_modules/apn/package.json ./node_modules/azure/lib/azure ./node_modules/azure/lib/cli/blobUtils ./node_modules/azure/lib/cli/cacheUtils ./node_modules/azure/lib/cli/callbackAggregator ./node_modules/azure/lib/cli/cert ./node_modules/azure/lib/cli/channel ./node_modules/azure/lib/cli/cli ./node_modules/azure/lib/cli/commands/account ./node_modules/azure/lib/cli/commands/config ./node_modules/azure/lib/cli/commands/deployment ./node_modules/azure/lib/cli/commands/deployment_ ./node_modules/azure/lib/cli/commands/help ./node_modules/azure/lib/cli/commands/log ./node_modules/azure/lib/cli/commands/log_ ./node_modules/azure/lib/cli/commands/repository ./node_modules/azure/lib/cli/commands/repository_ ./node_modules/azure/lib/cli/commands/service ./node_modules/azure/lib/cli/commands/site ./node_modules/azure/lib/cli/commands/site_ ./node_modules/azure/lib/cli/commands/vm ./node_modules/azure/lib/cli/common ./node_modules/azure/lib/cli/constants ./node_modules/azure/lib/cli/generate-psm1-utils ./node_modules/azure/lib/cli/generate-psm1 ./node_modules/azure/lib/cli/iaas/blobserviceex ./node_modules/azure/lib/cli/iaas/deleteImage ./node_modules/azure/lib/cli/iaas/[...]