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
- In Setup, click Build > Create > Apps
- 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:
- Open a browser and access the following URL: https://signup.heroku.com
- Fill in the signup form and click Create Free Account
- Check your email. You will receive an activation email for your free account.
- 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
- Access https://github.com/ccoenraets/salesforce-conference-demo
- Click the clientlink and then the html link to examine the code in client/index.html:
- 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:
- 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
- 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.
- 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.
6. Click on to Deploy
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
), 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
as the OAuth URL.
After that click on Depeloy app button
Get this screen:
Step 4: Test the Application
- Open a browser and access your application’s URL on Heroku. For example:
- 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.
- Login with your Developer Edition credentials
- You should now see the list of sessions
- Click a session to see the details
App view page: