Zola build and uglifyjs, help with netlify.toml please

I created the Abridge theme for Zola. (static site generator) The demo site is here: https://abridge.netlify.app/

I just recently created a feature that makes it so that the search index only gets downloaded if the user interacts with the search box, this essentially makes the index of the site 77% smaller or more depending on number of posts.

The problem is that Zola does not have any facilities to bundle js files together, so I am needing to handle this myself.

Here is my current netlify.toml for the abridge theme:

[build]
publish = "public"
command = "zola build"

[build.environment]
ZOLA_VERSION = "0.16.0"

[context.deploy-preview]
command = "zola build --base-url $DEPLOY_PRIME_URL"

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    X-XSS-Protection = "1; mode=block"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Strict-Transport-Security = "max-age=63072000; includeSubdomains"
    Content-Security-Policy = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; script-src 'self'; img-src 'self' data: cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' 'unsafe-inline' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;"

What I am needing now instead is the equivalent of:

zola build
uglifyjs public/search_index.en.js public/elasticlunr.min.js public/search.js -o static/search_bundle.min.js -c -m
zola build

the first zola build is simply to generate a current search_index.en.js, then I issue uglifyjs to bundle these 3 files into a single search bundle, then issue another zola build to deploy with the search bundle

ALSO! if anyone knows how to accomplish this without running zola build twice then please let me know. (maybe a way to generate the elasticlunr index without using zola build?)

The branch that handles this new feature is here https://github.com/Jieiku/abridge/tree/search_facade

and the issue where it is tracked is here Create a Facade for the search. Β· Issue #81 Β· Jieiku/abridge Β· GitHub

I really appreciate any help I can get with this!

Hey @jieiku,

Having zero Zola experience or a lot of users who use Zola on Netlify (maybe they do, but Support doesn’t get a lot of cases), would only make this difficult for us to help with. Also, this appears to be more of help with custom code and setup, than Netlify, which is outside our scope of support.

I don’t know why you need the final zola build. The output path of the final JS file is supposed to be known before-hand, right? Is it not possible to hardcode that path and then simply output the file at that path in the publish directory?

1 Like

Actually this can all be boiled down to a simple question.

How do I issue uglifyjs from netlify.toml? OR are there any example netlify.toml files that use uglifyjs?

ALSO I think your right about not needing the final zola build, going to give that a try.

Oh, so you just want to run all those command together using netlify.toml?

It would be something simple as:

[build]
command = "zola build && uglifyjs public/search_index.en.js public/elasticlunr.min.js public/search.js -o static/search_bundle.min.js -c -m && zola build"

If this is not what you’re looking for, let us know.

1 Like

I thought that it worked but I seem to be running into issues, part of the build log:

10:51:38 AM: ────────────────────────────────────────────────────────────────
10:51:38 AM:   1. build.command from netlify.toml                            
10:51:38 AM: ────────────────────────────────────────────────────────────────
10:51:38 AM: ​
10:51:38 AM: $ zola build && uglifyjs public/search_index.en.js public/elasticlunr.min.js public/search.js -o static/search_bundle.min.js -c -m
10:51:38 AM: Building site...
10:51:38 AM: Checking all internal links with anchors.
10:51:38 AM: > Successfully checked 1 internal link(s) with anchors.
10:51:38 AM: -> Creating 11 pages (0 orphan) and 2 sections
10:51:39 AM: Done in 1.2s.
10:51:39 AM: bash: uglifyjs: command not found
10:51:39 AM: ​
10:51:39 AM: ────────────────────────────────────────────────────────────────
10:51:39 AM:   "build.command" failed                                        
10:51:39 AM: ────────────────────────────────────────────────────────────────
10:51:39 AM: ​
10:51:39 AM:   Error message
10:51:39 AM:   Command failed with exit code 127: zola build && uglifyjs public/search_index.en.js public/elasticlunr.min.js public/search.js -o static/search_bundle.min.js -c -m (https://ntl.fyi/exit-code-127)
10:51:39 AM: ​
10:51:39 AM:   Error location
10:51:39 AM:   In build.command from netlify.toml:
10:51:39 AM:   zola build && uglifyjs public/search_index.en.js public/elasticlunr.min.js public/search.js -o static/search_bundle.min.js -c -m
10:51:39 AM: ​
10:51:39 AM:   Resolved config
10:51:39 AM:   build:
10:51:39 AM:     command: zola build && uglifyjs public/search_index.en.js public/elasticlunr.min.js public/search.js -o static/search_bundle.min.js -c -m
10:51:39 AM:     commandOrigin: config
10:51:39 AM:     environment:
10:51:39 AM:       - ZOLA_VERSION
10:51:39 AM:     publish: /opt/build/repo/public
10:51:39 AM:     publishOrigin: config
10:51:39 AM:   headers:
10:51:40 AM:     - for: /*
      values:
        Content-Security-Policy: 'default-src ''none''; frame-ancestors ''none''; object-src ''none''; base-uri ''self''; manifest-src ''self''; connect-src ''self''; form-action ''self''; script-src ''self''; img-src ''self'' data: cdn.cloudflare.com; frame-src ''self'' www.youtube-nocookie.com player.vimeo.com; media-src ''self'' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src ''self'' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src ''self'' ''unsafe-inline'' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;'
        Referrer-Policy: strict-origin-when-cross-origin
        Strict-Transport-Security: max-age=63072000; includeSubdomains
        X-Content-Type-Options: nosniff
        X-Frame-Options: DENY
        X-XSS-Protection: 1; mode=block
  headersOrigin: config
Caching artifacts

Thanks for the help hrishikesh, I do appreciate it.

Apparently uglifyjs cannot be ran directly so I used the following package.json and netlify.toml files to automatically handle the minification and bundling of the search related javascript files.

Thanks for coming back and sharing that solution! This will definitely help future Forums members who encounter something similar.