Deploying a Hyvä Theme to Production
Deploying a Hyvä theme to production involves generating the minified Tailwind CSS stylesheet, running Magento's static content deployment, and transferring the compiled assets to your production server. Unlike development mode where CSS is generated on-the-fly, production mode requires a pre-built styles.css file.
This guide covers the standard deployment workflow. For platform-specific instructions, see Adobe Commerce Cloud Deployment or Capistrano Deployment.
Build Environment Recommendations
Generate the production stylesheet on a development, staging, or CI/CD build environment rather than on the production server. Installing Node.js and build tools on production servers introduces unnecessary security risk.
For automated CI/CD pipelines, use npm ci instead of npm install to ensure reproducible builds. The npm ci command installs the exact package versions specified in package-lock.json, while npm install may upgrade to newer compatible versions.
Step 1: Generate the Production Stylesheet
Run the Tailwind build command from your theme's web/tailwind directory to generate the minified production stylesheet at web/css/styles.css:
Alternatively, use the --prefix flag to run the build from the Magento root directory:
Build Command History
Hyvä versions 1.1.x used npm run build-prod. Current versions use npm run build.
Step 2: Deploy Static Content
Run Magento's static content deployment command to copy the generated stylesheet and other theme assets to the pub/static directory. This step copies web/css/styles.css to pub/static/frontend/Your/theme/{locale}/css/styles.css where browsers can load it in production mode:
Optimizing Static Content Deployment
Hyvä themes do not require LESS compilation, JavaScript bundling, or HTML minification. Disabling these features significantly reduces deployment time. The following example deploys the admin theme only for en_US, then deploys the frontend theme for multiple locales with unnecessary processing disabled:
# Deploy backend assets for en_US only
bin/magento setup:static-content:deploy -j 2 -f --no-parent --theme=Magento/backend en_US
# Deploy frontend theme for nl_NL and de_DE, skipping LESS and bundling
bin/magento setup:static-content:deploy -j 2 -f --area=frontend --no-parent --no-less --no-js-bundle --no-html-minify --theme=Vendor/theme nl_NL de_DE
Step 3: Transfer Assets to Production
Transfer the pub/static/ directory to your production server using your deployment method (rsync, SCP, CI/CD pipeline, etc.).
After deployment, visitors will see your updated Hyvä theme with the production-optimized stylesheet.