Deploying a Hyvä Theme to Production
In production, a pre-built styles.css file is required, unlike development mode's on-the-fly CSS generation. This guide covers the standard deployment workflow.
For platform-specific instructions, see Adobe Commerce Cloud Deployment or Capistrano Deployment.
Build Environment Recommendations
Always build the production stylesheet in a development, staging, or CI/CD environment, not directly on the production server. Installing Node.js and build tools on production servers poses unnecessary security risks.
For automated CI/CD pipelines, use npm ci instead of npm install for reproducible builds. npm ci installs exact package versions from package-lock.json, preventing unexpected upgrades from npm install.
Step 1: Generate the Production Stylesheet
Generate the minified production stylesheet (web/css/styles.css) by running the Tailwind build command from your theme's web/tailwind directory:
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 to copy the generated stylesheet and other theme assets to the pub/static directory. This moves web/css/styles.css to pub/static/frontend/Your/theme/{locale}/css/styles.css for production use:
Optimizing Static Content Deployment
Hyvä themes don't require LESS compilation, JavaScript bundling, or HTML minification. Disabling these features significantly reduces deployment time. The example below deploys the admin theme for en_US, then the frontend theme for multiple locales with these optimizations:
# 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 preferred deployment method (rsync, SCP, CI/CD, etc.).
After deployment, visitors will see your updated Hyvä theme with the production-optimized stylesheet.