1. Help
  2. HubSpot Apps

How to Build a HubSpot App with Heroku

This article will cover the details of setting up an application on Heroku, creating a HubSpot app, and deploying the app on Heroku using APIs.

Heroku is a comprehensive platform that allows you to build, run and entirely operate applications in the cloud. HubSpot is a CRM that brings together the functionalities of the marketing, sales, and customer service in one platform.

This article covers the following key topics: 

(Simply, click on the link to navigate to the particular section directly)


For this article, we will be take an example of a Web Application that users can sign-up for. This workflow is shown below: 


  1. First of all, the user interacts with the Application by submitting the Registration form where both of these are connected to the Application Database. This form further triggers an API request to the HubSpot.

    HubSpotAppwithHeroku.drawio 1
  2. HubSpot creates a contact, and the details are sent back to the application using HubSpot Workflows to automate the whole process.

    HubSpotAppwithHeroku.drawio 2-1

Creating an Application on Heroku

This section covers the steps for creating an application on Heroku. In this case, the application has a NodeJS backend and an Angular frontend. Let’s begin:

  1. Navigate to your Heroku dashboard. The Create a team option allows you to set up the collaborators and team members for the application. Whereas, the Create new app is self-explanatory. Click on Create new app.

    Creating an Application on Heroku
  2. Enter the App name. Remember, the app name can be lowercase letters and numbers.

    2 app name
  3. Click on Create app.

    2.1 Create app
  4. It will display a dashboard like this:

  5. Under the Overview tab, you can see information about your Installed add-ons, Dyno formation that are the basic building blocks of the Heroku application, and Collaborator activity.

    4 overview
  6. Click on Configure Add-ons to access the list of all the add-ons you can choose from.

    5 Configure add on
  7. Under the Resources tab, you can glimpse the details of your application resources, in terms of Dynos and Add-ons.

    5 resources
  8. You can also view your Estimated Monthly Cost which is derived from the selected add-ons.

    6 estimated cost
  9. The Deploy tab covers the details about the deployment process and functionalities of the application.

    7 deploy-1
  10. You can choose from three Deployment methods. The application can be deployed on Heroku Git and Container Registry using Heroku CLI and GitHub by connecting the GitHub account.

    8 Deployment Method
  11. Under the Metrics tab, you can view the Events and Memory Usage of your application. Note, it will be empty in the case of our newly created application. But, if you navigate to the test app, it will be as follows:

    9 metrics
  12. The Activity tab covers all the updates and notifications you need to receive regards the updates and changes made into the application by you and your team members.

    10 activity
  13. With each activity, the build log is also generated. You can access it, by clicking on the link of the View build log.

    11 View Build Log-4

  14. This is what the Build Log will look like:

    12 Build log overview
  15. The Access tab will cover all the details about you and your team members’ access permissions.

    13 Access
  16. Last is the Settings tab that contains details like Region, Stack, Framework, Slug size, GitHub repo link, and Heroku git URL.

    14 settings
  17. The Framework is detected based on the application. Note that the newly created application will not have a defined framework as no code has been added yet. But, if you navigate to the test application, you can see Node.js as the detected framework.

    15 framework
  18. It will also hold the GitHub repo link and Heroku git URL where the application is deployed.

    16 heroku git URL
  19. Below these, there is an option Config Vars. You can expand this by clicking on Reveal Config Vars.

    7 Reveal Config Vars
  20. You can define your environment variables here instead of having an environment file in the application. Also, if you make any changes here, you won’t need to deploy your application again as they are updated automatically.

    environment variables
  21. Next comes, Buildpacks. These are the scripts that execute when the application is deployed. It helps in starting dependencies and pre-requisites. For example, in the case of our test application, these will be node modules.

    18 Buildpacks
  22. The SSL Certificates define the certificates that provide encryption and are attached to your application.

    19 SSL Certificates
  23. Lastly, the Domains define all the custom domains of the Heroku apps that are attached to your application.
    20 add domain

Deploying the Heroku Application

