Getting Started with Oracle JET Hybrid Mobile Application Development

The Oracle JavaScript Extension Toolkit (JET) framework includes support for hybrid mobile application development using Cordova. The framework provides iOS, Android, and Windows Alta themes and UI behavior on Oracle JET components, starter applications, design patterns, and tooling support.

Before you can create your first hybrid mobile application, you should become familiar with the Oracle JET mobile features and third-party technologies. You must also install the prerequisite packages and Oracle JET mobile tools.

Tip:

If you’re strictly interested in developing web applications that run in desktop and mobile browsers, you don’t need to install the mobile tooling framework. For information on developing web applications, see Getting Started with Oracle JET Web Application Development

Install the Mobile Tooling

To create Oracle JET hybrid mobile applications, you must first install Cordova on your development machine. To develop hybrid mobile applications for Android, iOS, or Windows, you must also install the Android, iOS, or Windows development tools.

To install the mobile tooling:

If needed, install the tooling prerequisites as described in Install the Prerequisite Packages.

  1. Install Cordova
  2. (Optional) Install Android Tools
  3. (Optional) Install iOS Tools
  4. (Optional) Install Windows Tools

Install Cordova

Install Cordova on your development machine.

As Administrator on Windows or using sudo on Macintosh and Linux systems, enter the following command to install Apache Cordova:

[sudo] npm install -g cordova

Install Android Tools

To develop applications for the Android platform, you must install the Android Software Development Kit (SDK) and create Android Virtual Devices (AVDs) representative of your application’s target devices that you can run in the Android emulator. You must also enable remote debugging if you want to test your application on an attached Android device.

  1. Using Cordova’s Android Platform Guide, install the Android tools on your development machine.

    As part of the installation process, you will see an option to install Android Studio which includes an IDE in addition to the SDK tools. You do not need to download the Studio version to work with the Oracle JET mobile tooling. However, Android Studio adds an integrated IDE that you can use for any Android development project and to create your own Cordova plugins.

  2. If not done already, enable remote debugging on attached Android devices following the instructions at: https://developer.chrome.com/devtools/docs/remote-debugging.

Install iOS Tools

To develop applications for the iOS platform, you must install the iOS development environment and iOS Simulator which is only available for Intel-based Macs.

Using Cordova’s iOS Platform Guide, install Xcode and the iOS Simulator on your development machine.

This step is sufficient for developing iOS applications and testing on iOS simulators. If, however, you want to use an actual iOS device for testing or deploy your application to the Apple App Store, you must create a provisioning profile and join the Apple iOS Developer Program. For additional information, see the platform guide. For details about using the Oracle JET tooling to package and deploy your hybrid mobile application, see Packaging and Publishing Hybrid Mobile Applications

Note:

  • You no longer need to install ios-sim separately in Cordova iOS 4.0.0 or greater.

  • Ensure that your version of ios-deploy is 1.8.6 or greater.

  • Use the following command to install ios-deploy: sudo npm install -g ios-deploy --unsafe-perm=true --allow-root

Install Windows Tools

To develop applications for the Windows 10 platform, you must install the Windows development environment. Oracle JET tooling requires Microsoft Visual Studio 2015 or higher installed on a supported platform.

Using Cordova’s Windows Platform Guide, install Visual Studio.

Note:

This step is sufficient for developing Windows 10 applications and testing on Windows simulators. If, however, you want to deploy your application to the Windows Store, you must supply a signing certificate. For additional information, see the platform guide. For details about using the Oracle JET tooling to package and deploy your hybrid mobile application, see Packaging and Publishing Hybrid Mobile Applications.

Create a Hybrid Mobile Application

Use the Oracle JET mobile tooling commands to create, build, run, and customize hybrid mobile applications for Android, iOS, and Windows mobile devices. You can create an application that contains a blank template or one pre-configured with layouts and styling for the desired platform.

