Liferay 7 theme hot deploy

Question

I have created a theme using Blade CLI as stated here https://dev.liferay.com/ja/develop/reference/-/knowledge_base/7-0/theme-template. The project is thus using Gradle and when built it generates a war file which I can copy in the deploy folder in liferay.

Is there a way in liferay 7 that when I change a static resource like a css file, the change is seen almost immediately when developing?

A solution I found was to create everytime a new theme war file and deploy it in liferay but set liferay to be in development mode as stated here https://dev.liferay.com/ja/develop/tutorials/-/knowledge_base/7-0/using-developer-mode-with-themes. This would take too much time to be an acceptable solution.

I was thinking of creating a gradle task that copies any static file that has changed to a particular folder in liferay. Then when the page is refresh the change is caught. The problem is that liferay 7 comes with OSGi and there's nothing under tomcat/webapps except ROOT. I don't really understand how the template files are now served using OSGi.

If I can't achieve this using a liferay theme, is there a solution for liferay 7 mvc portlets? I might have js or css files there also.

Can someone point me in the right direction or at least tell me if what I'd like can be done. Thanks

Answer 1

When using the watch task of Liferay Theme Tasks, it uses an OSGi/GoGo interface to deploy your theme, using your local working copy's build folder as the source.

When you make a change, the watch task restarts the OSGi module. It takes maybe 3 secs for your changes to appear.

I imagine something similar could be done with Gradle.

Answer 2

Liferay cache all theme's css files, sometimes even after deploys. This cache is stored in two places:

[liferay-home]/tomcat-8.0.32/work/Catalina/localhost/ROOT/css/http_/o/custom-theme-or-portlet

[liferay-home]/work/custom-portlet

My develop environment is remote, so I create a gradle task to delete that folders before every new deploy. I'm using the SSH gradle plugin to deploy and I create a build.gradle in theme project, by example:

task buildThemeByGulp(type:Exec) {
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine 'cmd', '/c', 'gulp_build.bat'
    }else{
        commandLine './gulp_build.sh'
    }
}

task deployToServerDev {
    doFirst {
        println 'Executing gulp build process.'
    }
    doLast {
        ssh.run {
            session(remotes.developServer) {
                put from: "${cetelemProjectHome}/themes/cetelem-web-theme/dist/cetelem-web-theme.war", into: "/app/liferay-dxp-digital-enterprise-7.0-sp1/deploy"
            }
        }
    }
}

task removeServerCache {
    doLast {
        println 'Removing cache folders in server'
        ssh.run {
            session(remotes.developServer) {
                execute 'rm -rf /app/liferay-dxp-digital-enterprise-7.0-sp1/tomcat-8.0.32/work/Catalina/localhost/ROOT/css/http_/o/cetelem-web-theme'
                execute 'rm -rf /app/liferay-dxp-digital-enterprise-7.0-sp1/work/com.cetelem.web.searcher.portlet-1.0.0'
            }
        }
    }
}

deployToServerDev.dependsOn getTasksByName('removeServerCache',true)
deployToServerDev.dependsOn getTasksByName('buildThemeByGulp',false)

If you environment is local is more easy yet. You would to adapt the gradle tasks. Its important to create this two files inside the theme root folder:

(if you have a unix so) gulp_build.sh:

#!/usr/bin/env bash
gulp clean
gulp build

(if you have windows) gulp_build.bat:

@echo off

gulp build

exit

Finally you execute blade gw deployToServerDev (or gradle deployToServerDev) and the workflow will be the next:

1. Execute removeServerCache task removing the theme static file cache.
2. Execute buildThemeByGulp task executing the gulp clean and the gulp build tasks (generating the war).
3. Deploy war file to deploy liferay folder.

Answer 3

Execute gulp watch command on your theme directory on command prompt.

I hope this will help you .