This section covers the steps of deploying a Heroku application and understanding its functionalities.

  1. Navigate to Resources

    21 Resources

  2. You can see the Add-ons, which in the case of our test application is Heroku Postgres, which is a database.

    22 heroku
  3. By clicking on it, you can access further details about it.

    23 Heroku Postgres-1
  4. Under Settings, you can access the Database Credentials that will allow you to connect to your database.

    24 settings
  5. If you go to the Deploy tab of our test application, you can see that it’s connected with GitHub.

    25 Github Connected
  6. Automatic Deploy allows you to automate the deploys based on the changes in a specific branch.
    26 enable automatic deployment
  7. You can also deploy manually by navigating to the Manual deploy and selecting the branch you would like to deploy.

    27 enter the name of the branch
  8. Select Deploy Branch and it's done.

    28 deploy branch
  9. Under the Manual deploy, a build log is generated based on the recent deployment.

    Manual deploy
  10. You can also access these logs by navigating to the View logs from the dropdown of More.

    30 view logs
  11. This is what build logs look like:

    build logs
  12. Also, below the logs, you can access the Heroku link of the application.

    31 url link heroku
  13. That’s all. Our app is all set. To view, click on Open app.

    32 open app
  14. It's all running. Note, you cannot see the GUI as this is the application server, not the front-end. 
    33 error

Creating an Application in HubSpot CRM

In the previous section, we have created the application in Heroku. Now, we will create the application in HubSpot CRM and connect them using APIs and workflows in the succeeding section.

  1. To create an application in HubSpot CRM, navigate to your Developer dashboard and select Manage test accounts.

    34 Manage Test Account
  2. Select Create app test account.

    35 Create app test account
  3. Enter the Account name and click on Create.

    36 create
  4. As you can see, the app is created.

    37 Account details
  5. Navigate to the dashboard.

  6. Select Contacts from the dropdown of Contacts.

    38 contacts
  7. Here you can see your contacts. You can create a new one by clicking on Create contact.

    39 create contact-1 
  8. Write Email, First name, Last name, Contact owner, and additional details. After that, select Create contact.

    40 create contact 1
  9. Contact will be created as follows:

    41 Ghayoor Nav
  10. But this is manual creation of contact. What we essentially want is the automatic process where the contact is created when the user enters data in the registration form. For that, navigate to the sections of Linking Heroku and HubSpot applications and Sending data from HubSpot to Heroku.

Linking Heroku and HubSpot applications

We will use APIs to connect the Heroku to the HubSpot application. The steps are as follows:

  1. Click on your profile icon.
  2. Select Profile & Preferences from the dropdown.

    42 Profile and Preferences
  3. Under Integrations, select API Key.

    43 API key
  4. As you can see, there is no existing API key. Therefore, click on Create key.
  5. Confirm your API access.

    44 create api key
  6. The key is created. You can copy it by the button below.

    45 Active API copy
  7. Navigate to the API documentation of HubSpot, and select Create a contact.

    46 HubSpot API Docs
  8. Here you can access all the details about this API as well as the POST URL. To work with it we will use Postman.

    47 post URL
  9. Select the method as POST and paste the POST URL copied from the API of contacts.

    48 post url
  10. Enter your API key under the Query Params.

    49 hapikey
  11. Under Body tab, select raw.

    50 body raw
  12. Paste the body of API as mentioned in the documentation.

    51 properties
  13. Select Send.

    52 send
  14. As you can see, the request has been posted successfully. The 201-status code signifies successful execution.

    53 created
  15. By navigating back to the Contacts, you can see the contact sent from the API is created.

    54 contact created

Sending data from HubSpot to Heroku

Next, we want to send the information from HubSpot back to Heroku. For that, we will need to create workflows.

  1. To create a workflow, select Workflows under the heading Automation.

    55 Workflow
  2. Click on Create workflow.

    Create workflow
  3. Select Contact-based from the tab of Start from scratch.

    56 contact based
  4. Click on Next.

    57 next
  5. First of all, you will need to Set up triggers for the workflow to begin.

    58 setup triggers
  6. Select Contact properties as the Filter type.

    59 contact properties
  7. Set Lifecycle stage as the Contact information.

    60 lifecycle stage
  8. For the details, set the contact information as of any Customer.

    61 is any of customer
  9. Now, that the trigger is set, click on + to add the action regards that trigger.

    62 plus
  10. You can add action to it in two ways. First of all, you can select Send a webhook.

    63 webhook
  11. Enter the Webhook URL as per your choice which will form as the link between both apps.

    64 post
  12. The second option is to opt for a Custom code.

    65 workflow
  13. You can select the language of your code from Python and Node.js. Write your code. And, voila it’s done.

    66 Node Js 12


In this article, we looked into creating a HubSpot app on Heroku. We sent the data from the Heroku application to create a contact in HubSpot CRM using APIs. And, the data was sent from HubSpot back to Heroku using workflows.