9amhealth-hubspot-theme

9amHealth HubSpot Theme

A theme for HubSpot, built with the 9amHealth web component library.

How it Works

Webpack bundles all dependencies and assets into a dist folder that can be published to the HubSpot environment; there are scripts available to build and deploy in the package.json file. Template layouts reference the bundled CSS and JS main files necessary to run the site properly. This theme leverages the web component library throughout the template's markup, and the HubSpot modules are tightly coupled to their corresponding web components.

Development

yarn
yarn hs:init # Generates the HubSpot .yml file necessary for authentication
yarn dev # Starts Webpack

yarn deploy:develop # Bundles and deploys the assets to development

The yarn dev command starts Webpack in development mode. This will watch for changes to the src folder, and rebuild the dist folder when changes are made. When the yarn dev command is run, the dist folder will be deleted, and the src folder will be bundled into the dist folder. Changes to templates and modules will be visible in the HubSpot webpages.

Production

yarn deploy # Bundles and deploys the assets to production

Note: in order to properly manage a development and production environment, ensure that the hubspot.config.yml file generated via hs:init contains access tokens for each portal.

File Structure

├── src
│   ├── assets
│   │   ├── fonts # Fonts imported into CSS as asset/inline
│   │   └── images # Images copied into dist as asset/resource
│   ├── css
│   │   ├── fonts.css
│   │   └── main.css # Manages dependency stylesheets
│   ├── js
│   │   ├── main.ts # Manages dependency scripts
│   │   └── globals.ts
│   ├── modules # HubSpot modules
│   ├── templates # HubSpot templates/partials
│   ├── fields.json # HubSpot globals
│   └── theme.json # HubSpot theme configuration
├── dist # What is uploaded to HubSpot
├── node_modules
├── package.json
├── README.md
├── tsconfig.json
├── webpack.config.js
├── yarn.lock
└── .gitignore