Create Your Heroku App

Create a Placeholder for the Heroku app

  1. From your browser, navigate to the Heroku dashboard,
  2. Click New.
  3. Select Create new app.
  4. Note


    When prompted for a name, type dhdev-UNIQUE_ID.  For some accounts, there is an option for owner. Verify that option is set to Personal.

  5. Click Create app.
  6. Once your app is created you are redirected to the Heroku dashboard. Click Open App.

Congratulations! You have created your first Heroku app.

Configure your new app to receive the DreamHouse code from Git.

  1. Once your app is created, you are redirected to the Deploy tab. Scroll down to Deployment method and select GitHub.
  2. Scroll down to the Connect to GitHub section and click Connect to GitHub.
    Screenshot of the Heroku Dashboard Connect to GitHub configuration section.
  3. If you have not already authorized Heroku to access your GitHub account, a window appears asking to authorize. Click Authorize Heroku.
  4. Once your GitHub account is authorized, your username is displayed and you can search for repositories stored within your account.
  5. In the repo-name input, type intro-to-heroku. Click Search.
  6. Once the name of your repo appears, click Connect.

Add the Postgres add-on.

Heroku add-ons are optional time-saving tools that you can add to develop, extend, or operate your app. With add-ons, developers no longer have to write extra code for common tasks. We use the Postgres add-on for data storage. Now you don’t have to go through the hassle of installing and setting up a database for your app.

  1. Click the Resources tab at the top of the Heroku Dashboard.
  2. In the add-ons input box, type post and then select Heroku Postgres.
  3. Verify Hobby Dev - Free is selected.
    Screenshot of the Heroku Add-on window for Heroku Postgress. The selection is asking if Heroku Postgres should be added to the heroku app.
  4. Click Provision.

Deploy the DreamHouse app on Heroku and view the process in the logs.

  1. Click the Deploy tab.
  2. Scroll to the Manual deploy section. Verify that the branch listed is master, and click Deploy Branch. Scroll to the top of the page. In the upper-right corner, select More, then click View logs. Your build has started if you see the line, "Build started by user…"
  3. Once the build is complete you know the app is successfully deployed when the app logs say, "State changed from starting to up".
    Screenshot of the Heroku Logs highlighting the log message,
  4. Click Open app to see your DreamHouse app running in a browser using Heroku. Click the menu icon  in the upper-left corner. Navigate to Properties to view the 12 properties stored in the PostgreSQL database. Screenshot of the Dreamhouse web app with a listing of all 12 of the properties stored in Heroku Postgres. It displays the property image, property name, location and the price.