How do you build your JavaScript assets?

Support
1

Hi everyone,

I’m migrating my website to Zola, and really enjoying the experience so far. My question is, how are people building their JavaScript assets?

I’ve cobbled together a workflow for development where I’m using esbuild to watch the source file. On a detected change it builds and copies the JavaScript to the static folder. Zola then rebuilds the site.

Is this the approach to use, or is there is a more elegant solution?

Additionally, in my shortcode to include the JavaScript (I only need the code on a specific page) I’m using an environment variable to determine if this is a production build or not. For example:

{% if get_env(name="zola_environment", default="dev") == "prod" %}
<script type="text/javascript" defer src="{{ get_url(path='js/thread-stash.min.js', trailing_slash=false) | safe }}" integrity="sha384-{{ get_hash(path='js/thread-stash.min.js', sha_type=384, base64=true) | safe }}"></script>
{% else %}
<script type="text/javascript" defer src="{{ get_url(path='js/thread-stash.js', trailing_slash=false) | safe }}"></script>
{% endif %}

Is this the recommended approach?

Any thoughts are most welcome.

2

You can also check the value of config.mode for that purpose, like this:

{%- if config.mode == “serve” %}
1 Like
3

Thank you @tad-lispy, using config.mode is a much cleaner solution than an external environment variable.