Installing Hyvä CMS

Hyvä Commerce is an 'Early Access' product currently under development.

Early Access means that not all features of Hyvä Commerce are fully completed or released, and many areas are still under heavy development and may change. However, it means you can get your hands on everything currently available and being worked on, with a license. Find out more on our Early Access page.

Prerequisites

See Hyvä Commerce Prerequisites.

Installation

Installation via Hyvä Commerce Metapackage Recommended

The below steps are for installing Hyvä CMS only. While this is supported to provide greater flexibility and control over installed features, in most cases, we recommend installing all Hyvä Commerce features using our metapackage.

With a License Key

1. Require the hyva-themes/commerce-module-cms package

composer require hyva-themes/commerce-module-cms

1. Run bin/magento setup:upgrade

2. Run tailwind to generate storefront styles, replacing vendor/hyva-themes/magento2-default-theme/web/tailwind/ with the path to your theme's web/tailwind folder:

   bin/magento hyva:config:generate
   npm --prefix vendor/hyva-themes/magento2-default-theme/web/tailwind/ ci
   npm --prefix vendor/hyva-themes/magento2-default-theme/web/tailwind/ run build-prod
   

For Agency and Technology Partners

If you have access to the Hyvä Commerce GitLab repositories as Gold/Platinum Agency Partner, or a Technology Partner, you can install Hyvä Commerce in development environments using SSH key authentication.

You can configure the git repositories in your root composer.json and use the repositories directly as git repo's beneath your vendor directory. You can check out tags and branches, make commits and push contributions.

This installation method is not suited for deployments, because GitLab requires SSH key authorization.

1. Ensure your public SSH key is added to your account on gitlab.hyva.io.

2. Set minimum-stability to dev in the Magento composer.json

   composer config minimum-stability dev
   

3. Add the Hyvä CMS and base Hyvä Commerce module repositories to the Magento composer.json

   composer config repositories.hyva-themes/commerce-module-commerce git git@gitlab.hyva.io:hyva-commerce/module-commerce.git
   composer config repositories.hyva-themes/commerce-module-cms git git@gitlab.hyva.io:hyva-commerce/module-cms.git
   

4. Require the hyva-themes/commerce-module-cms packages using the dev-main branch version:

   composer require --prefer-source 'hyva-themes/commerce-module-cms:dev-main'
   

5. Run bin/magento setup:upgrade

6. Run tailwind to generate storefront styles, replacing vendor/hyva-themes/magento2-default-theme/web/tailwind/ with the path to your theme's web/tailwind folder:

   bin/magento hyva:config:generate
   npm --prefix vendor/hyva-themes/magento2-default-theme/web/tailwind/ ci
   npm --prefix vendor/hyva-themes/magento2-default-theme/web/tailwind/ run build-prod
   

Additional Configuration

Multi-Store Setup

When using Hyvä CMS Liveview Editor with multiple storefronts on different domains, browsers block iframes by default. Since the editor loads storefront previews inside the Magento admin, you must securely allow embedding within the admin domain for it to work properly.

To ensure proper iframe functionality across domains, configure the Content Security Policy (CSP) frame-ancestors directive to permit the admin domain.

1. Enable CSP Restrict Mode in the admin area.
   Add or update the following configuration in config.xml (or to app/etc/env.php):

   <?xml version="1.0"?>
   <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
       <default>
           <csp>
               <mode>
                   <storefront>
                       <report_only>0</report_only>
                   </storefront>
               </mode>
           </csp>
       </default>
   </config>
   

2. Add or update the CSP Whitelist Rules
   In a csp_whitelist.xml file add the following:

   <?xml version="1.0"?>
   <csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
       <policies>
           <policy id="frame-ancestors">
               <values>
                   <value id="magento-admin-domain" type="host">your-admin-domain.com</value>
                   <value id="self" type="host">self</value>
                   <value id="https" type="host">https:</value>
               </values>
           </policy>
       </policies>
   </csp_whitelist>