Before you use the mobile tooling, verify that you have installed all the prerequisite packages and configured your target platforms if needed. For additional information, see Install the Mobile Tooling.
  1. Scaffold a Hybrid Mobile Application with Yeoman
  2. (Optional) Build a Hybrid Mobile Application with Grunt
  3. Serve a Hybrid Mobile Application with Grunt

Scaffold a Hybrid Mobile Application with Yeoman

Use the Yeoman generator to scaffold a hybrid mobile application for iOS, Android, and Windows mobile devices. You can scaffold the application to contain a blank template or one pre-configured with layout styles, a navigation bar, or a navigation drawer. After scaffolding, you can modify the configuration as needed.

The following image shows the differences between the templates as shown on an Android Nexus 4 emulator using the Android Alta theme. The blank template contains index.html but no display and is not shown. The basic:hybrid template adds styling but no sample content, and you can configure it however you like. The navbar:hybrid and navdrawer:hybrid templates contain sample content and best practices for layouts and styling that you can also modify as needed. You can configure the same application to run on an iOS or Windows device, and the application will use the Alta iOS or Windows theme.

The image is described in the surrounding text.

Note:

Do not confuse the basic template which contains no content with the QuickStart Basic sample application in the Starter sample collection. The QuickStart Basic sample application uses a navdrawer layout and contains sample content.
  1. At a command prompt, enter yo oraclejet:hybrid with optional arguments to create the Oracle JET application and scaffolding.
    yo oraclejet:hybrid [directory]
                        [--appid=application-id] [--appname=application-name]
                        [--template={template-name:[web|hybrid]|template-url|template-file}]
                        [--platforms=android,ios,windows|--platform=android|ios|windows]
                        [--help]
    

    The following table describes the available options and provides examples for their use.

    Tip:

    You can also enter yo ––help at a terminal prompt to get additional help with Yeoman and a list of available generators and sub-generators.
    Option Description

    directory

    Application location. If not specified, the application is created in the current directory.

    appid

    Application ID entered in reverse domain style: com.mydomain.myappname. The appid is equivalent to Package Name on Android and Bundle ID on iOS.

    If not specified, the appid defaults to org.oraclejet.directory, using the directory you specified in the scaffolding command.

    For example, if you specified app for the directory, the default appid will be org.oraclejet.app.

    appname

    Application name displayed on device. To include spaces in the title, use quotes: --appname=”My Sample Application”.

    template

    Template to use for the application. Specify either of the following:

    • template-name

      Predefined template. You can specify basic, blank, navbar , or navdrawer. If you don’t specify a template, your application will be configured with the blank template.

    • template-URL

      URL to zip file containing the name of the zipped application: http://path-to-app/app-name.zip.

    • template-file

      Path to zip file on your local file system containing the name of a zipped application: "path-to-app/app-name.zip". For example:
      --template="C:\Users\SomeUser\app.zip"
      --template="/home/users/SomeUser/app.zip"
      --template="~/projects/app.zip"
      

    platforms

    Comma-separated list of platform names. You can specify one or more of the following: ios, android,windows.

    If you don’t specify a platform, the command will prompt you for your choice of platform after verifying that the necessary prerequisites are available.

    platform

    Platform name. You can specify one of the following: ios, android, orwindows.

    If you don’t specify a platform, the command will prompt you for your choice of platform after verifying that the necessary prerequisites are available. If the android, ios, or windows platforms are not available, the application will be configured for the browser platform.

    help

    Displays a man page for the oraclejet:hybrid Yeoman generator, including usage and options: yo oraclejet:hybrid ––help.

    WARNING:

    Do not use internal in the appid. This is a Cordova reserved word, and the scaffolding will fail with the following error: App id contains a reserved word, or is not a valid identifier. To work around this limitation:
    1. Scaffold your application with a temporary appid: appid=com.mycompany.temp.

    2. Change to the application’s hybrid directory and edit config.xml to replace the temporary appid with the new appid: id="com.mycompany.internal".

    For example, the following command will create a hybrid mobile application named Sample NavBar in the app directory using the navbar:hybrid template and targeted for Android devices:

    yo oraclejet:hybrid app --appname="Sample NavBar" --template=navbar --platform=android
    

    The scaffolding will take some time to complete. When successful, the terminal will display: Your app is ready! Change to your new app directory app and try grunt build and serve...

    The new application will have a directory structure similar to the one shown in the following image.

    The image is described in the surrounding text.

    The application folders contain the application and configuration files that you will modify as needed for your own application.

    Directory Description

    hybrid

    Contains platform-specific files that are merged in with a copy of the application files at build time

    hybrid/config.xml

    Contains the Cordova global configuration settings. You can edit config.xml to specify core Cordova API features, plugins, and platform-specific settings.

    For example, the following settings set the log level to VERBOSE on Android applications and the application’s orientation to landscape only on all platforms.

    <?xml version='1.0' encoding='utf-8'?>
    <widget
        ... contents omitted
        <preference name="LogLevel" value="VERBOSE"/>
        <preference name="Orientation" value="landscape" />
    </widget>
    

    scripts

    Contains the oraclejet-build.js and oraclejet-serve.js files that you can modify to customize your application’s build and serve steps. See Customize a Web Application’s Grunt Build Behavior and Customize a Web Application’s Grunt Serve Behavior.

    node_modules

    Contains the Node.js modules used by the tooling framework

    src

    Site root for your application. Contains the application files that you can modify as needed for your own application.

    The content will vary, depending upon your choice of template. Each template, even the blank one, will contain an index.html file and a main.js RequireJS bootstrap file.

    Other templates may contain view templates and viewModel scripts pre-populated with content. For example, if you specified the navbar template during creation, the js/views and js/viewModels folders will contain the templates and scripts for a hybrid mobile application that uses a nav bar for navigation.

  2. To add Cordova plugins to your application, change to the application’s hybrid directory and add the plugin: cordova plugin add plugin-name.

    For additional information about adding Cordova plugins to your application, see Cordova Plugins. For help creating your own plugins, see the Plugin Development Guide.

    If you add a Cordova plugin that doesn’t have browser platform support, you can add objects that represent mock data to cordovaMock.js in src/js.

  3. In your development environment, update the code for your application as needed.

    For example, you can modify the content to contain samples from the Oracle JET Cookbook. For details about modifying content in pre-configured templates, see Working with the Oracle JET Web Nav Drawer Starter Template.

    Tip:

    If you selected the blank template during scaffolding, you can still follow the same process to add cookbook samples or other content to your application. However, it will be up to you to create the appropriate view templates or viewModel scripts.

