Use a specific Cordova version for hybrid app development

Scenario

Cordova is used as the de-facto standard software for creating hybrid mobile apps. To keep up with mobile platforms, a new version of Cordova is released constantly. This creates a certain challenge for mobile app developers that have to not only create new apps, but also have to maintain older versions. Specifically in enterprise environments, it is not always possible to simply update to a new Cordova version. One reason can be an upcoming go-live. You do not want to change your SDK days before a go-live as this increases drastically your testing efforts. For instance, SAP releases a software development kit (SDK) for its SAP Mobile Platform 3 (SMP3) to enable developers to efficiently create apps. The SDK is not a static product but is actively developed and supported by SAP. This means that a SDK receives constant updates and patches. Each SDK SP version comes with a minimum and recommended Cordova version. A developer that has to create new apps and at the same time maintain older versions may come into the situation where it is necessary to have not only different version of a SDK SP installed, but also of the Cordova tool. Given a normal workload, the developer may have to change between the new project and the maintenance several time per day.

Problem

The above scenario creates the following problem for the developer: by default, Cordova is installed via npm globally. With this, only one version of Cordova is available at a given time. For the developer this means that he cannot simply have several versions for each SDK SP and project available. A manual remove of the current version of Cordova and install of the needed version is necessary. As the npm install is globally done, one version of Cordova is activated for all users of the computer.

Solution

The root cause of the problem is how Cordova is installed. Cordova is delivered and maintained via npm. The default way of installing Cordova is to issue the command:

npm –g install cordova[@{version}]

Install locally

npm offers alternatives to the above shown installation option. Without the –g flag, a npm module will be installed into the nodes_module folder of the current path. To install Cordova locally to the project folder, the command is:

npm install cordova[@{version}]

With this, Cordova executable is available at node_modules/cordova/bin/cordova

A cordova –v run against the newly installed version shows that the right version is installed.

To create a Cordova project with that version, this newly installed version must be used and not the globally available version. The command line parameters are not affected by this.

node_modules/cordova/bin/cordova create hello com.sap.hello HelloWorld

To add Cordova platforms or plugins, the Cordova version inside the local nodes_modules folder must be invoked.

node_modules/cordova/bin/cordova platform add android

node_modules/cordova/bin/cordova plugins add cordova-plugin-console

The same rule applies for compilation, build or run of a Cordova app.

node_modules/cordova/bin/cordova compile

Install locally (advanced)

Installing Cordova locally as shown above still means that the Cordova package must be installed before a Cordova/Kapsel project is created. To have several version of Cordova available in that way, several folders must be created, preferably containing a version tag of the installed Cordova. This implies that inside the actual hybrid project, no reference to the needed Cordova version is maintained, despite the SDK SP dependency.

To have the Cordova version tight into the project, any Cordova version can be used to create the project folder structure. Inside the folder the needed Cordova version can be installed locally. That way, the Cordova version is made available inside the project, making it easier to share the project or to onboard new team members. On the contrary, instead of having one single repository for each Cordova version, the executable must be provided for each project.

NPM link

NPM comes with a link tool. This tool links a package globally. This makes a local package globally available. The local package will appear as it was installed using npm install –g <package>. The link tool is handy when the npm package is available via its source code (like GitHub) and is therefore not needed to be installed from the npm repository.

In combination with Cordova, npm link allows to make a checked out version of Cordova globally available. A local available versoin of Cordova downloaded via git can be checked out and activated by npm link. To activate a specific version, this version is checked out via git and then activated by npm link.

The installation procedure is as given by Cordova.

git clone https://git-wip-us.apache.org/repos/asf/cordova-cli.git
cd cordova-cli
npm install
sudo npm link
npm link plugman

To go through each step:

git clone https://git-wip-us.apache.org/repos/asf/cordova-cli.git

npm install

npm link

To check the currently activated version of Cordova: cordova –v


To switch to another version of Crodova, git is to be used. The following example shows how to switch to Cordova 4.0.0 globally. First, get a list of tags from git: git tag

Checkout version 4.0.0.

git checkout 4.0.0

npm install

npm link

The check that version 4.0.0 is now available globally, issue cordova –v from the command line.

To test that Cordova 4.0.0 is now being used, create a new project: cordova create TestSAP com.sap.hello TestSAP

Add android as a platform: cordova platforms add android

Please note that android platform version 3.6.4 is used, and not 4.1.1 as it was with Cordova 5.4.1

Getting started with BUILD – Installation

After meeting the pre-requirements for BUILD, it is time to actually install BUILD. The steps are outlined at SAP BUILD GitHub page. There a 4 steps:

  1. Get the tool
  2. Install required node modules
  3. Initialize the db
  4. Start the app

Be sure to have followed the steps outlined in the pre-requisites in my previous blog.

1. Get the tool

