How to Preview from HubSpot CLI – Beginners Guide

HubSpot CLI (Command Line Interface) is an important tool for developers working with HubSpot.

It enables local development, content management, and theme customization while providing a straightforward way to preview changes before deploying them to a live environment.

This guide will walk you through how to preview from HubSpot CLI, including installation, setup, and running preview commands.

Before you start, ensure you have the following:

• Node.js installed (Latest LTS version recommended)
• NPM (Node Package Manager) installed
• A HubSpot account with CMS Hub access
• HubSpot CLI installed

How to Preview from HubSpot CLI Commands in 7 Easy Steps

1) Install HubSpot CLI via NPM

The first step is to install the HubSpot CLI using NPM. If you haven’t installed it yet, run the following command:

npm install -g @hubspot/cli

This command installs the HubSpot CLI globally, making it accessible from any directory in your system.

To verify the installation, run:

hs --version

If installed correctly, the terminal will return the installed version of the HubSpot CLI.

2) Authenticate with HubSpot

After installing the CLI, you need to authenticate it with your HubSpot account.

Run the following command to connect your CLI to HubSpot:

hs auth

This will open a browser window prompting you to log in to your HubSpot account.

Once authenticated, the CLI will be linked to your HubSpot environment.

To confirm that your authentication is successful, use:

hs accounts list

This command will display all connected HubSpot accounts.

3) Setup a Local Development Environment

To develop and preview themes, you need to set up a local development environment by creating a new HubSpot CMS project or using an existing one.

To create a new project, use:

hs create website-theme my-custom-theme

Then, navigate into the theme folder:

cd my-custom-theme

For existing themes, navigate to the respective theme directory where your HubSpot files are stored.

4) Connect to HubSpot CMS

If you haven’t already, connect your local project to your HubSpot account:

hs init

This command will ask for your HubSpot account, select the correct account, and complete the setup.

You can also manually add your HubSpot portal ID to hubspot.config.yml file within your project directory.

Example hubspot.config.yml file:

accounts:
default:
portalId: YOUR_PORTAL_ID
authType: personalaccesskey
personalAccessKey: YOUR_ACCESS_KEY

5) Upload Files to HubSpot for Preview

Once your project is connected, you need to upload your files to HubSpot Design Manager for previewing changes.

Use the following command to upload your files:

hs upload src my-hubspot-folder

Here:

src:

The local directory containing your HubSpot files.

my-hubspot-folder:

The destination folder in your HubSpot CMS file manager.

6) Preview from HubSpot CLI

Using the hs watch Command

To live preview your changes, use the watch command:

hs watch src my-hubspot-folder

This command does the following:

• Monitors your local files for changes.
• Automatically syncs changes to your HubSpot CMS.
• Updates your live preview in real time.

Previewing a Specific File

If you only need to preview a specific file, use:

hs upload src/templates/home.html my-hubspot-folder/templates/home.html

After uploading, you can preview the file within your HubSpot CMS under Design Tools.

Using hs open to Preview in Browser

Once your files are uploaded, you can directly open them in your browser using:

hs open @hubspot/template-path

Replace @hubspot/template-path with the actual path of your file in HubSpot CMS.

For example:

hs open @hubspot/my-hubspot-folder/templates/home.html

This command will open the preview link in your default web browser.

7) Test Changes Before Publishing

Before publishing, make sure everything works as expected:

1. Check the preview URL and ensure all elements appear correctly.
2. Test responsiveness to confirm mobile compatibility.
3. Inspect the Console (DevTools) for any errors or warnings.

If everything looks good, you can proceed to publish your changes using:

hs publish

Troubleshooting NPM Install HubSpot CLI Issues

If you encounter issues, here are some common solutions:

HubSpot CLI Not Recognized

If hs commands are not recognized, ensure NPM is in your system PATH:

export PATH="$HOME/.npm-global/bin:$PATH"

Authentication Issues

If you face authentication errors, try re-authenticating:

hs auth revoke

hs auth

Changes Not Updating in Preview

Ensure hs watch is running.

Try manually re-uploading files:

hs upload src my-hubspot-folder

Clear cache by opening Developer Console (Ctrl + Shift + R).

Conclusion – NPM Install HubSpot CLI

Using HubSpot CLI allows developers to preview and test their HubSpot CMS projects before deployment.

By following this guide, you can improvise your development process and ensure your themes and templates look perfect before going live.

How to use HubSpot CLI for usual work?

HubSpot CLI allows developers to manage HubSpot CMS projects by providing commands to authenticate, upload, preview, and publish changes.

Using commands like hs watch, hs upload, and hs open, you can develop local environment while syncing updates in real-time to HubSpot CMS.

How to create a theme in HubSpot by CLI Command?

To create a theme in HubSpot, use the command:

hs create website-theme my-custom-theme

This generates a new theme with default templates and modules, which you can customize and upload to HubSpot CMS.

Relevant Guide & Services

How to Integrate HubSpot with Elementor Forms

How to Build a Header in HubSpot

How to Associate Campaign with Webinar in HubSpot

Can i Fetch My Entire HubSpot Site

How to Use HubSpot Webhook