Pearl theme on Cloud
Answered
It seems like the Pearl theme is not compatible with Commerce Cloud from Magento.
When you push to cloud it executes a series of build scripts. This includes generating and gzipping CSS files. Unfortunately, I don't see any way to add the additional weltpixel scripts into the process:
Even if I add them to the build in .magento.app.yaml it does not grab any variables defined in the database (WeltPixel -> Frontend Options). As a result I am forced to SSH after every push to delete the existing css files and regenerate everything from scratch. This slows down our launches significantly.
Has anyone found a workaround for this issue? Is it possible to move these variables from the admin into the CSS? Or is Pearl just not compatible with cloud?
-
Official comment
Hi,
After deploy, go to System -> Cache Management and
1. Regenerate Pearl Theme LESS/CSS
2. Clear Magento Cache.
No need to do it via SSH as you can easily do it from Admin Cache Management.
Update:
By adding the LESS/CSS commands in .magento.app.yaml file, this process is automatically executed with each deploy. Please find below deploy hook structure of .magento.app.yaml file.
# The hooks executed at various points in the lifecycle of the application.
hooks:
# We run build hooks before your application has been packaged.
build: |
php ./bin/magento magento-cloud:build
# We run deploy hook after your application has been deployed and started.
deploy: |
php ./vendor/magento/magento-cloud-configuration/pre-deploy.php
php ./bin/magento magento-cloud:deploy
php ./bin/magento weltpixel:less:generate
php ./bin/magento weltpixel:css:generate --store=default
[Solved] Later edit: @James, we managed to replicate the gzip issue on Magento Cloud Hosting and included the fix starting with Pearl Theme release 1.6.1 (March 23, 2018)
Now you should be able to regenerate the files even if the css files are compressed with gzip( css.gz).
[Solved] Later Edit 2: Static Content Symlinks if enabled, will cause write limitations, check article below on how to overcome this.
Comment actions -
If only it were that easy. The magento build creates GZIP versions of static files to improve performance. So even if you click "Regenerate", the servers just send the GZIP versions. So you have to manually delete those to get the updates to show up.
The ideal would be to have the Pearl steps execute during the build script, before all the static files are generated and gzipped. Trying to do that however, it seems that some of the admin(database) config isn't being pulled in properly. I wish there was a way to export that config into a .less variables file so I can just add it to our scripts and save all these extra steps.
Pearl's approach seems like a good one, it just doesn't seem to work well with commerce cloud.
-
We successfully verified both scenarios on Magento Cloud Edition with Pearl Theme and was not able to replicate reported issue. We had no restrictions on generating LESS/CSS from admin. Also, by adding the LESS/CSS commands in .magento.app.yaml file, this process is automatically executed with each deploy. Please find below deploy hook structure of .magento.app.yaml file.
# The hooks executed at various points in the lifecycle of the application.
hooks:
# We run build hooks before your application has been packaged.
build: |
php ./bin/magento magento-cloud:build
# We run deploy hook after your application has been deployed and started.
deploy: |
php ./vendor/magento/magento-cloud-configuration/pre-deploy.php
php ./bin/magento magento-cloud:deploy
php ./bin/magento weltpixel:less:generate
php ./bin/magento weltpixel:css:generate --store=default
Try installing Pearl Theme on a new test branch with default Cloud settings and verify the LESS/CSS generation. Start adding the custom 3rd party modules and services one by one, at some point most probably one of them is altering the way LESS/CSS files are generated. Once you identify the specific module or configuration please provide more details on this topic to be able to further investigate.
-
I can also report that this is an issue that I am experiencing. The main problem that happens specifically with the pipeline deployment that gets introduced in magento 2.2 is during the static content deploy during the build phase all of the sub directories including frontend/Pearl are non writable by the magento user. So when the the css generate command is run it will throw a permissions a error saying it cannot write to those folders. Also this is on a magento cloud pro plan with a multi server setup. Here are the errors that happen during the deployment process:
[2018-02-15 02:16:15] INFO: Deployment completed.
Started Less Generation:
...
WeltPixel_FrontendOptions module less was generated successfully.
WeltPixel_CustomFooter module less was generated successfully.
WeltPixel_CustomHeader module less was generated successfully.
WeltPixel_CategoryPage module less was generated successfully.
WeltPixel_ProductPage module less was generated successfully.
Finished Less Generation.
Css generation started.
[Magento\Framework\Exception\FileSystemException]
Directory "/app/7alebf6ygqtlm/pub/static/frontend/Pearl/weltpixel_ironman" cannot be created Warning!mkdir(): Read-only file system
weltpixel:css:generate [--store STORE]
-
Let me be clear. The less and css generation will work properly if I move the css and less generation to the deployment process or if I were to just ssh in and generate them again on the server, however moving the static content deploy to the deploy process will cause 20-30 minutes of downtime per deployment. So thats not ideal
-
@Jordan Schinella
One solution is to add the already generated less/css files directly to git and push them to production (generate the files on a local installation). This way you can skip the less/css generation step in Magento Cloud as the generated files will be already part of you project and processed during build step.
The LESS files generated on the fly that you can commit to github are located at below locations:
app/code/WeltPixel/CustomFooter/view/frontend/web/css/weltpixel_custom_footer_STORECODE.less
app/code/WeltPixel/CustomHeader/view/frontend/web/css/weltpixel_custom_header_STORECODE.less
app/code/WeltPixel/FrontendOptions/view/frontend/web/css/source/module/ <-- all contents of this directory
app/code/WeltPixel/FrontendOptions/view/frontend/web/css/source/_extend.less
app/code/WeltPixel/CategoryPage/view/frontend/web/css/weltpixel_category_store_STORECODE.less
app/code/WeltPixel/ProductPage/view/frontend/web/css/source/_module.less
app/code/WeltPixel/ProductPage/view/frontend/web/css/weltpixel_product_store_STORECODE.lessIf you have multiple store views, you will have a specific less files for each store code so make sure to commit them all.
Please sign in to leave a comment.
Comments
7 comments