HubSpot CMS Local Development for Streamlined Development Process

HubSpot's CMS Hub is a powerful platform that allows businesses to create, manage, and optimize their website content. However, the traditional process of developing and testing new features and designs can be time-consuming and cumbersome. HubSpot CMS Local development tools offer a solution by allowing developers to work on their projects offline, making it faster and more efficient to build, test, and iterate on website updates.

You can now easily integrate your favorite tools, such as text editors, version control, and any web development technology, with HubSpot's recently announced Local Development Tooling beta release, which enables you to carry out all the development work you previously did. 

The upshot of this is that you can design utilizing a workflow that makes sense for you. You will see every HubSpot asset as a series of files, including HTML, CSS, JavaScript, and HubSpot DnD templates and modules.

Unsure what to do? Well you are in luck! In this article, we will explore how to connect a HubSpot account with a local development tool to streamline the development process and improve website management.

How to Connect a HubSpot Account with a Local Development Tool

Before you can connect your HubSpot CLI to local workflow you need certain prerequisites: 

• You must be a customer of the HubSpot CMS Hub Professional or Enterprise if you want to manage and generate your own CMS content within HubSpot.
• You must be a HubSpot Marketing Hub Professional or Enterprise customer if you want to design and manage your own highly personalized email templates, landing pages.

Once you have set-up, here’s next what you need to:

1. Install Dependencies: Node.js and Version Manager

1. Activate the local tools by installing Node.js, a Javascript runtime environment. It supports Node versions 10 and up; however, the long-term support (LTS) version is the one we advise using.

2. Use the command line to run npm install -g @hubspot/cli to install the HubSpot tools globally. Run npm install @hubspot/cli to install the tools in the current directory.

2. Create a Project's Working Directory

Choose a directory on your computer where you feel comfortable setting up your HubSpot project. run mkdir local-cms-dev in the command line, which will create a directory. Then, run cd local-cms-dev to navigate to that directory.

Now that you have laid the groundwork, you may start creating your first HubSpot project! Congrats!

3. Configure the Local Development Tools

To link the tools to your HubSpot account, run hs init. With this command, you can follow these instructions:

1. In order to enable authorized access to your account via the local development tools, it will first prompt you to create a personal CMS access key. When you are ready to launch the Personal CMS Access Key page in your default browser, it will ask you to press "Enter." 

If required, you can view or create your unique access key using this page (Note: To finish this tutorial, you must choose at least the "Design Manager" permission). Paste your access key into the terminal after copying it.

2. You will then give the account a name. If you're using a developer sandbox, for instance, you might use "sandbox," and if you are using a complete customer account, you might use "company.com." Spaces are not permitted in this name. Whenever you execute the commands, you can utilize this name.

A success message will appear when you finish this straightforward init flow, indicating that you have generated a configuration file called hubspot.config.yml in the current directory.

During command execution, you can use the —account= option with either name or portalId (for instance, —account=123 and —account=sandbox will both interact with account ID 123 based on the example above). You can omit the —account= argument from your instructions if you set a top-level defaultPortal; commands will then make reference to that default portal.

4. Link Your Project to HubSpot CLI

1. Let's start integrating HubSpot with our neighborhood development environment. Run the following command from the command line located in the folder for your project.

You will need to do the following:

2. When you are ready, we'll launch a secure page in your default browser so you can view and copy your individual accesskey, which you'll require to move on to the following step.

3. Press the "Enter" key as directed. Your default browser will launch and request your HubSpot login information. After logging in, a page similar to the one below will appear and prompt you to choose your HubSpot account to link with the HubSpot CLI. You can select this option and then press "Continue with this account."

You are all set and ready to use development tools in HubSpot.

Conclusion

Using a local development tool with HubSpot CMS can greatly streamline the development process, allowing for faster iteration and testing of website changes. By setting up a local development environment and connecting it to HubSpot, developers can work more efficiently and collaborate more effectively, without having to constantly push changes to the live site. 

This approach can also help reduce errors and minimize downtime, while providing a more flexible and customizable development experience. With the right tools and processes in place, HubSpot CMS local development can be an excellent way to build and optimize websites for maximum impact and ROI.
Stuck somewhere? Work with a HubSpot platinum partner. Our experts at Growth Natives will take care of everything HubSpot for you. Connect with us today at info@growthnatives.com or call us at +1 855-693-4769.