FixNBlog

Hyvä theme deployment in Adobe Commerce Cloud can present challenges, particularly when managing the hyva-themes.json file during the build process. This guide provides solutions to resolve common deployment issues and ensure a seamless experience when working with Hyvä themes.

Managing app/etc/hyva-themes.json in Adobe Commerce Cloud Projects

A common question from developers working with Hyvä Themes on Adobe Commerce Cloud projects is whether to commit the app/etc/hyva-themes.json file into the repository. This issue arises because, by default, the build process does not generate this file early enough for it to be used during deployment.

The Problem

Following the official Hyvä documentation, the build process typically runs a setup:upgrade command toward the end, which means that the app/etc/hyva-themes.json file doesn’t yet exist when needed. Additionally, at this stage of deployment, only core Magento commands can be run, so the bin/magento hyva:config:generate command cannot be executed at this point either.

Without the hyva-themes.json file, certain features or functionalities of Hyvä might not work as expected during deployment.

Default Build Instructions

The instructions from the documentation include running several commands during the build process:

hooks:
  # Build hooks run before your application is packaged.
  build: |
    set -e
    composer --no-ansi --no-interaction install --no-progress --prefer-dist --optimize-autoloader --no-dev
    unset NPM_CONFIG_PREFIX
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
    nvm install 18.17
    mkdir -p app/design/frontend/Vendor/theme/web/css/
    npm --prefix app/design/frontend/Vendor/theme/web/tailwind/ install
    npm --prefix app/design/frontend/Vendor/theme/web/tailwind/ run build-prod
    rm -rf app/design/frontend/Vendor/theme/web/tailwind/node_modules/
    rm -rf ~/.nvm/
    php ./vendor/bin/ece-tools run scenario/build/generate.xml
    php ./vendor/bin/ece-tools run scenario/build/transfer.xml
  deploy: |
    php ./vendor/bin/ece-tools run scenario/deploy.xml
  post_deploy: |
    php ./vendor/bin/ece-tools run scenario/post-deploy.xml

These instructions, however, don’t handle the generation of the app/etc/hyva-themes.json file before it’s required.

Workarounds

To resolve this issue, you have two options:

1. Commit the app/etc/hyva-themes.json file to the repo:
   This approach ensures that the file is always present in the deployment environment. However, this file might change, and committing it to the repo could lead to unnecessary noise or conflicts when it is updated.
2. Temporarily disable and re-enable Hyvä_Theme during the build:
   A more dynamic solution is to modify the build hook by disabling and re-enabling the Hyvä_Theme module during the build process. This ensures that the app/etc/hyva-themes.json file gets generated on the fly. You can achieve this by adding the following lines after the composer command in your build process:

bin/magento module:disable Hyva_Theme && bin/magento module:enable Hyva_Theme

This forces the system to regenerate the hyva-themes.json file before proceeding with the rest of the deployment process, avoiding the need to commit the file to version control.

Conclusion

Both approaches are valid, but dynamically handling the generation of the app/etc/hyva-themes.json file by temporarily disabling and enabling the Hyvä theme module seems to be the more flexible and maintainable solution for Adobe Commerce Cloud projects. This method allows the build process to proceed without manual intervention and ensures the correct file is generated at the appropriate time.

By making this small adjustment, you can resolve the issue of the missing app/etc/hyva-themes.json file and ensure a smooth Hyvä theme deployment.

Transform and Elevate Your Store’s Design: Override Luma Checkout Styles in the Hyvä Theme