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

support
1

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?

2

I’m pretty sure this is a known issue:

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

3

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.

4

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

1 Like
5

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.

6

Looks like this is fixed by updating to v0.123.6. Also noticed that I don’t need the cachebuster business but do need

[module]
[[module.mounts]]
source = "assets"
target = "assets"
[[module.mounts]]
source = "hugo_stats.json"
target = "assets/watching/hugo_stats.json"

in hugo.toml.

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.