Install the Dreamhouse App and Create a Heroku Button
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!
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 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.
- Click the Install a Package tab.
04tB00000009UeXinto the field.
- Click Install.
- Select Install for All Users, then click Install.
- 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.
- Once the installation is complete, click Done.
- From the App Launcher ( ), find and open the DreamHouse app.
- 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.
- Click the Properties tab to view the imported properties.
Fork the DreamHouse app in GitHub.
- To sign in with an existing account on GitHub, go to
https://github.com/login. Enter your username and password, then click Sign In.
- 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.
- Navigate to the DreamHouse App GitHub repo,
- In the upper-right corner, click Fork. You are redirected to your account with your forked repo,
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.
- In your
intro-to-herokurepo, click app.json and click the to edit it.
- On line 7, inside the quotes, add your DreamHouse GitHub repository username, https://github.com/YOUR_USERNAME/intro-to-heroku.
- Scroll to the bottom of the page. In the Update app.json textbox, type
Added GitHub Repo URL.
- Keep the default selections and click Commit changes.
Test the app.json file.
- To test if your app will deploy through a button, we need to test the app.json file. Copy this URL:
- Paste the URL in a separate browser tab and replace the placeholder text (YOUR USERNAME) with your GitHub username. Press
- 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.
- 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.
- 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.
- In GitHub, click the Code tab and select the README.md file. Click the
to edit this file.
- 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>
- This code creates the Heroku button and adds it to the bottom of your GitHub README.
- Scroll to the bottom of the page. In the Update README.md field, type
Added the Heroku Deployment Button.
- Keep the default selections and click Commit changes.
Test the deploy link from the GitHub README.
- Click the Code tab in your GitHub DreamHouse repo and scroll to the bottom of the page.
- 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.
- 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.
- Click Deploy App. Deploying apps on Heroku takes approximately 3 minutes.
- Once the app build is complete, click View to verify that the app loads.
We use the app you just created later on.
- Close this tab.