Salesforce provides a REST API that makes it easy to access and manipulate Salesforce data from any application.
To start using Salesforce OAuth and the REST APIs, you need to add a few components to your development environment:
- A Proxy Server to avoid cross-domain policy issues when invoking Salesforce REST services. (The Chatter API supports CORS, but other APIs don’t yet)
- A Local Web Server to (1) serve the OAuth callback URL defined in your Connected App, and (2) serve the whole app during development and avoid cross-domain policy issues when loading files (for example, templates) from the local file system.
There are of course existing proxy servers and local web servers, but what’s often lacking is a simple and integrated developer experience.
ForceServer
To experiment with a streamlined developer experience, I put together ForceServer, a simple development server that combines a Proxy Server built for the Salesforce REST APIs, and a Local Web Server to serve your app during development.
To install ForceServer, make sure Node.js is installed on your system, open a command prompt and type:
npm install -g force-server
or (Mac):
sudo npm install -g force-server
Build your First Salesforce REST App in 2 Minutes
Now that the server is installed on your system, let’s put the developer experience to the test by creating an application that displays the proverbial list of Salesforce contacts:
- Create a file named index.html anywhere on you file system:
<html> <body> <ul id="list"></ul> <script src="http://ccoenraets.github.io/forcejs/force.js"></script> <script> force.login(function() { force.query('select id, Name from contact LIMIT 50', function (response) { var str = ''; for (var i = 0; i < response.records.length; i++) { str += '<li>' + response.records[i].Name + '</li>'; } document.getElementById('list').innerHTML = str; }); }); </script> </body> </html>In a real-lfe app, you should host the force.js file on your own server or development machine. - Start ForceServer in the directory where you created index.html:
force-server
This command will start the server on port 8200, and automatically load your app (http://localhost:8200) in a browser window. You’ll see the Salesforce login window (make sure you enable the popup window), and the list of contacts will appear after you log in. If you don’t have a free Salesforce Developer Edition to log in to, you can create one here.
You can change the port number and the web root. Typeforce-server --helpfor more info.
Code Highlights:
- The sample application above uses the ForceJS library. ForceJS and ForceServer are built to work closely together and provide an integrated developer experience.
- ForceJS uses a default connected app: No need to create a connected app to start development. You should however create your own connected app for production use.
- ForceServer automatically serves the OAuth callback URL: No need to create a callback HTML page during development.
Transparently Running Hybrid Apps on Device and in the Browser
If you develop a hybrid application using the Mobile SDK, you often switch back and forth between running the app in the browser and on device: Developing in the browser is generally faster and easier to debug, but you still need to test device-specific features and check that everything runs as expected on the target platforms. The problem is that the configuration of OAuth and REST is different when running in the browser and on-device. Here is a summary of the key differences:
| Browser | Device | |
| Proxy | Yes | No |
| OAuth | Popup | Plugin |
ForceJS abstracts these differences and allows you to run your app in the browser and on device without code or configuration change.
Closing Comments
This is mostly an experiment at this point, and I’m planning to test it in workshops and hackathons to simplify the initial developer experience. I’m interested in hearing from you: what’s your setup when building applications using Salesforce OAuth and the REST APIs?
