Home > Blog > Deploying a connected App on Heroku and Using the Salesforce REST APIs

Deploying a connected App on Heroku and Using the Salesforce REST APIs

  In this module, I will explain you to how to deploy and configure a Node.js application on Heroku.The application uses OAuth to authenticate with Salesforce, and the REST APIs to access Salesforce data. Below are the Steps defined that needs to be followed in Salesforce to Deploy an app on Heroku:

Step 1: Create a Connected App

  1. In Setup, click Build > Create > Apps
  2. In the Connected App section, click New, and define the Connected App as follows:
    • Connected App Name: MyKloudracApp
    • API Name: MyKloudracApp
    • Contact Email: enter your email address
    • Enabled OAuth Settings: Checked
    • Callback URL: http:// MyKloudracApp.herokuapp/oauthcallback.html (You can change this later)
    • Selected OAuth Scopes: Full Access (full)

Step 2: Create a Heroku Account

If you don’t already have a Heroku account, follow the steps below to create a free account:
  1. Open a browser and access the following URL: https://signup.heroku.com
  2. Fill in the signup form and click Create Free Account
  3. Check your email. You will receive an activation email for your free account.
  4. Click the link in the activation email. Enter your new password information, and click Set password and log in.

Step 3: Familiarize Yourself with the Application

  1. Access https://github.com/ccoenraets/salesforce-conference-demo
  2. Click the clientlink and then the html link to examine the code in client/index.html:
    • It doesn’t have any HTML markup inside the body tag. The HTML is built dynamically in JavaScript in the app.js file.
    • It uses ratchet.css. Ratchet is a simple CSS toolkit that provides styles for mobile applications.
    • It uses ForceJS to integrate with Salesforce.
    • It makes an Ajax call to the server to get the Connected App Id.
    • You can edit the page according to the user requirement:
  1. Examine the code in client/js/app.js:
    • It uses the basic logic to manage a single page application and generate HTML pages on the fly.
    • The getSessionList() function is responsible for retrieving the list of sessions from your Salesforce instance.
    • The getSessionDetails() function is responsible for retrieving the details of a specific session from your Salesforce instance.
    • The showSessionList() function is responsible for generating the HTML for the session list page
    • The showSessionDetails() function is responsible for generating the HTML for the session details page
    • The router object is responsible for detecting hashtag changes in the URL and loading the corresponding page
  1. Examine the code in client/oauthcallback.html:
At the end of the OAuth workflow, the Salesforce authentication process loads the redirect URI you specified in your Connected App and passes the access token and other OAuth values (server instance, refresh token, etc.) in the query string. oauthcallback.html simply passes that information to the ForceJS library which uses it to make REST API calls to your Salesforce instance.
  1. Examine the code in js. server.js implements a small HTTP server that provides two features:
    • Web server for static content. The document root for the web server is the client directory.
    • Proxy for Salesforce REST requests. Because of the browser’s cross-origin restrictions, your JavaScript application hosted on your own server (or localhost) will not be able to make API calls directly to the *.salesforce.com domain. The solution is to proxy your API calls through your own server.
6. Click on to Deploy button. Once Deployed, you will be landed on the below screen: Fill the below details for App_ID from connected app API Section: Now in Salesforce, go back to Connected App (Build > Create > Apps), click Edit next to your Connected App, and adjust the OAuth Callback URL based on your Heroku app name. For example, if you specified awesome-conference as the name of your Heroku application, specify https:// MyKloudracApp.herokuapp.com/oauthcallback.html as the OAuth URL. After that click on Depeloy app button Get this screen:

Step 4: Test the Application

  1. Open a browser and access your application’s URL on Heroku. For example:
https:// MyKloudracApp.herokuapp.com
    • Make sure you use https
    • Replace MyKloudracApp with your own app name
    • Your browser may block the OAuth authentication popup dialog. If that happens, make sure you enable the popup dialog.
    • If you get an error message (error=redirecturimismatch&errordescription=redirecturi%20must%20match%20configuration) in the popup dialog, wait for a few minutes and try again: the changes you made to the OAuth callback URL in the previous step take a few minutes to become available.
  1. Login with your Developer Edition credentials
  2. You should now see the list of sessions
  3. Click a session to see the details
App view page:
Enquire Now

lets get over a cup of coffee and discuss!

Page Name: