How to make hugo watch for changes to scripts in assets directory

I’m trying to make a shortcode that involves some javascript so I have the following three files:

  • content/blog/test.md with contents
+++
title = 'Test'
date = 2024-01-06T16:39:46-05:00
draft = true
+++

{{< mycode "log this please" >}}
  • layouts/shortcodes/mycode.html with content:
{{ $script := resources.Get "/scripts/example.js" }}
{{ $params := (dict "params" (dict "toLog" (.Get 0))) }}

{{ with js.Build $params $script }}
<script src="{{ .RelPermalink }}"></script>
{{ end }}
  • assets/scripts/example.js with content:
import * as params from '@params';

console.log("apple")
console.log(params.toLog)

I am able to build the site with hugo server -D --logLevel debug but when I make changes to example.js (for example changing “apple” to “banana”) I don’t see them propagate to the website unless I save either the markdown or the html files. Is there some way to tell Hugo to watch the scripts in the assets directory and rebuild when they are changed?

I’m pretty sure this is a known issue:

https://github.com/gohugoio/hugo/issues/7960

There is a long story here, and most of these issues should soon be fixed (working on the final parts of it as I’m writing this).

But to cut a long story short, I would recommend that you put your assets file in a structure ala

assets/js/example.js
assets/css/foo.css

etc.

This relates to how Hugo currently do cache invalidation of these resources.

Alternatively you can try to set up some cache buster configuration.

I ran a quick test of the WIP… issue resolved. :+1:

1 Like

Hmm I tried moving the script to assets/js/ and then added the following to my hugo.toml (copied and pasted from your link)

[build]
  [build.buildStats]
    enable = true
[[build.cachebusters]]
    source = 'assets/watching/hugo_stats\.json'
    target = 'styles\.css'
[[build.cachebusters]]
    source = '(postcss|tailwind)\.config\.js'
    target = 'css'
[[build.cachebusters]]
    source = 'assets/.*\.(js|ts|jsx|tsx)'
    target = 'js'
[[build.cachebusters]]
    source = 'assets/.*\.(.*)$'
    target = '$1'

But it seems it hasn’t changed anything.
When I make a change to my javascript file I get the following output from the server:

INFO  Received System Events: [WRITE         "assets/js/example.js" WRITE         "assets/js/example.js"]

Change detected, rebuilding site.
2024-01-09 19:21:43.934 -0500
DEBUG Rebuild for events ["WRITE         \"assets/js/example.js\""]
DEBUG cachebuster: Matching "assets/js/example.js" with source "assets/watching/hugo_stats\\.json": no match
DEBUG cachebuster: Matching "assets/js/example.js" with source "(postcss|tailwind)\\.config\\.js": no match
DEBUG cachebuster: Matching "assets/js/example.js" with source "assets/.*\\.(js|ts|jsx|tsx)": match!
DEBUG cachebuster: Matching "assets/js/example.js" with source "assets/.*\\.(.*)$": match!
DEBUG Matching "js/js/example.js" with target "js": match!
DEBUG Matching "js/js/example.js_d28410f0311055565dece0539fa48437" with target "js": match!
INFO  build: running step process duration 691.372µs
INFO  build: running step assemble duration 190ns
INFO  build: running step render duration 996.592µs
INFO  build: running step postProcess duration 85.573µs
Total in 2 ms

But no changes flow on to the rendered site until I save the shortcode html.