Canvas Developer Guide

Getting Started
Introducing Canvas
Quick Start
Quick Start—Advanced
Prerequisites
Clone the Project from GitHub
Run the Web App Locally
Create the Canvas App
Configure Who Can Access the Canvas App
Deploy the Web App to Heroku
Deploy the Canvas External Client App to an Org
Update the Canvas App
Package the Canvas App
Configure Who Can Access the Installed Canvas App
Using Canvas
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Deploy the Web App to Heroku

After you run the web app locally and test it as a canvas app, deploy the web app to Heroku and run it from there.

Using dynos to complete this tutorial counts toward your usage. Scale your dynos to 0 as soon as you’re done to minimize costs.

Warning

Where possible, we changed noninclusive terms to align with our company value of Equality. We maintained certain terms to avoid any effect on customer implementations.

Important

  1. If you haven’t already, log into Heroku and install Heroku Toolbelt following the links in the Prerequisites.
  2. Open a command window, navigate to c:\SalesforceCanvasFrameworkSDK, and enter this command: git init. This re-initializes the directory as a Git repository.
  3. In the command window, enter this command: heroku create. This creates a new “shell” app on Heroku.
    Confirmation that the app was created looks like this:
    1Creating deep-samurai-7923... done, stack is cedar
2http://deep-samurai-7923.herokuapp.com/ | git@heroku.com:deep-samurai-7923.git
3Git remote heroku added
  4. To rename this Heroku app, enter this command in the command window: heroku rename newAppName -—app oldAppName.

    In this example, oldAppName is deep-samurai-7923. The newAppName you create must begin with a letter and can only contain lowercase letters, numbers, and dashes. You’ll see a confirmation of the renaming that looks similar to this:

    1http://newappName.herokuapp.com/ | git@heroku.com:newappName.git

    The newappName must be unique across all Heroku apps. This name becomes part of the URL for your app, for example, newappName.herokuapp.com.

  5. Run this command in the command window: git add -A. This adds the entire SalesforceCanvasFrameworkSDK project to the Git repository. If you’re working in the Windows environment, you might see some messages about LF (line feeds) being replaced by CRLF (carriage return line feeds).
  6. Enter this command in the command window to commit the changes along with a comment: git commit —m “MyChangeComments”.
  7. Enter this command in the command window to deploy the changes to Heroku: git push heroku master.

    If the process completes successfully, you’ll see something like this:

    1[INFO] -------------------------------------------------
2[INFO] BUILD SUCCESS
3[INFO] -------------------------------------------------
4[INFO] Total time: 13.188s
5[INFO] Finished at: Sat Feb 09 21:14:23 UTC 2013
6[INFO] Final Memory: 11M/490M
7[INFO] -------------------------------------------------

    If you receive a “permission denied” error message, you may need to set up your SSH key and add it to Heroku. See https://devcenter.heroku.com/articles/keys.

  8. Open a command window, and set the Heroku environment variable that contains the consumer secret by entering this command and replacing consumer_secret_value with the value you just copied: heroku config:add CANVAS_CONSUMER_SECRET=consumer_secret_value.
    To get the consumer secret for the canvas app, from Setup, enter Apps in the Quick Find box, then select Apps and click the Hello World app. You’ll see the Consumer Secret field in the OAuth Settings section.
  9. Verify that the app is running in Heroku by opening a browser and navigating to this URL: https://newappName.herokuapp.com/examples/hello-world/index.jsp.

    You should see a message that says, “This App must be invoked via a signed request!” This is an indication that the app is running in Heroku. This message appears because the app is designed to receive a signed request from Salesforce canvas environment.