A few weeks ago, we officially launched CMS Hub, the latest and greatest version of HubSpot’s content management system that includes some powerful updates for developers. To give our community the chance to ask questions about the new features, we hosted our first virtual Lunch, Learn, and AMA for developers.
Below you’ll find a recording of the event, as well as a written recap of the highlights. We’ll also include answers to a few questions that we didn’t have enough time to cover during the event. So, without further ado, here’s the good stuff:
Getting Started with CMS Hub
Before we dive into the recap, if you are new to CMS Hub, or new to local development and themes on HubSpot, we encourage you to check out our Getting Started Guide for developers. This tutorial walks through setting up the CMS CLI, creating a theme from the boilerplate, and making changes to a published CMS Hub page in your own developer sandbox account.
CMS Developer Updates
Beginning at 3:33 in the recording, Will Murray provides some fresh updates related to the CMS including:
- Themes are coming to HubSpot’s Template Marketplace on June 1, 2020! Check out our Marketplace Requirements for more information on how you can list your assets.
- It will soon be possible to create themes from the Design Manager. You’ll be able to start with a blank theme or choose our Boilerplate theme as a starting point.
- Soon you will also be able to view and clone HubSpot assets in the Design Manager via a read-only @hubspot folder.
- Our team has created a new open-source project for event registration that uses Serverless Functions, HubDB, and React.
- We’ve also created a new CMS React Boilerplate for building apps using modules in CMS Hub. More on that below.
CMS React Boilerplate “To-Do” App Demo
Starting at 5:25 in the recording, Gregory Cornelious demos a React “To-Do” app as an example of creating apps using modules on CMS Hub. We created the React Boilerplate used in the demo for you to use as a starting point for your own React Apps. To begin using this via the CLI, use the hs create command along with the react-app type. For example:
hs create react-app <appName>
We’d love to know what other apps/recipes you feel would be helpful. Hop on over to our discussion forums and provide your feedback.
Q&A (Answers to questions we didn’t cover during the event):
Starting at 15:05 in the recording, we spent the rest of the time answering questions that were pre-submitted or asked live by attendees. Unfortunately, we weren’t able to cover all of the questions before time ran out, so you can find some of the unanswered questions along with our responses below.
Q: I need to redesign a website, but I want to start by cleaning up all the modules and templates that are currently live. Is there a best practice for redesigning a website in a clean way?
By creating a new developer sandbox account, you can set yourself up with a completely clean development environment that can be used to build assets. Once you are ready to build out the content for the redesigned site, you can deploy these assets to your production account. See Creating an Efficient Developer Workflow, for more tips.
But regardless of whether you are using a production account or a sandbox account, start by creating a Theme. Then place all of your new modules, templates, and files inside of that theme. This will make it easy for content creators to jump in and use the new assets instead of the old ones since themes act as a package. You can learn how to create a theme here.
Q: Do Node and React both play equally nicely with HubSpot? Can you recommend a good starter learning resource?
If you'd like to learn React, check out the React getting started guide. After that, for an opinionated take on using React within HubSpot, check out our new react boilerplate.
HubSpot serverless functions use Node.js. Because Node.js uses JavaScript, if you feel moderately comfortable writing and editing JavaScript, you will likely feel comfortable using HubSpot serverless functions. We're updating our API documentation to include a “try it within the docs” interface as well as code examples for Node.js. You can see an example of this on the endpoints tab for the CRM Contacts API. Take a look at Node.js's official documentation for additional information.
Q: (For new theme features) When I am creating a new page template, do I have to have Drag and Drop even if i am creating custom modules?
Drag and Drop Areas, not to be confused with design manager drag and drop templates, give content creators control to adjust the layout of modules in two dimensions directly in the page editor. They are not mutually exclusive; they are designed to work together. You should base whether to add dnd_areas based on who is going to be using the templates and maintaining the pages. Because dnd_areas make websites incredibly flexible for content creators, we recommend always including at least one template with dnd_areas. The power and control they provide is the reason most of the HubSpot CMS Theme Boilerplate templates include them.
Q: Can we have video backgrounds in background styling options?
This is something we’ve seen interest in, and we are currently evaluating our ability to add the feature. Unfortunately, we don’t have a definitive timeline at this point.
Q: Is there a way to revert changes uploaded to the theme on the portal?
If not using git, the design manager does have a revision history tool that will enable you to revert a single file back to a previous version. Right-click the file in the finder of the design manager and choose "Show Revision history".
We recommend using version control systems like git to manage versions as they make rolling back edits across several files easy. Some teams may also find that continuous integration with GitHub is a good way to enable developers to work collaboratively on the same site without worrying about breaking things.