How to use Baler for JS bundling on Magento Cloud?

Question

Baler is great for JS bundling comparing to default JS bundling.

It's hard to apply it to a Magento Cloud instance as Magento Cloud is a read-only system. So we can't run npm command directly via SSH access following their document

Is there a way to apply Baler to a Magento Cloud instance?

Thanks

Answer 1

I was able to install Baler on Magento Cloud for my client.

All we need to do is to update the build hook in .magento.app.yaml. Below is the detail for the steps that I did:

1. Upgrade node to version 14.4.0 by updating the build hook before the static is generated in .magento.app.yaml

   unset NPM_CONFIG_PREFIX

   curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | dash

   export NVM_DIR="$HOME/.nvm"

   [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

   nvm current

   nvm install 14.4.0

2. Install AMD baler module following their doc before the static is generated in .magento.app.yaml

   git clone https://github.com/magento/baler.git

   cd baler

   npm install

   npm test

   npm run build

   npm link

   cd ..

3. Run baler command after the static is generated in .magento.app.yaml

4. Minify JS files using Terser after Baler is run after the static is generated in .magento.app.yaml

   npm install -g terser

   find 'pub/static/frontend/Magento/luma' \( -name '.js' -not -name '.min.js' -not -name 'core-bundle.js' -not -name 'requirejs-bundle-config.js' \) -exec terser \{\} -c -m reserved=['$','jQuery','define','require','exports'] -o \{\} \;

5. Install module Magento_Baler

6. Disable default JS minification, JS merging, JS bundling and enable Baler JS bundling by updating app/etc/config.php

7. Commit everything and do a git push.

See the final build hook in the following link https://gist.github.com/toan-tam/a5bd795f846fb1243f096648f5bce4f9

Note:

• Remember to replace your theme location in the pub folder in step #4
• If you have issues with the steps above, try to apply them one by one and then do a git push to confirm which step is broken and then fix it.

Reference doc:

• https://github.com/magento/baler/blob/master/docs/ALPHA.md
• https://www.integer-net.com/magento-2-javascript-bundling-baler-devtools/