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
Usage in Oracle JET
Used as package manager for development tools
Open source tool used to scaffold web or hybrid applications
Used for Building and serving
Cross-platform development targeted to multiple platforms with one code base
SDK for android and iOS
Android and iOS SDK page
- Download Node.js from https://nodejs.org
- Check the version after installation
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)
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.
- 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:
npm install -g cordova
Verify installation by running this command:
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
grunt build:dev --platform=android (By default it will assume emulator)
grunt serve --platform=android (By default, it will assume emulator)
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.
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
Running "watch" task
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).
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.
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.