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.
- On the command line, create a directory for your project and navigate (cd) to that directory
- Type the following command to initialize your project (accept all the default values):
npm init
- Type the following command to install forcejs:
npm install forcejs --save-dev
- 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. - 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" }, - 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
- In your project directory, create a file named app.js and implement it as follows:
import * as force from 'forcejs'; force.login() .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.
- In your project directory, create a file named index.html and implement it as follows:
<html> <body> <ul id="list"></ul> <script src="bundle.js"></script> </body> </html>
We create the bundle.js file in the next step.
Step 3: Build and Run
- On the command line, type the following command to build the application:
npm run compile
- Type the following command to start the development server and load your application:
force-server
- 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.
