Skip to main content
The HubSpot CLI is essential for local development and deployment of FreshJuice DEV. This guide covers authentication, file syncing, and common workflows.

​
Prerequisites

Before using the HubSpot CLI, ensure you have:
  • Node.js v22.0.0 or newer installed
  • HubSpot CMS CLI installed globally
  • Access to a HubSpot account with CMS Hub

​
Authentication

1

Authenticate with HubSpot

Run the authentication command to connect your local environment to HubSpot:
hs auth
This will prompt you to:
  • Enter your HubSpot account ID
  • Authorize via browser
  • Name your authentication profile
2

Verify authentication

Check your authenticated accounts:
hs accounts list
Set a default account if needed:
hs accounts use

​
Uploading Theme Files

Upload your compiled theme to HubSpot manually.
1

Build your theme first

Always build before uploading:
npm run build
This compiles Tailwind CSS, bundles JavaScript, and creates a production-ready build.
2

Upload to HubSpot

Upload the theme directory to your HubSpot account:
npm run upload:hubspot
This runs:
hs upload ./theme /FreshJuiceDEV
The theme files from ./theme are uploaded to /FreshJuiceDEV in your HubSpot portal.

​
Watching for Changes

During development, use watch mode to automatically sync changes to HubSpot.
1

Start watch mode

Watch the theme directory and auto-upload changes:
npm run watch:hubspot
This runs:
hs watch ./theme /FreshJuiceDEV
2

Run full development environment

For the complete development experience, run all watchers in parallel:
npm start
This starts:
  • watch:hubspot - Auto-uploads theme changes
  • watch:tailwind - Recompiles Tailwind CSS on changes
  • watch:js - Rebundles JavaScript on changes
The npm start command uses npm-run-all --parallel watch:* to run all watch tasks simultaneously.

​
Fetching from HubSpot

Download theme files from your HubSpot portal to your local environment.
1

Fetch theme files

Download the theme from HubSpot:
npm run fetch:hubspot
This runs:
hs fetch --overwrite /FreshJuice ./theme && ./scripts/post-fetch.sh
2

Post-fetch cleanup

The post-fetch.sh script automatically runs after fetching to:
  • Remove module_id fields from module meta.json files
  • Clean up HubSpot-generated metadata
This ensures your local files stay clean and version-control friendly.
The --overwrite flag will replace local files with remote versions. Make sure you’ve committed any local changes before fetching.

​
Common CLI Commands

​
Direct HubSpot CLI Usage

Beyond the npm scripts, you can use HubSpot CLI commands directly: 
# Create a new module
hs create module

# Create a new template
hs create template

# List files in HubSpot
hs filemanager list /FreshJuiceDEV

# View logs
hs logs

​
Troubleshooting

Authentication issues: 
# Re-authenticate
hs auth

# Clear auth and start fresh
hs auth --account=YOUR_ACCOUNT_ID
Upload failures: 
# Check HubSpot CLI status
hs --version

# Verify account connection
hs accounts list
Watch mode not syncing:
  • Ensure you’re watching the correct directory (./theme)
  • Check that the remote path exists (/FreshJuiceDEV)
  • Restart the watch process

​
Next Steps

Building for Production

Learn how to create production-ready builds

Version Management

Manage theme versions with automated scripts

Build docs developers (and LLMs) love

Get started for freeTalk to us