Optionally, after scaffolding, you can modify your application’s file structure as described in Modify the Hybrid Mobile Application’s File Structure.

Modify the Hybrid Mobile Application’s File Structure

You can modify your scaffolded application’s file structure if the default structure doesn’t meet your needs.

The oraclejetconfig.json file in your application’s top level directory contains the default source and staging file paths that you can modify.

{
  "paths": {
    "source": {
      "common": "src",
      "web": "src-web",
      "hybrid": "src-hybrid",
      "javascript": "js",
      "styles": "css",
      "themes": "themes"
    },
    "staging": {
      "web": "web",
      "hybrid": "hybrid",
      "themes": "themes"
    }
  },
"serveToBrowser": "chrome",
"generatorVersion": "x.x.x"
}

To change the hybrid mobile application’s file structure:

If needed, scaffold your hybrid mobile application as described in Scaffold a Hybrid Mobile Application with Yeoman.

  1. In your application’s top level directory, open oraclejetconfig.json for editing.
  2. In oraclejetconfig.json, change the paths as needed and save the file.

    For example, if you want to change the default styles path from css to app-css, edit the following line in oraclejetconfig.json:

    "styles": "app-css"
    
  3. Rename the directories as needed for your application, making sure to change only the paths listed in oraclejetconfig.json. For example, if you changed styles to app-css in oraclejetconfig.json, change the application’s css directory to app-css.
  4. Update your application files as needed to reference the changed path

    For example, if you modify the path to the CSS for your application, update the links appropriately in your application’s index.html.

    <link rel="icon" href="app-css/images/favicon.ico" type="image/x-icon" />
    
        <!-- This is the main css file for the default Alta theme -->
        <!-- injector:theme -->
        <link rel="stylesheet" href="app-css/libs/oj/vx.x.x/alta/oj-alta-min.css" type="text/css"/>
        <!-- endinjector -->
        
        <!-- This contains icon fonts used by the starter template -->
        <link rel="stylesheet" href="app-css/demo-alta-site-min.css" type="text/css"/>
    
        <!-- This is where you would add any app specific styling -->
        <link rel="stylesheet" href="app-css/override.css" type="text/css"/>
    