BUILD is hosted on GitHub, so all it needs to get the source code is git. It`s as of today only 255 MB that you have to download.

Command: git clone https://github.com/SAP/BUILD.git

2. Install required node modules

Change to the BUILD directory and run the following commands:

Command: npm install –g grunt-cli

Change to BUILD\BUILD directory. Install dependency of project

Command: npm install

Note: before doing this, verify that the command shell you are using is configured to use node v0.10.38

Command: nvmw use v0.10.38

Tip: The installation will have to compile some libraries using Microsoft C++ compiler. Make sure the compiler is using the right SDK.

Command: call “C:\Program Files\Microsoft SDKs\Windows\v7.1\bin\Setenv.cmd” /Release /x64

Now the SDK is using the 64 bit version of the SDK.

Result

Node-gyp is compiling files.

In the end, you should see something like that:

Possible errors

Error: mocha\bin does not exist

Solution: try a npm cache clear, delete the local node_modules directory and run npm install again.

Error: Could not load the Visual C++ component

In case you did not point the SDK to use the right MSFT compiler, you get this error message:

Solution: Run from within cmd: call “C:\Program Files\Microsoft SDKs\Windows\v7.1\bin\Setenv.cmd” /Release /x64

Error: EPERM with npm-cache

Solution: run npm install again. It should now pass this error. You may have to delete the lock file.

3. Initialize the database

Only needed after initial installation of BUILD.

Run the commands from the server directory.

Create schema

Command: node initSchema.js

The above command will create a DB schema called norman. Taking a look into the config file, reveals that there is a section for db. The defines a database named norman.


"db": {
"hosts": "localhost",
"database": "norman",
"options": {
"db": {
"w": 1
},
server": {
"poolSize": 5,
"socketOptions": {
"keepAlive": 1
}
}
}
},

Test

The see if the database was created in mongo db, connect to the db and issue the command show dbs.

Command: mongo.exe

Command: show dbs

Set access permissions

Command: node setDefaultAccess.js

4. Start BUILD app

Command: grunt serve

Result

Note the final line stating: Server started.

Access BUILD

This means that the http server is running at default port 9000 on localhost. Access it on Chrome.

Click on join to create an account. Afterwards, create a new project

  1. Enjoy BUILD

Have fun.

Getting started with BUILD – Pre requisites

SAP showed a demo of BUILD at its TechEd keynote at Las Vegas. The 1st time I tried to install BUILD on my laptop was shortly after it was launched and I was still in the hospital; and I failed getting it working. Afterwards I mainly interacted with BUILD using SAP`s internal system. The installation is not an easy next, next, next wizard (yet), but as BUILD is a really impressive tool for UX, AND OPEN SOURCE, I believe nobody should be left out of using BUILD just because the installation isn`t doable by everyone. So I created this blog showing how I installed BUILD on my Windows 7 64bit laptop. I hope it helps people getting started with exploring the powerful features of BUILD.

The GitHub project outlines the prerequisites as well as the actual installation steps. Meeting the prerequisites is a must, and not so easy, as you`ll need to have the right versions made available for build to work.

PREREQUISITES

The prerequisites are

  • GIT
  • npm.js in version1.4.28
  • node.js in version 0.10.33 or 0.10.38
  • MongoDB in version 2.6.x
  • node-gyp

Let me show you how I did make this work on a Windows 7 64bit laptop. Installing git is the easiest one. Just download it from git-scm.org. The others a little bit more complicated. Let me detail the steps here for each component.

NPM.JS

Command: npm –g install npm@1.4.28

Test

Command: npm –version

NODE.JS

You have basically two alternatives to install Node.js in version 0.10.38. Either you download it make sure that your cmd is using this version (PATH variable), or you activate the right version for your current session.

Download

There are several versions available for download from nodejs.org. You can opt to download the installer for a specific version or to download the executable. The URL to download the files for 0.10.38 is: https://nodejs.org/dist/v0.10.38/

To download just node.exe, download it from there and save it into a directory. Run node.exe from there and check that it is the right version number

Test

Command: node.exe –version

Node package manager

This is the alternative you should prefer. Easier to use, allows to have several node version in the system and done by npm. To do so, first install nvm. On Windows, you`ll have to use nvmw.

Command: npm install –g nvmw

Now you can use nvmw to install a specific version of node.

Command: nvmw install v0.10.38

Activate node.js 0.10.38

Command: nvmw use v0.10.38

Test

To see if 0.10.38 is now activated, run node with the version parameter

Command: node –version

Python

Download Python 2.7 installer and install python. Ensure that the python executable binary is in the path.

Test

Node-gyp

Looks like the installation of BUILD will have to compile some stuff, so node-gyp is being used. The installation of node-gyp is more complex and can be found here: https://github.com/nodejs/node-gyp/blob/master/README.md#installation

For Windows 7 64 bit, it means to install two components:

  • C++ compiler and
  • Windows 7 SDK

C++ compiler

The compiler is Microsoft Visual Studio C++ 2013 for Windows Desktop. Download it from Microsoft: http://www.microsoft.com/en-gb/download/details.aspx?id=44914

Select the version you want to download. I recommend the online installer.

After downloading the online installer, run it

Accept the license term to start the 7 GB install

Restart computer.

Windows 7 64bit SDK

Download the Windows 7 64bit SDK from Microsoft: http://www.microsoft.com/en-us/download/details.aspx?id=8279

Run the installer

Select the components you want to install. Best is to leave the default.

This starts the installation and download of necessary files.

Result: SDK is installed.

Afterwards, some strange Help Library Manager pops up and starts to fetch things from the Internet. Just let it finish and then exit it.

Possible error

Solution

“To resolve this issue, you must uninstall all versions of the Visual C++ 2010 Redistributable before installing the Windows 7 SDK. Checking the list of installed programs reveals that I do have this library installed.” Microsoft

Uninstall these components

Install mongo db

Download binary zip from Mongo DB. Version: mongodb-win32-x86_64-2008plus-2.6.11. Follow install instructions from Mongo DB.

  1. Extract zip file to folder: C:\dev\tools\mongodb-2.6.11
  2. Create db data folder data\db

  3. Start mongo db from bin directory. Start mongo db and give path of database directory as parameter:

    Command: mongod.exe –dbpath “C:\dev\tools\mongodb-2.6.11\data\db”

Note: without the db data directory, mongo db won`t start.