Troubleshooting while developing your First JET based Hybrid Application

Rohit Dhamija-Oracle

Want to get started with Oracle JavaScript Extension Toolkit (JET) Hybrid Application Development but not sure what you need to know first? I will cover here what the tools/frameworks you need to get up and running  and resolving common issues faced while developing your first JET based hybrid app.  Oracle JavaScript Extension Toolkit (JET) provides a seamless hybrid mobile development experience that any organization can leverage to create simple, secure and visual mobile applications.; this link is the best place to get started.

This blog is divided in three parts:

• Development Machine Setup
• Creating a JET Mobile App
• Troubleshooting common issues

Part-I: Development Machine Setup

Here are the main frameworks/tools that need to be setup in the machine to get started. For more detailed documentation, please see the following link. Prerequisites for Developing Applications with Oracle JET

Framework/Tool	Usage in Oracle JET	Website
Node.js	Used as package manager for development tools	https://nodejs.org
Bower	Package manager for web site components that can contain HTML, CSS, JavaScript, fonts, and image files	http://bower.io/
Yeoman	Open source tool used to scaffold web or hybrid applications	http://yeoman.io/
Grunt	Used for Building and serving	http://gruntjs.com/
Cordova	Cross-platform development targeted to multiple platforms with one code base	http://cordova.apache.org/
Android/iOS	SDK for android and iOS	Android and iOS SDK page

Install Node.js

• Download Node.js from https://nodejs.org
• Check the version after installation

node --version

Node Proxy Setup

Node takes config settings to set the proxy server for http and https. Copy and paste these commands into a shell to execute.

npm config set proxy http://proxy.company.com:80
npm config set https-proxy http://proxy.company.com:80

After installing node.js , user  has to use node package manager (npm command) to install the below tools (in any given order)

Install Bower

npm install -g bower

Bower Proxy Configuration

Bower requires a file named .bowerrc in your home directory.

• Create a file called .bowerrc with the following JSON text.  Bower reads this file to obtain its proxy information.

{ "proxy":"http://proxy.company.com:80", "https-proxy":" http://proxy.company.com:80" } 

• Create the .bowerrc file in the %HOME% directory

,

Install Yeoman and Grunt

npm install -g yo
 npm install -g grunt-cli

Yeoman uses the environment variables HTTP_PROXY and HTTPS_PROXY for proxy settings, so nothing additional needs to be done. Verify whether the installation is completed by running the commands to check the versions:

yo --version
 grunt --version

Install Cordova

npm install -g cordova

Verify installation by running this command:

cordova --version

Install Android SDK

For installing the Android SDK refer to the following link.  Alternatively you could also download Android studio and update it’s SDK and tools to latest

Part-II: Create a JET Mobile App

Scaffold a Mobile Application

yo oraclejet:hybrid --appName=JETMobileDemo --template=navBar --platforms=android

Build

grunt build:dev --platform=android  (By default it will assume emulator)

Serve

grunt serve --platform=android (By default, it will assume emulator)

Part-III: Troubleshooting

Here are some tips to resolve the common issues encountered when deploying your first hybrid application:

Issue 1: Grunt build or Grunt serve command getting stuck or failing

If you are building or installing your application for the first time, especially behind corporate firewalls, you may face issues of build getting failed.

Possible Resolution:

This particular problem may arise in case you are behind corporate firewall and there is some proxy setting that's not correct or proxy itself not set. Please set (or check if already set) your npm and bower proxy settings as mentioned in the above section.

Issue 2: Not able to launch Hybrid mobile app in emulator

There may be a possibility that you are able to build and launch your hybrid mobile application in your Android device, but not able to launch the same application on Android emulator

For instance, you may receive the following logs on your console and they keep on waiting:

Running "serve" task
Running "customServe" task
Invoking cordova serve
Static file server running on: http://localhost:8090 (CTRL + C to shut down)Invoking cordova run
Starting watch
Running "watch" task

Waiting...

Possible Resolution:

Generally when we issue the grunt serve without starting the emulator, grunt will try to start the emulator and any commands that grunt issues might not work as emulator is still booting up.

So in order to avoid this issue:

• Please start the emulator first!
• Don't specify the destination parameter for grunt serve (it will deploy to the open/default emulator)
• Then grunt serve to install the app on your emulator
• Ensure  grunt build before the grunt serve

Issue 3: Running into CORS issue while debugging

There may be possibility that user is not able to interact with any mobile middleware , .e.g. Oracle Mobile Cloud Service (MCS), e.g like performing authentication while using emulator/web and live debugging (enabled to true by default).

Possible Resolution:

While running on an emulator, please disable the live reload feature otherwise a CORS error will happen when interacting with MCS.

Use the --disableLiveReload feature during grunt serve command

grunt serve --platform=android  --disableLiveReload=true

Issue 4: LiveReload not working on device, alternatives for troubleshooting

Unfortunately when you serve to device, livereload won't work due to a known bug.

Alternate Resolution:

The recommended process is to first develop the app contents within browser using the --web=true flag.  This will lead to faster reloading and faster serve.

grunt serve --platform=android –web=true

Next, then use livereload in emulator (though much slower in Android native emulator).

grunt serve --platform=android (By default, it will install on emulator)

Then at the very last, you can serve your app to device.

grunt serve --platform=android --destination=device --disableLiveReload=true 

The views expressed in this post are my own and do not necessarily reflect the views of Oracle.