To use the new paths, in your application’s top level directory, build your application as described in Build a Hybrid Mobile Application with Grunt.

Build a Hybrid Mobile Application with Grunt

Use Grunt with the build and platform options to build a development version of your Android, iOS, or Windows hybrid mobile application that you can use for testing and debugging.

Change to the application’s root directory and use the grunt build command for each platform that your hybrid mobile application will support.

grunt build --platform={android|ios|windows}
           [--platform-options="string"
            --build-config=path/buildConfig.json --destination=device|emulator
            --theme=themename[:android|ios|web|windows] --themes=theme1,theme2,... --no-sass]

The following table describes the commonly-used options and provides examples for their use.

Tip:

You can also enter grunt help at a terminal prompt to get command line help specific to the Oracle JET tooling and grunt ––help to get additional help with grunt options.
Option Description

platform

Desired platform. Enter android, ios, or windows.

platform-options

Platform-specific options that will pass verbatim to the Cordova CLI.

Option is typically required for Windows device deployments or if a Cordova plugin contains multiple static libraries for different CPUs. If the value passed contains a quoted string, the quotation marks must be escaped.

For example, you can use platform-options to specify Windows architectures. By default, the architecture defaults to anycpu.

To specify a single architecture, use the --arch option and specify arm, x86, x64, or anycpu.
--platform-options="--arch arm|x86|x64|anycpu"
To specify multiple architectures, use the --archs option with a space-separated list passed in as a quoted string. Note that you must escape the quotation marks as shown below.
--platform-options="--archs=\"arm x86 x64\""

build-config

Path to buildConfig.json. The buildConfig.json file contains details that Cordova can use to sign the application.

You do not need this file for Android or Windows development because the signing details are added automatically during the build. However, you must configure one for testing on an iOS device and when you’re ready to release your application. For additional information, see Packaging and Publishing Hybrid Mobile Applications

destination

Required for iOS applications. Specify one of the following:

  • emulator: builds your application in the iOS Simulator

  • device: Sends the application to an attached device. Be aware, though, if you want to send your application to an iOS device, you must take additional steps as described in Packaging and Publishing Hybrid Mobile Applications. Typically, you can develop and test your iOS application in the simulator or web browser until you’re ready to build your release.

device

Equivalent to destination=device.

emulator

Equivalent to destination=emulator.

theme

Theme to use for the application. The theme defaults to alta:platform, but you can specify an alternate theme. You can also enter a different themename with optional platform for a custom theme as described in Customizing Themes Using the Tooling Framework.

themes

Themes to use for the application, separated by commas.

If you don’t specify the --theme flag as described above, Oracle JET will use the first element that you specify in --themes as the default theme. Otherwise grunt will build the application with the theme specified in --theme.

no-sass

Suppresses Sass compilation. Use this option if you’re Customizing Themes Using the Tooling Framework and don’t want to compile or watch Sass during this build.

WARNING:

