Create an app card

​

Prerequisites

• Ensure you’ve installed the latest beta version of the HubSpot CLI.
• If you haven’t done so yet, create an app.
• It’s recommended to create a configurable test account so that you can build and test in an isolated environment.

​

Create an app card

1

Add a card component to your project

To add a new app card component to your project, use the terminal to navigate into your local project directory, then run the following command:

Report incorrect code

Copy

Ask AI

hs project add

Then, when prompted to select a component to add, select Card.If your project doesn’t contain any app cards yet, a cards/ directory will be created for you in the app/ directory. The cards/ directory will contain:

• A JSON card configuration file (*-hsmeta.json)
• A React component file (.jsx)
• A package.json file

If your project already includes app cards, the above files will be added to the existing cards/ directory (excluding package.json if it already exists).

Report incorrect code

Copy

Ask AI

myProject
└── src/
    └── app/
        └── cards/
            ├── NewCard-hsmeta.json
            ├── NewCard.jsx
            └── package.json

Learn more about these files in the app cards reference documentation.

2

Upload to HubSpot

To upload the new card to your HubSpot account:

• Run hs project install-deps to install the dependencies needed for the app card. This will update the cards/ directory with the necessary Node modules and a package-lock.json file, which will speed up the build of the uploaded app card extension and ensure that any dependencies in your local development environment and production match.
• Then, run hs project upload to upload the project to your default account.
• To specify a different account (such as a separate test account), include the --account flag and specify the HubID of the account. For example hs project upload --account 123456.
• If the project hasn’t been uploaded before, you’ll be prompted to confirm that you want to create the project in your account. Otherwise, the terminal will display the build and deploy status, then confirm once the project has been successfully uploaded.

​

View the card in HubSpot

• Click the name of the app in the project summary on the left, or under Project components.

• Click the Distribution tab.
• Click Install now.

• In your HubSpot account, navigate to CRM > Contacts.
• Click the name of a contact.
• At the top of the middle column of the contact record, click Customize.

• Click Default view.
• Select the tab that you want to add the card to. You can then hover over the location where you want to place the card and click the plus button. This can be adjusted at any time after initial setup.

• In the right sidebar, click the Card library tab. Then, click the Card types dropdown menu and select App to filter for app cards.

• Click Add card under the app card you created, then click the close button in the top right of the sidebar.
• In the top right, click Save and exit.

​

Start local development

• In the terminal, run hs project dev.
• Follow the terminal prompts to select the account you want to use for local development.
• The terminal will start the local development server, then confirm once it’s running.
• With the server running, navigate back to the browser tab with the contact record and reload the page.

​

Next steps

• Consult the UI extension component reference documentation to add more UI components to the card.
• See all app card configuration options and more in the app card reference documentation.
• View all available utilities and methods available for UI extensions in the UI extension SDK reference.
• Learn how to fetch data for your app card with hubspot.fetch().

​

Migrating a previously created app card

• Migrate an existing public app
• Migrate an existing private app