Sample Application with Ionic 2 and Salesforce

A few weeks ago, I shared a version of the DreamHouse sample application built with the latest release candidate of Ionic 2. The app came with two interchangeable implementations of the data services: Mock and REST. Since then I’ve been working on ForceJS 2, a JavaScript library for the Salesforce REST APIs. ForceJS 2 is now built on ECMAScript 6, uses modules and promises, and integrates seamlessly with Angular 2 and Ionic 2.

In this post, I’ll share the same DreamHouse application using a Salesforce back-end, as an example of using ForceJS 2 to access Salesforce from an Ionic 2 application. The application is built with the Salesforce Mobile SDK and the latest release candidate of Ionic 2

Watch the video:

Source Code and 5 Minute Install

The source code and installation instructions are available in this GitHub repository.

  • D Riley

    Thank you for the example. I followed the (short of ionic cordova install, already installed) instructions and got the following error. Thoughts?
    ionic serve

    …[12:26:36] ionic-app-scripts 0.0.45
    [12:26:37] watch started …
    [12:26:37] build dev started …
    [12:26:37] clean started …
    [12:26:37] clean finished in 1 ms
    [12:26:37] copy started …
    [12:26:37] transpile started …
    throw er; // Unhandled ‘error’ event

    Error: listen EADDRINUSE
    at Object.exports._errnoException (util.js:1026:11)
    at exports._exceptionWithHostPort (util.js:1049:20)
    at Server._listen2 (net.js:1257:14)
    at listen (net.js:1293:10)
    at net.js:1403:9
    at _combinedTickCallback (internal/process/next_tick.js:77:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)…

    Ionic version 2.1.13
    npm version 3.10.8
    node version v6.9.1

    • khalid

      @D R
      is there any problem using ionic 2.2.2 with salesforce. I encountered many problems.
      I can’t event display info using salesforce Mobile SDK with ionic. which versions you are using please.

  • Oktay Seo

    Çocuklar klasik bale ve dans eğitimi ve modern dansın eğlenceli ve enerjik egzersizleriyle vücut becerilerini , esneklik kazanacaklar.

    İçimizdeki dans aşkını yağmur, kar hiçbir şey dindiremez. Çünkü dans etmeyi seviyoruz ve bu işi yaparken çok mutluyuz. Bahçeşehir bale kursu eğitimi, sağlıklı, güçlü bir bünyeye sahip olabilir, bağışıklık sisteminizi güçlendirebilirsiniz. Öğrencilerin duruşu, yürüyüşünü kendini ifade edebilme tarzını geliştirebilirsiniz. Fiziksel estetik sağlar. Ücretsiz deneme eğitimi için arayabilirsiniz.

  • Pingback: Ionic V2 Stater App using Salesforce SDK – Vivek Deepak()

  • khalid

    Mr. Christophe, Can you share updates please.
    I see Ionic 2.2.2 can’t work with Salesforce Mobile SDK . Can you tell us please tools version to use.
    I see even there is no adress to contact you. we are really stuck and wewant to know if it is possible to work with ionic 2 using Salesforce SDK.
    Best Regards

  • Daniel Heller

    Very nice post. I absolutely appreciate this site.Keep it up!

    kayseride satılık daire ev ilanlarına ulaşmak artık çok kolay en geniş ve güncel portföy listemizle hizmetinizdeyiz.

  • Kanav

    Hi Christophe,

    I am trying to run this with the latest version of ionic, but I get the following error:
    “TypeError: AppScripts.serve is not a function”. Can you please help?

    • Kanav

      Hi Christophe,

      I was able to get this to work, however now I’m facing some issues with App performance:
      1) On the Property and Broker List views, the images take some time to load
      2) On the Property and Broker Detail pages, the data placeholders load first, followed by a slight delay, and then the actual Data loads.

      Would you have any recommendations on getting around this please?


    • Hristo

      try this: npm install –save-dev @ionic/app-scripts@latest

  • Vijay Chauhan


    I am trying to run this with the latest version of ionic, but I get the following error:
    “TypeError: AppScripts.serve is not a function”. Can you please help?

    • Hristo

      npm install –save-dev @ionic/app-scripts@latest

      • Vijay Chauhan


  • Ravi Haibatti

    hi sir,
    when i login through the salesforce in app i am getting error cannot get oauthcallback.html. Can you please help about this issue.


  • Rafael Delaflor Chumpitaz


  • Prashant Kumar Srivastava

    Hi Christophe, I have an issue in authentication part. After authentication, my callback is not being called. I have done it as following:

    let appId = ‘value of Consumer Key’;
    let loginURL = ‘’;
    let oauthCallbackURL = ‘http://localhost:8100/callback’;

    let oauth = OAuth.createInstance(appId, loginURL, oauthCallbackURL);
    console.log(‘=============oauth: ‘, oauth)

    oauth.login().then(oauthResult => {
    //this part is not called after authentication
    console.log(“Logged Into Salesforce Successfully”);

    In pop-up URL i can see the access token but not able to use that because it is not going to callback part. Please suggest where i am missing. I am able to login through pop-up, but pop-up is not closing after successful/unsuccessful authentication.

  • scigazer

    Hi Christophe,

    I tried to run your app but I got this error:

    Runtime Error
    webpackJsonp is not defined

    ReferenceError: webpackJsonp is not defined at http://localhost:8101/build/main.js:1:1

    Can you please advise how to resolve this? Thanks!

  • Dibakar Sahoo

    Hi, I am Dibakar, working in a marketing team. We are looking for a salesforce influencer, who is technically strong and engaged in real paid reviews on salesforce related third party products.
    In case, you are interested please send your details like site URL, review links already done, site traffic and price per review. Looking forward for an early response.
    Thanks. Dibakar