If you use a proxy server and specify the Android platform, the build command will fail the first time you issue it. To resolve, create a gradle.properties file in your HOME/.gradle directory and rerun the build command. The file should contain the following:
systemProp.http.proxyHost=proxy-server-URL
systemProp.http.proxyPort=80
systemProp.https.proxyHost=proxy-server-URL
systemProp.https.proxyPort=80

For example, the following command will build the sample Android application shown in Scaffold a Hybrid Mobile Application with Yeoman

grunt build --platform=android

The command will take some time to complete. If it’s successful, you’ll see the following message: Done, without errors.

The command will also output the name and location of the built application in hybrid/platforms/android , hybrid/platforms/ios, or hybrid/platforms/windows.

Note:

You can also use the grunt build command with the :release option to build a release-ready version of your application. For information, see Packaging and Publishing Hybrid Mobile Applications.

Customize a Hybrid Mobile Application’s Grunt Build Behavior

Edit oraclejet-build.js to modify default build behavior. For example, you can add additional libraries to your application or change the default markers used to inject links into the application’s index.html during build time.

The Oracle JET tooling framework defines default build and serve behavior in node_modules/oraclejet-tooling/lib/defaultconfig.js. The first part of the file contains the default build configuration, including entries for application paths and other options used during the build process. To modify defaults or add your own, edit oraclejet-build.js and remove comments from the options that you want to configure. The file contains detailed instructions for each configurable option.

Oracle JET will merge the options with the default configuration during the build. However, be aware that fileList options will completely replace the corresponding option in the default configuration and will not be merged.

