📣 Attention Salesforce Certified Trailblazers! Link your Trailhead and Webassessor accounts and maintain your credentials by December 14th. Learn more.
close
trailhead

Install the Dreamhouse App and Create a Heroku Button

Lightning bolt iconAttention, Trailblazer!

Salesforce has two different desktop user interfaces: Lightning Experience and Salesforce Classic. This project is designed for Lightning Experience.

You can learn about switching between interfaces, enabling Lightning Experience, and more in the Lightning Experience Basics module here on Trailhead.

Learning Objectives

In this project, you'll:

  • Create a new Heroku app using the DreamHouse app in a GitHub repository.
  • Set up Heroku Connect to map objects from a Salesforce org to a Heroku app.
  • Create a Heroku button to deploy a DreamHouse app.
  • Create a Heroku pipeline using the DreamHouse app to support continuous integration.
  • Use Heroku Flow to create a new feature, test it using Review Apps, and push it into a pipeline.

Let's get started!

Introduction

DreamHouse Realty is interested in creating a new UI for its desktop and mobile users. Dreamhouse wants to use its new web app along with its real-estate property data in Salesforce. However, the company is worried that the process from development to completion will be timely and costly for their customers. Let's use Heroku to see how we can help.

Create a Trailhead Playground, install the package, and import data.

First, let's create a new Trailhead Playground and install the DreamHouse package. Scroll to the bottom of this page.

  1. Click the arrow next to Launch, and select Create a Trailhead Playground. Don't skip this step! You need to use a fresh and clean Trailhead Playground for this project.
  2. Once your playground is created (it takes a minute), press Launch.
  3. Follow the instructions in Get Your Trailhead Playground Username and Password unit of the Trailhead Playground Management module. You need your username and password to provision your Heroku Connect add-on.
  4. In your playground's URL, replace everything following lightning.force.com with this: /packaging/installPackage.apexp?p0=04tB00000009UeX. Your URL should look similar to this: https://playful-raccoon-21646-dev-ed.lightning.force.com/packaging/installPackage.apexp?p0=04tB00000009UeX. Press Return.
  5. Select Install for All Users and click Install.
  6. A window will appear asking to grant access to third-party websites. Click the checkbox to select Yes.
  7. Once the installation is complete, click Done and open the App Launcher in the upper-left corner.
  8. Select the DreamHouse app.
  9. Click Data Import and then click Initialize Sample Data. Depending on your screen size, the Data Import tab may be under More in the tab menu.
  10. Click the Properties tab to view the imported properties.

Fork the DreamHouse app in GitHub.

  1. To sign in with an existing account on GitHub, go to https://github.com/login. Enter your username and password, then click Sign In.
  2. To sign up for a new account on GitHub, go to https://github.com/join. Create a username, enter an email, and enter a password. Click Create an account. Follow the on-screen instructions.
  3. Navigate to the DreamHouse App GitHub repo, https://bit.ly/2NHDtW2.
  4. In the upper-right corner, click Fork. You are redirected to your account with your forked repo, intro-to-heroku.

Forking copies the base code for the DreamHouse App and creates your own repo to get you started.

Edit the app.json file.

To create a Heroku button you need a valid app.json file in the root directory. The app.json file describes a web app. It declares environment variables, add-ons, and other information needed to run an app on Heroku. The file’s schema has no required fields; however, the name, description, and logo are recommended. Providing these to the users gives context and identity to your app.

  1. In your intro-to-heroku repo, click  app.json and click the pencil iconto edit it.
    Highlighting the location of the app.json file in GitHub.
  2. On line 7, inside the quotes, add your DreamHouse GitHub repository username, https://github.com/YOUR_USERNAME/intro-to-heroku.
  3. Scroll to the bottom of the page. In the Update app.json textbox, type Added GitHub Repo URL.
  4. Keep the default selections and click Commit changes.

Test the app.json file.

  1. To test if your app will deploy through a button, we need to test the app.json file. Copy this URL: https://heroku.com/deploy?template=https://github.com/YOUR_USERNAME/intro-to-heroku
  2. Paste the URL in a separate browser tab and replace the placeholder text (YOUR USERNAME) with your GitHub username. Press <enter>.
  3. You will see the Heroku signup screen. If you do not have an account, create a new account and follow the on-screen instructions. If you do have a Heroku Account, click the Log In button in the upper-right corner.
  4. Once logged in you will see the “Create New App” page load. If you see the "Create New App" page load, you have configured the app.json file correctly. Using the link from our deploy button lets you create and deploy your DreamHouse app using only a Heroku button.
    Screenshot of an empty Heroku Create New App Form.
  5. Close this browser tab.

Heroku buttons are links to specific Heroku deploy locations. When you click a Heroku button, the platform understands your intent to deploy code and the location of that code. The button then fires off a deployment. Each code repo contains additional information for Heroku, like specific Heroku add-ons or whether configuration metadata needs to be set.

Add a Heroku Button to your README.

Now that we know we have the correct URL, let’s add a Heroku Button to your README and commit the change.

  1. In GitHub, click the Code tab and select the README.md file. Click the pencil icon to edit this file.
    Highlighting the location of the README file in GitHub.
  2. At the end of README.md there is an anchor (<a>) tag that is commented out. Remove the comments at the beginning and the end. Your code should look like this code.
    <a href="https://heroku.com/deploy"><img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy"></a>
  3. This code creates the Heroku button and adds it to the bottom of your GitHub README.
  4. Scroll to the bottom of the page. In the Update README.md field, type Added the Heroku Deployment Button.
  5. Keep the default selections and click Commit changes.

Test the deploy link from the GitHub README.

  1. Click the Code tab in your GitHub DreamHouse repo and scroll to the bottom of the page.
  2. Click the new Deploy to Heroku button on the DreamHouse README. You are redirected to the Heroku website to create a new app based off your DreamHouse code in GitHub. A screenshot of the intro-to-heroku README.md file with the Deploy to Heroku Button.
  3. If you leave the App Name blank, Heroku designates a name for your app. For app name, type dhprod-UNIQUE_ID. Replace UNIQUE_ID in the app name with a unique id.
  4. Click Deploy App. Deploying apps on Heroku takes approximately 3 minutes.
  5. Once the app build is complete, click View to verify that the app  loads.
    Displaying the completed Heroku Build view.
    We use the app you just created later on. 
  6. Close this tab.
retargeting