Available Liferay 7.4 U45+/GA45+
To start developing client extensions,
Install Java (JDK 8 or JDK 11).note
Check the compatibility matrix for supported JDKs, databases, and environments. See JVM Configuration for recommended JVM settings.
Download and unzip the sample workspace:
curl -o com.liferay.sample.workspace-latest.zip https://repository.liferay.com/nexus/service/local/artifact/maven/content\?r\=liferay-public-releases\&g\=com.liferay.workspace\&a\=com.liferay.sample.workspace\&\v\=LATEST\&p\=zip
All the necessary tools and a JS client extension are included in the sample workspace.
Examine the Client Extension
The JS client extension is in the workspace’s
client-extensions/sample-global-js/ folder. It’s defined in the
sample-global-js: name: Sample Global JS type: globalJS url: global.js
The client extension has the ID
sample-global-js and contains the key configurations for a JS client extension, including the
It also contains the
assemble: - from: assets include: "**/*" into: static
This specifies that everything in the
assets/ folder should be included as a static resource in the built client extension
assets/global.js file contains this line of code:
window.alert('Sample Global JS deployed.');
Deploy the Client Extension to Liferay
Start a new Liferay instance by running
docker run -it -m 8g -p 8080:8080 liferay/portal:18.104.22.168-ga75
Sign in to Liferay at http://localhost:8080. Use the email address [email protected] and the password test. When prompted, change the password to learn.
Once Liferay starts, run this command from the client extension’s folder in the sample workspace:
../../gradlew clean deploy -Ddeploy.docker.container.id=$(docker ps -lq)
This builds your client extension and deploys the zip to Liferay’s
To deploy your client extension to Liferay Experience Cloud, use the Liferay Cloud Command-Line Tool to run
To deploy all client extensions in the workspace simultaneously, run the command from the
Confirm the deployment in your Liferay instance’s console:
Once your client extension is deployed successfully, configure Liferay to use it.
Use the Client Extension on a Page
Configure a page in Liferay to use your deployed client extension:
On a page in your instance, click the Edit icon at the top.
In the sidebar, navigate to the Page Design Options menu (), and click the Configuration icon () at the top of the menu.
Now your client extension is configured and active. On the page you configured, you can see the alert window pop up with the client extension’s message.
If the alert window does not appear at first, do a hard refresh of the page to clear your browser’s cache (
CTRL + SHIFT + R for most browsers). If you change your client extension and redeploy it, you may need to remove it from the page and re-add it to see the changes.
You have successfully used a JS client extension in Liferay. Next, try deploying other client extension types.