To customize Grunt build behavior:

  1. Open scripts/grunt/config/oraclejet-build.js for editing in your favorite text editor.
  2. Identify the entry that you want to change and remove the comments (//) preceding each line.

    For example, to add a custom library to the build’s staging directory, remove the comments from the following sections in oraclejet-build.js as shown below:

    /**
     * # copyCustomLibsToStaging
     * This task copies any custom libraries that are not provided by JET to staging directory.
     * This task supports a single option: fileList. The fileList option defines an array of file objects. 
     * Each file object contains the following properties: 
     *   cwd, current working directory
     *   dest, destination path
     *   src, array of source file patterns
     *   rename, function to return the full path of desired destination
     * If a fileList value is specified, it completely replaces the default fileList value defined by JET
     * Example: {cwd: 'app', src: ['**', '!test.js'], dest: 'staging',  rename: function (dest, file) {return renamed path}}
     */
         copyCustomLibsToStaging: {
           fileList: []
         },
    
    
  3. Edit the options as desired and save the file.

    For example, to add a custom library named my_custom_module, place the module in node_modules, and edit the copyCustomLibsToStaging entry:

    copyCustomLibsToStaging: {
        fileList: [
                  {cwd:'node_modules/my_custom_module/',
                   src: ['*'],
                   dest: 'web/js/libs/my_custom_module'   }
                  ]
    },
    
  4. Repeat the previous step for each option that you want to modify.

    For example, to change the default injection marker defined in injectTheme, remove the comments from the injectTheme option and add the appropriate marker:

    /**
     * # injectTheme
     * This task injects css stylesheet links for the current theme into index.html using the injection start and end markers defined below.
     */
        injectTheme: {
        startTag: '<!-- injector:mycustomtheme -->',
      }
    
Test your changes by running Build a Hybrid Mobile Application with Grunt with appropriate options.

Serve a Hybrid Mobile Application with Grunt

Use Grunt serve to launch your hybrid mobile application in a browser, simulator, or mobile device for testing and debugging. When you serve your application to a browser or emulator, a live reload option is enabled, and changes you make to the code are immediately reflected in the running application.

To serve your hybrid mobile application:

  1. At a command prompt, change to the application’s top level directory and use the grunt serve command with options to launch the application.
    grunt serve --platform=ios|android|windows
               [--platform-options="string"
                --build-config=path/buildConfig.json
                --server-port=server-port-number --livereload-port=live-reload-port-number
                --destination=emulator[:emulator-name]|browser[:browser-name]|device[:device-name]|server-only
                --no-livereload --no-build
                --theme=themename[:android|ios|windows|web]] --themes=theme1,theme2,... --no-sass]
    

    The following table describes the commonly-used options and provides examples for their use.

    Tip:

    You can also enter grunt help at a terminal prompt to get command line help specific to the Oracle JET tooling and grunt ––help to get additional help with grunt options.
    Option Description

    platform

    Desired platform. Enter android, ios, or windows.

    platform-options

    Platform-specific options that will pass verbatim to the Cordova CLI.

    Option is typically required for Windows device deployments or if a Cordova plugin contains multiple static libraries for different CPUs. If the value passed contains a quoted string, the quotation marks must be escaped.

    For example, you can use platform-options to specify Windows architectures. By default, the architecture defaults to anycpu.

    To specify a single architecture, use the --arch option and specify arm, x86, x64, or anycpu.
    --platform-options="--arch arm|x86|x64|anycpu"
    
    To specify multiple architectures, use the --archs option with a space-separated list passed in as a quoted string. Note that you must escape the quotation marks as shown below.
    --platform-options="--archs=\"arm x86 x64\""
    

    build-config

    Specify the path to buildConfig.json. The buildConfig.json file contains details that Cordova can use to sign the application.

    You do not need this file for Android or Windows development because the signing details are added automatically during the build. However, you must configure one for testing on an iOS device and when you’re ready to release your application. For additional information, see Packaging and Publishing Hybrid Mobile Applications

    server-port

    Server port number. If not specified, defaults to 8000.

    livereload-port

    Live reload port number. If not specified, defaults to 35729.

    destination

    Specify one of the following:

    • emulator: Displays your application in the default Android AVD, iOS Simulator, or Windows Emulator.

      To use a different emulator, append its name to the emulator option: --destination=emulator:emulator-name.

    • browser: Displays your application in the Chrome browser on your local machine.

      If you don’t have Chrome installed or want to specify a browser, append the name of the desired browser to the browser option:

      --destination=browser:firefox|edge|ie|opera|safari|chrome
      

      Tip:

      To change your application’s default browser from Chrome, open oraclejetconfig.json in the application’s top level directory and change the name of the browser in defaultBrowser. For example, to change the default browser to Firefox, edit oraclejetconfig.json as shown below.
      "defaultBrowser": "firefox",
      
    • device: Sends the application to an attached device.

      Optionally, append the name of the device to device option: --destination=device:myDevice.

      Note:

      If you want to send your application to an iOS device, you must take additional steps as described in Packaging and Publishing Hybrid Mobile Applications. Typically, you develop and test your iOS application in the simulator or web browser until you’re ready to build your release.
    • server-only: Launches the application but does not display it. Use this option if you want users to point to the application manually in their browsers.

    browser[=browser-name]

    Equivalent to destination=browser[:browser-name].

    emulator[=emulator-name]

    Equivalent to destination=emulator[:emulator-name].

    device[=device-name]

    Equivalent to destination=device[:device-name].

    server-only

    Equivalent to destination=server-only.

    no-livereload

    Disables the live reload feature.

    Disabling live reload can be helpful if you’re working in NetBeans or other IDE and want to use that IDE’s mechanism for loading updated applications.

    no-build

    Suppresses the build. Use this option if you’ve already built the application and just want to serve it.

    theme

    Theme to use for the application. The theme defaults to alta:platform, but you can specify an alternate theme. You can also enter a different themename with optional platform for a custom theme as described in Customizing Themes Using the Tooling Framework.

    themes

    Themes to use for the application, separated by commas.

    If you don’t specify the --theme flag as described above, Oracle JET will use the first element that you specify in --themes as the default theme. Otherwise grunt will build the application with the theme specified in --theme.

    no-sass

    Suppresses Sass compilation. Use this option if you’re Customizing Themes Using the Tooling Framework and don’t want to compile or watch Sass during this build.

    The application will launch in a local browser, emulator/simulator, or device depending upon the options you specify. The following table shows examples.

    Command Description

    grunt serve --platform=windows -–browser=firefox

    Launches the application in the Firefox browser using the Alta Android theme.

    grunt serve --platform=ios

    Launches the application in the iOS Simulator using the Alta iOS theme.

    grunt serve --platform=android --destination=emulator:MyEmulator

    Launches the application in the specified emulator. The emulator name is case-sensitive.

    grunt serve --platform=android --device

    Launches the application in an attached Android mobile device.

    The terminal will also output the names of the files as they are loaded. If your application contains multiple views, the output will reflect the names of the views and associated files as you navigate through the application.

    WARNING:

    If you specify the Android platform, use a proxy server and skipped the grunt build step, the serve command will fail the first time you issue it. To resolve, create a gradle.properties file in your HOME/.gradle directory and rerun the serve command. The file should contain the following:
    systemProp.http.proxyHost=proxy-server-URL
    systemProp.http.proxyPort=80
    systemProp.https.proxyHost=proxy-server-URL
    systemProp.https.proxyPort=80
    
  2. Update the sample code as needed and save the file.

    If you left live reload enabled, the terminal window updates to reflect that the code has changed. For example, if you save a change to dashboard.html in an application scaffolded with the navbar or navdrawer template, the terminal window outputs the name of the changed file, and the browser updates with the change.

  3. To terminate the batch job when using live reload, press Ctrl+C in the command window and then enter y at the prompt to terminate the batch job.
    You may have to press Ctrl+C a few times before you get the prompt to terminate the job.

