Creating a Hybrid Remote Application

Step 1: Create a Static Resource

  1. Zip up the contents of the www folder of the Ionic app created in the previous module.

    Zip up the file in such a way that the css, img, js, lib, templates directories are at the root level inside the zip file. In other words the www directory itself should NOT appear in the zip file.

  2. In Salesforce Setup, create a new Static Resource as follows:

    • Select the zip file you just created
    • Name the static resource MyIonicApp

Step 2: Create a Visualforce Page

  1. In the Developer Console, create a Visualforce Page named MyIonicApp defined as follows:

    <apex:page docType="html-5.0" showHeader="false" sidebar="false" 
            standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false">
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, 
        <link href="{!URLFOR($Resource.MyIonicApp, 'lib/ionic/css/ionic.css')}" 
    <body ng-app="starter">
        <script src="{!URLFOR($Resource.MyIonicApp, 'lib/ionic/js/ionic.bundle.js')}">
          angular.module('config', [])
            .constant('forcengConfig', {accessToken: "{!$Api.Session_ID}", useProxy:false})
            .constant('baseURL', "{!URLFOR($Resource.MyIonicApp, '/')}");
        <script src="{!$Resource.forceng}"></script>
        <script src="{!URLFOR($Resource.MyIonicApp, 'js/app.js')}"></script>
        <script src="{!URLFOR($Resource.MyIonicApp, 'js/controllers.js')}"></script>
  2. Click the Preview button to test the page in the browser.

  3. While previewing the Visualforce page in your browser, copy the URL, NOT including the query string, in your clipboard. The URL shoild look similar to

Step 3: Create a Hybrid Remote App

  1. Create a new mobile application:

    forceios create

    Answer the prompts as follows. Adjust the company id, organization name, and start page as needed. For the start page, paste the URL you copied to your clipboard in the previous step.

    Enter your application type (native, hybrid_remote, or hybrid_local): hybrid_remote
    Enter your application name: HybridRemoteSample
    Enter the output directory for your app (defaults to the current directory):
    Enter the package name for your app (com.mycompany.my_app): com.mycompany.myapp
    Enter your organization name (Acme, Inc.): Acme
    Enter the start page for your app (only applicable for hybrid_remote apps):
    Enter your Connected App ID (defaults to the sample app's ID):
    Enter your Connected App Callback URI (defaults to the sample app's URI):

    For a production application, you should create a Connected App in Salesforce and provide your own Connected App ID and Callback URI.

  2. Navigate (cd) to the project directory:

    cd HybridRemoteSample
  3. Add some useful Cordova plugins (optional):

    cordova plugin add org.apache.cordova.console
    cordova plugin add org.apache.cordova.statusbar
  4. Build the project:

    cordova build
  5. Run the project. For example, for iOS, open the project (platforms/ios/contact-force.xcodeproj) in Xcode and run it in the emulator or on your iOS device.

    If the build fails in Xcode, select the MyIonicApp target, click the Build Settings tab, search for bitcode, select No for Enable Bitcode, and try again.