Sample Salesforce Canvas App

1. Create an Account in Heroku -

2. Install GIT.

3. Install Heroku Toolbelt -

4. Clone the below project.

5. Create a folder with the name "SalesforceCanvasFrameworkSDK" in C drive.

6. Extract the Zip file downloaded from Step 4.

7. Copy and paste all the files src folder, pom.xml, etc in to the SalesforceCanvasFrameworkSDK folder.

8. Navigate to c:\SalesforceCanvasFrameworkSDK in Command Prompt, and enter below commands
a. git submodule init
b. git submodule update
c. git init

9. Now enter  the below command.
heroku create

10. It will ask "Press any key to opn up the browser to login or q to exit:" if you haven't logged in earlier.
Press any key to login. Enter the credentials for Heroku to login.

11. Now enter the below command.
git add -A

12. Now enter the below command.
git commit —m "FirstCommit"

13. Now enter the below command.
git push heroku master

Note: If you face any issues, check the below link

14. Go to

15. You will see your App. Get the App Name.

16. Replace the App name(appName) and build your app URL.
In my case, the URL is

17. Go to App Manager in Salesforce. Click New Connected App. Enter all the required information.
a. Select the Enable OAuth Settings.
b. In the Logo Image URL, enter In my case, it will be
c. In the Icon URL, enter In my case it will be
d. In the Callback URL field, enter In my case it will be
e. In the Canvas App URL field, enter In my case it will be
f. In the Access Method field, select Signed Request (Post).
g. In the Locations field, select Chatter Tab.
h. In the Selected OAuth Scopes field, select Access your basic information.
i. Canvas App Settings section, select Canvas

Callback URL:
Callback URL is the endpoint that Salesforce calls back to your application during OAuth process. It is the OAuth redirect URI. Depending on which OAuth flow you use, the URL is typically the one that a user’s browser is redirected after successful Authentication. 

18. Click Save button to save the Canvas App. Copy the Consumer Secret.

19. Go to Open the App. Click Settings. Click Reveal Config Vars. Add the below.
value - Consumer Secret from Step 18.

20. Go to "Manage Connected Apps" under Salesforce Setup. Open the Canvas App created. Click Edit Policies. Set Permitted Users to Admin approved users are pre-authorized. Click Save button. Under Profiles section select System Administrator.

21. Go to Chatter tab in Salesforce classic.

22. Click the Canvas App link on the left side to view it.

To check in Canvas App Previewer:
1. Go to  "Canvas App Previewer" in Salesforce Setup.

2. Click the Canvas app to preview.

To show in the Lightning Record page:
1. Create an Aura Component.
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
        <force:canvasApp developerName="Hello_World"/>
2.  Add the component to the lightning record page.
3. In the Connected App, under Locations, add Lightning Component.