Start tracking your progress
Trailhead Home
Trailhead Home

Install the Dreamhouse App and Create a Heroku Button

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.

Launch Your Trailhead Playground and Install a Package

Let's get started by opening your Trailhead Playground and installing a package. First, scroll to the bottom of this page and click Launch. If you see a tab in your org labeled Install a Package, great! Follow the steps below. 

If not, click App Launcher  to launch the App Launcher, then click Playground Starter and follow the steps. If you don’t see the Playground Starter app, copy this package installation link and check out Install a Package or App to Complete a Trailhead Challenge on Trailhead Help.

  1. Click the Install a Package tab.
  2. Paste 04tB00000009UeX into the field.
  3. Click Install.
  4. Select Install for All Users, then click Install.
  5. In the pop-up asking you to approve third-party access, select Yes, grant access to these third-party websites and click Continue.

When the package is finished installing, you see a confirmation page and get an email to the address associated with your playground.

  1. Once the installation is complete, click Done.
  2. From the App Launcher (App Launcher), find and open the DreamHouse app.
  3. 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.
  4. 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, http://bit.ly/intro-to-heroku.
  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.