Force.com Canvas Developer's Guide

Getting Started
Introducing Force.com 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
Update the Canvas App
Package the Canvas App
Upload the Canvas App Package
Install the Canvas App
Configure Who Can Access the Installed Canvas App
Using Force.com Canvas
Reference
PDF

Newer Version Available

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

Deploy the Web App to Heroku

In this walkthrough, you previously ran the “hello world” Web app locally before adding it as a canvas app and testing it. Now that your canvas app works locally, you’re ready to deploy your “hello world” Web app to Heroku and run it from there. Here’s how you do it.

  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 the following command: git init. This re-initializes the directory as a Git repository.
  3. In the command window, enter the following command: heroku create. This creates a new “shell” app on Heroku.
    Confirmation that the app was created looks like this:
  4. To rename this Heroku app, enter the following 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:

    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 the following 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 the following command in the command window to commit the changes along with a comment: git commit —m “MyChangeComments”.
  7. Enter the following 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:

    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, navigate to Create | 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 the following 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, therefore, the app won’t run outside of the Salesforce canvas environment.