Note:

You can also use the grunt serve command with the :release option to serve a release-ready version of your application. For information, see Packaging and Publishing Hybrid Mobile Applications.

Customize a Hybrid Mobile Application’s Grunt Serve Behavior

Edit oraclejet-serve.js to modify default serve behavior. For example, you can add your own watch tasks or specify actions specific to web or hybrid applications.

The Oracle JET tooling framework defines default build and serve behavior in node_modules/oraclejet-tooling/lib/defaultconfig.js. The second half of the file contains the default serve configuration, including entries for application paths and other options used during the serve process. To modify defaults or add your own, edit oraclejet-serve.js and remove comments from the options that you want to configure. The file contains detailed instructions for each configurable option.

Oracle JET will merge the options with the default configuration during the build. However, be aware that rewriting the three default watch targets (sourceFiles, sass, and themes) can result in unpredictable behavior.

To customize Grunt serve behavior:

  1. Open scripts/grunt/config/oraclejet-serve.js for editing in your favorite text editor.
  2. Identify the entry that you want to change and remove the comments (//) preceding each line that you want to include.

    For example, to define one or more shell commands that you want to execute after grunt serves the application and you modify a source file, you can edit the sourceFiles option in the watch sub task. Remove the comments from the highlighted lines as shown below.

    // // Sub task watch default options
         watch: {
           sourceFiles:
           {
        //     files: [],
        //     options: {
        //       livereload: true
        //     },
                   commands: ['']
           },
    
        //   sass: {
        //     files: [],
        //     commands: ['compileSass']
        //   },
    
        //   themes: {
        //     files: [],
        //     options: {
        //       livereload: true
        //     },
        //     commands: ['copyThemes']
        //   },
         },
    
  3. Edit the options as desired and save the file.
    For command options, add one or more commands, each surrounded by single quotes and separated by commas. For example, the following code snippet adds node --version and npm --version to the commands option in the sourceFiles sub task:
         watch: {
           sourceFiles:
           {
        //     files: [],
        //     options: {
        //       livereload: true
        //     },
                   commands: ['node --version', 'npm --version']
           },
           ... contents omitted
         },
    
Test your changes by running Serve a Hybrid Mobile Application with Grunt with appropriate options. When you change one of the source files, the terminal output will display the output of the node --version and npm --version commands and reload the page.