Disable Cache for Specific Coded Files

[dillonbailey]

The Setup

We are in the process of building out a new theme for a client in the COS. Our CSS is included via a {{ include_css(...) }} Hubl tag.

The Issue

As we are continuously testing and tweaking our CSS to integrate better with native hubspot styles, we need our file to avoid caching while in development. One option is to automagically rev our CSS file, but then we need to update the reference after every deploy (and we deploy about 30 times a day).

We found it fairly difficult to uncache the CSS file through generic means of adding a ?v=2342 or the like as these still resulted in the app.min.css cached file being served up.

The Ideal Solution

A list of files for the cache to ignore would be absolutely brilliant!

[arinker]

Use {{ buffer_mode.preview }} and {% require_css() %}

The following setup does the trick for us:

{% set style_path = "/path/in/design-manager/to/your/style.css" %}
{% if buffer_mode.preview %}
  {% require_css %}
    <style>
      {% include style_path %}
    </style>
  {% end_require_css %}
{% else %}
  {{ require_css(get_asset_url(style_path)) }}
{% endif %}

buffer_mode.preview indicates wether a template or page is previewed or a page is live.

• If buffer_mode.preview is True, the stylesheets content will be rendered inline inside style-tags. Thus it will not be cached or minified.
• If buffer_mode.preview is False, the stylesheet will be loaded via link and cached and minified.

[Derek_Gervais]

Hi @dillonbailey,

Thank you for the feedback, I’ll work on getting those docs updated.

[Jon_McLaren]

Hey there, I know I'm late to this party.

HubSpot's cache can be a little sticky. I helped build a chrome extension that makes working around it pretty easy.

I keep the instructions at this page updated:
https://github.com/williamspiro/HubSpot-Developer-Extension/wiki/So-you're-having-HubSpot-Caching-Is...

Hope it helps anyone who stumbles upon this post.

[Derek_Gervais]

Hi @dillonbailey,

You can use the get_public_template_url() function inside of the require_css() function, like this:
{{ require_css(get_public_template_url("/custom/system/jumbla_honestfox_theme/app-6cea8ff4e7.css")) }}

[dillonbailey]

@Derek_Gervais Roger that! Cheers.

I’d recommend updating the docs with a similar example as that’s going to be a common use case and showing it only referencing a full external URL made me think that was a requirement.

[boulter]

Additionally, if you can reproduce the issue, please let us know. Caches should be cleared within a few seconds of any content or css file changing, so manual cache clearing should not be necessary.

[dillonbailey]

@boulter cheers mate - it was easy to replicate at the time, but for right now it’s probably something we’ll move past and just keep revving our files until stable. Will let you know.

[Derek_Gervais]

Hi @dillonbailey,

There’s no built-in way to disable caching for specific files. You’d need to implement some automated solution that added a unique query parameter (like a timestamp) to the end of the CSS file path.

On an unrelated note, the include_csss() function is being deprecated. You should instead use require_css():

designers.hubspot.com

HubL supported functions

Functions are similar to filters in that they accept parameters and generate a value; however, not all functions need to be applied to an initial template value. Instead they interact with other areas of your HubSpot environment.

[dillonbailey]

@Derek_Gervais so I tried to use require_css() and it broke - is that implemented globally?

Looks like according to the doc referenced we need a complete URL - how do we get that from coded files when it generates {{ get_public_template_url("custom/system/jumbla_honestfox_theme/app-6cea8ff4e7.css") }} for public URL?