Skip to main content
Building FreshJuice DEV for production involves compiling assets, bundling JavaScript, and creating distributable packages. This guide walks through the complete build process.

​
Build Process Overview

The production build consists of four main steps:
  1. Clean temporary and distribution directories
  2. Bundle JavaScript with esbuild
  3. Compile Tailwind CSS
  4. Create ZIP package for distribution

​
Quick Build

1

Run the build command

Execute the complete build process:
npm run build
This runs all build steps sequentially:
npm-run-all --serial clean build:js build:tailwind build:zip
2

Verify the output

After building, check the generated files:
  • Compiled theme: ./theme/ directory
  • Distribution ZIP: ./_dist/freshjuice-dev-hubspot-theme-v{VERSION}-dev.zip

​
Step-by-Step Build Process

​
1. Clean Build Directories

1

Remove old build artifacts

Clear temporary and distribution folders:
npm run clean
This script:
rimraf './_temp' './_dist' && mkdir './_temp' './_dist'
  • Deletes ./_temp and ./_dist directories
  • Recreates them as empty directories

​
2. Build JavaScript

1

Bundle JavaScript with esbuild

Compile and bundle all JavaScript files:
npm run build:js
This runs:
npx esbuild ./source/js/main.js --outfile=./theme/js/main.js --bundle
2

What gets bundled

The esbuild process:
  • Takes ./source/js/main.js as the entry point
  • Bundles all imported dependencies (Alpine.js, plugins, etc.)
  • Outputs to ./theme/js/main.js
  • Includes tree-shaking to remove unused code
For development with auto-rebuild, use npm run watch:js instead.

​
3. Compile Tailwind CSS

1

Build production CSS

Compile Tailwind CSS with optimizations:
npm run build:tailwind
This runs:
npx @tailwindcss/cli -i ./source/css/tailwind.css -o ./theme/css/tailwind.css
2

CSS optimization

The Tailwind build:
  • Scans all templates, modules, and sections for used classes
  • Generates only the CSS needed (purges unused styles)
  • Applies autoprefixer for browser compatibility
  • Outputs optimized CSS to ./theme/css/tailwind.css
For development with auto-rebuild, use npm run watch:tailwind instead.

​
4. Create Distribution ZIP

1

Package theme for distribution

Create a ZIP file ready for marketplace or manual installation:
npm run build:zip
This executes ./scripts/build-zip.sh:
2

Understanding build-zip.sh

The script performs these actions:
# Get version from package.json
VERSION=$(node -p "require('./package.json').version")

# Create temporary directory
mkdir -p ./_temp/FreshJuiceDEV ./_dist

# Copy theme files
cp -r ./theme/* ./_temp/FreshJuiceDEV

# Create ZIP with version number
cd ./_temp
zip -rm ../_dist/freshjuice-dev-hubspot-theme-v$VERSION-dev.zip ./FreshJuiceDEV -x "*/.DS_Store"
3

Output location

The ZIP file is created at:
./_dist/freshjuice-dev-hubspot-theme-v{VERSION}-dev.zip
For example, version 3.0.0 creates:
./_dist/freshjuice-dev-hubspot-theme-v3.0.0-dev.zip

​
Development vs Production

​
Development Workflow

For active development, use watch mode: 
npm start
This runs all watchers in parallel:
  • watch:tailwind - Recompiles CSS on changes
  • watch:js - Rebundles JavaScript on changes
  • watch:hubspot - Uploads changes to HubSpot automatically

​
Production Build Workflow

1

Bump version

Update version numbers before building:
npm run version:patch
# or
npm run version:minor
# or
npm run version:major
2

Build for production

Create optimized build:
npm run build
3

Upload to HubSpot

Deploy the built theme:
npm run upload:hubspot

​
Build Configuration

​
Tailwind CSS Configuration

Tailwind scans these paths for class usage:
  • ./theme/templates/**/*.html
  • ./theme/modules/**/*.html
  • ./theme/sections/**/*.html
  • ./theme/macros/**/*.html

​
esbuild Configuration

JavaScript bundling:
  • Entry: ./source/js/main.js
  • Output: ./theme/js/main.js
  • Mode: Bundle all imports
  • No minification (can be added with --minify flag)

​
Troubleshooting

Build fails during clean:
  • Ensure you have write permissions in the project directory
  • Close any programs that might lock files in _temp or _dist
JavaScript bundle errors:
  • Check for syntax errors in ./source/js/ files
  • Verify all imports resolve correctly
  • Run npm install to ensure dependencies are installed
Tailwind CSS not updating:
  • Verify class names exist in your templates
  • Check that template files are in scanned directories
  • Clear the Tailwind cache: rm -rf .cache
ZIP creation fails:
  • Ensure the zip command is available on your system
  • Check that ./theme/ directory contains files
  • Verify package.json has a valid version field

​
Next Steps

HubSpot CLI Guide

Upload and deploy your built theme to HubSpot

Version Management

Learn how to manage theme versions

Build docs developers (and LLMs) love

Get started for freeTalk to us