Integrating ECMAScript 6 Web Applications with Salesforce Using OAuth and REST

ForceJS is a client-side micro-library that makes it easy to integrate web or hybrid applications with Salesforce using OAuth and the Salesforce REST APIs.

I recently updated ForceJS to leverage ECMAScript 6. ForceJS is now available as an ECMAScript 6 module and can be installed from npm.

In this article, I’ll walk you through the simple steps to setup a ForceJS/ECMAScript 6 project, and build a simple web application that integrates with Salesforce.

Step 1: Set Up the Project

We’ll leverage npm, the node package manager, to install the libraries we need. Make sure Node.js is installed on your system.

  1. On the command line, create a directory for your project and navigate (cd) to that directory
  2. Type the following command to initialize your project (accept all the default values):
    npm init
  3. Type the following command to install forcejs:
    npm install forcejs --save-dev
  4. Type the following command to install an ECMAScript 6 toolchain:
    npm install babel browserify babelify --save-dev

    Current browsers don’t support all the ES6 features yet, so we have to use Babel to compile our ES6 code down to ES5. We’ll use ES6 modules in the sample app. So we also have to compile them down to ES5. Since ES5 doesn’t support modules natively, we need to use a third party module loader. We use Browserify here but you could also use webpack.
  5. Open package.json using your favorite code editor. In the scripts section, add a script named compile to compile the ES6 application we write in the next step (app.js) down to ES5 using Babel and Browserify:
    "scripts": {
        "compile": "browserify app.js -t babelify -o bundle.js",
        "test": "echo \"Error: no test specified\" && exit 1"
  6. On the command line, type the following command to install the force-server development server:
    npm install force-server -g

    or (Mac):

    sudo npm install force-server -g

    Make sure you upgrade to the latest version (0.8) if you have an existing version of force-server installed on your system

Step 2: Create the Web Application

  1. In your project directory, create a file named app.js and implement it as follows:
    import * as force from 'forcejs';
        .then(() => force.query('SELECT Id, Name FROM Contact LIMIT 10'))
        .then(result => {
            let html = '';
            result.records.forEach(item => html += `<li>${item.Name}</li>`);
            document.getElementById('list').innerHTML = html;

    Code highlights:

    • We use the ES6 import syntax to load the forcejs module
    • force.login() is all you need to authenticate with OAuth
    • force.login() is an asynchronous function that returns an ES6 promise. We use then() to specify what we want to do after a successful login. In this case we use force.query() to run a simple SOQL query.
    • force.query() is also an asynchronous function returning an ES6 promise. We use then() again to specify what to do next. In this case, we build an HTML list.
  2. In your project directory, create a file named index.html and implement it as follows:
    <ul id="list"></ul>
    <script src="bundle.js"></script>

    We create the bundle.js file in the next step.

Step 3: Build and Run

  1. On the command line, type the following command to build the application:
    npm run compile
  2. Type the following command to start the development server and load your application:
  3. Authenticate in the OAuth login window. You should now see a list of contacts.
    You can sign up for a free developer environment here if you don’t already have one.

Work in Progress

This is work in progress. Comments and feedback are greatly appreciated.

13 Responses to Integrating ECMAScript 6 Web Applications with Salesforce Using OAuth and REST

  1. sohbet November 23, 2015 at 11:24 am #

    good blog thanks admin

  2. sohbet December 8, 2015 at 2:51 pm #

    very nice to blog admin

  3. Güzel Sanatlara Hazırlık January 9, 2016 at 6:47 am #

    Sanat alanında somut, soyut alanlarda kişisel gelişiminizi güzel sanatlara hazırlık alanında tamamlayarak resim alanında yeteneğinizi gösterebilirsiniz.
    Yağlı boyu, kuru boya, duvar çizimleri gibi bir çok alanda eserler ile gelişiminize tardımcı olmaktayız.

  4. Richard Boardman January 17, 2016 at 7:36 pm #

    Hi Christophe – thanks for this.

    Here’s a couple of fixes for the latest babelify (>7):

    npm install –save-dev babel-preset-es2015

    then in package.json:

    “scripts”: {
    “compile”: “browserify app.js -t [ babelify –presets [ es2015 ] ] -o bundle.js”,

  5. Bakırköy Resim Kursu January 31, 2016 at 7:56 am #

    Ubeyt Çağatay Rüya Avcısı Sanat Eğitim Merkezi Avcılar, Bahçeşehir, Bakırköy, Beylidüzü, Küçükçekmece, Büyükçekmece, Esenyurt, Güzel Sanatlara Hazırlık Bakırköy Resim Kursu haftanın yedi günü sizlere en kaliteli hizmeti sunmak adına 2 şubesi ile eğitimlerine devam etmektedir.Atöltelerimizi inceleyerek kalitemizi sizde değerlendirebilirsiniz.

  6. Taksim Tercüme January 31, 2016 at 8:57 am #

    Globalleşen dünyamızda teknolojinin ve internetin getirdiği yenilikler sonucunda, tercüme önemli bir hizmet sektörü haline gelmiştir. Tercüme hizmeti, artık insanların kolayca ulaşabileceği bir hizmet olmanın yanısıra, günümüzde hayatın her alanında ihtiyaç duyulan bir hizmettir. Taksim Tercüme , vita tercüme adı altında tüm dillere çevirileri gerçekleştirmektedir.

  7. kaushik ray July 10, 2016 at 2:48 pm #


    Nice article.but after putting in hours I am not sure why I am getting following error –
    while doing gulp build – TypeScript error: app/app.ts(3,24): Error TS2307: Cannot find module ‘./force’.

    Basically not able to import forcejs in my app.ts file

    1. import * as force from ‘forcejs’;
    2. import * as force from ‘./force’; – by adding the forcejs file to app folder

    Can someone help me with same.? Thanks

  8. CIIT Noida April 21, 2018 at 2:33 am #

    Appreciate you sharing this blog.Really looking forward to read more. Much obliged.

    Hadoop Training Institute in Noida

  9. CIIT Noida April 25, 2018 at 2:44 am #

    You have share the great info. I like your post. Thanks for sharing the good points.
    Best B.Tech College in Noida

  10. gtacheat code March 13, 2020 at 1:23 pm #

    Very interesting post. This is my first-time visit here. I found so many interesting stuff in your blog especially its discussion. Thanks. Visit this link – and get latest gta 5 cheats ps4 and for main website click here –

  11. yuvaraj singh December 22, 2020 at 6:40 am #

    Thanks for sharing this informative content ,
    Leanpitch provides online training in Devops coaching during this lockdown period everyone can use it wisely.
    Devops Online Training

Leave a Reply