Developers with access to Sales or Service Hub Enterprise can now use CRM development tools to build UI extensions (custom cards) based on a new technology stack with React as frontend. These extensions can be displayed on the middle column tab or the sidebar of the record page.
This allows developers to build custom cards that are flexible, dynamic, and interactive. The choice of this technology stack makes it so that customers can have entirely custom yet immersive user interfaces built on top of HubSpot and that matches cohesively with the the UX that HubSpot is known for. They can build complex integrations, multi-step business processes on top of HubSpot to solve their unique business needs and scale their businesses.
The UI extensions use React as frontend and continue to use serverless functions as backend. This makes them full-stack. They are hosted on HubSpot so that developers do not have to find their hosting platform. Using React as a frontend also allows developers to use familiar skills and leverage active frontend development ecosystem to learn the tools.
Docs:
UI extensions are also supported by a full development lifecycle of build and deploy as well as a full-stack local development experience. This is all made possible by the CRM development tools in public beta, that are available under a single homepage and navigation.
Developer projects enable you to package, build, and deploy private apps to HubSpot locally using the CLI. You can customize the CRM through private apps with custom cards. Once deployed to HubSpot, you can view the project within HubSpot to see its build and deploy history, manage its settings, and view the private app and its components.
With the GitHub integration developers can use GitHub as the source of record for their HubSpot project’s codebase. They can collaborate with their teams using familiar GitHub tools and workflows and trigger project builds by pushing code to their repositories.
Developers now have a complete local development experience, both for React-based frontend and serverless functions with a single CLI command. This also includes ability to preview changes like using hot module reload and debugging locally.
The growing library of more than 35 UI components offers a way to build extensions that look, feel, and behave like HubSpot, right out of the box. This also includes generic primitives and CRM data components. CRM data components help developers visualize aspects of CRM data out of the box, without having to worry about user permissions, validations, or underlying APIs. Read complete reference of UI components.
A development sandbox is an isolated environment in which a developer can confidently build and test early proof of concept development work before implementing them in their standard sandbox or production account. When new development sandboxes are created, they have all the same features and CRM object definitions as the customer’s production account.
Developers can use regular debugging tools like browser console, local terminal, or IDE debuggers. They can also use the logs for the serverless functions available inside private app to easily monitor how their private apps and custom cards are functioning. Each log contains details about each execution, including whether it passed or failed. These logs will make it easier for developers to debug potential causes of failure.
All Enterprise tiers
Note: To access CRM development tools, super-admin access is required.