Deployment with Loki

Deploying a Magento shop with LokiCheckout (or Loki-related modules in general) is not much different from a normal Magento deployment. On this page, some caveats are mentioned though.

Generic Magento deployment steps

This document assumes that you know how to run a Magento deployment properly: With as little human interaction and as little downtime as possible. In general, this boils down to:

• Running composer install based on the composer.lock file;
• Compiling DI-based code and deploying static files;
• Running database upgrade;
• Cleaning the cache;

Depending on your deployment strategy, the order and the number of steps will vary. We recommend you to use the magento2 recipee of Deployer, if you are looking for a proper deployment strategy.

Deployment with a Hyvä-based theme

With Hyvä-based themes, nothing changes in deployment. The Loki extensions hook into the Tailwind building mechanism of Hyvä. As long as the app/etc/hyva-themes.json file is up-to-date, the CSS classes specific by Loki extensions will be taken into account.

Deployment of a Luma-based theme

With Luma-based themes, you have two choices: You could either use Tailwind (on top of your regular CSS build) which is the default. Or you could drop the Tailwind classes and style everything yourself using your own mechanism (LESS, SASS, you name it).

In the first case, Loki has created its own Tailwind build mechanism that relies upon a app/etc/loki-checkout.json file that needs to be up-to-date. This is usually done by running the following command:

bin/magento loki-checkout:modules:dump

Next, the Tailwind build also needs to be run:

cd vendor/loki-checkout/magento2-luma/view/frontend/tailwind/
echo magentoRoot=/var/www/html > config.ini
npm ci
npm run build

Note that the config.ini file contains a magentoRoot variable that needs to refer to the right Magento root.

Deployment of a Luma-based theme, based on DeployerPHP

To ease deployment, Deployer allows for creating a custom deploy.php file in the root of your Magento project, which then contains all of the relevant steps from the magento2 recipee. We assume you have already setup such a deployment file.

To make sure that the Tailwind sources are built, before deploying static files, we can add a new task loki:build:luma and run it right before magento:deploy:assets:

before('magento:deploy:assets', 'loki:build:luma');

The task itself is defined as follows (and note that the Magento root is cleverly based upon the Deployer variable ):

task('loki:build:luma', function () {
    desc('Build Tailwind sources for Luma');
    cd('');
    run("bin/magento loki-checkout:modules:dump");
    run("cd vendor/loki-checkout/magento2-luma/view/frontend/tailwind/ && echo magentoRoot= > config.ini && npm ci && npm run build");
});

Moving the Tailwind build to your own Luma-based theme

Note that you might also move the CSS build to your own Luma-based theme. For this, create a new folder LokiCheckout_Luma/tailwind/ and copy the sources from vendor/loki-checkout/magento2-luma/view/frontend/tailwind/* to it. Also create a folder LokiCheckout_Luma/web/css/ for outputting things.

For instance, if your theme is named Example/default, the following steps should get you started:

cd app/design/frontend/Example/default/
mkdir -p LokiCheckout_Luma/tailwind/
mkdir -p LokiCheckout_Luma/web/css/
cp -R ../../../../../vendor/loki-checkout/magento2-luma/view/frontend/tailwind/* LokiCheckout_Luma/tailwind/

Next, the NPM build should be run from LokiCheckout_Luma/tailwind/.