What Is Client Extension & How We Can Use?

Introduction:

A Client Extension is a way to add new features or customize existing ones in our Liferay site without modifying the core code. Think of it like adding apps or plugins to our smartphone to give it new capabilities.Client Extensions are a powerful way to customize and extend our Liferay site safely and flexibly. By keeping our customizations separate from the core code, We can easily manage updates and maintain our site.

Prerequisites:

• Liferay

Key Feature Of Client Extension:

1. Modular Architecture:

Client Extensions are designed as independent modules that we can add to our Liferay site.

• • Separation of Concerns: Each extension is isolated, so it only focuses on a specific feature or functionality. 
  • Easy Management: We can update, test, or remove extensions without affecting the rest of the site. 
  • Scalability: We can build and deploy new features as separate modules, making our site more flexible and easier to scale.

Example: Imagine we have an online store. We can add a Client extension that handles a new payment method without touching the existing payment system.

2. Decoupled from Core:

Client Extensions operate independently of Liferay’s core codebase.

• • Safe Updates: We can update Liferay to the latest version without worrying about breaking our custom functionalities. 
  • Stable Customizations: Our customizations remain intact and functional even when the core platform changes. 
  • Less Risk: Reduced risk of conflicts or errors since extensions don’t modify core files.

Example: We add a custom search widget to our site as a Client Extension. When we upgrade Liferay, the core search functionality updates, but our custom widget remains unaffected and continues to work.

3. Security

Client Extensions follow best practices for security and run in isolated contexts. 

• • Protection: Keeps the core system secure and reduces the risk of vulnerabilities. 
  • Isolated Environment: Even if one extension has an issue, it doesn’t compromise the entire system.
  • Controlled Access: Extensions can be granted specific permissions, limiting their access to only what they need.

Example: A custom extension that handles sensitive user data can be designed to have limited access, ensuring that other parts of the system remain secure.

Types of Client Extensions:

1. Frontend Client Extensions

Frontend client extensions are custom components or user interface elements that we can integrate into our Liferay.

2. Batch Client Extensions

Batch client extensions handle large-scale data processing tasks that can be scheduled and run periodically within the Liferay platform.

Batch client extensions provide data entities to our Liferay instance, such as object definitions or workflow definitions. Create batch client extensions by exporting data via the batch engine framework.

3. Configuration Client Extensions 

Configuration client extensions provide a way to manage and customize various settings and configurations within the Liferay platform.

4. Microservice Client Extensions

Microservice client extensions are independent services that perform specific tasks and communicate with the Liferay platform through APIs

Steps to create a custom client extension:

1. Create a client extension directory.
2. Create client-extension.yaml file.
3. Create package.json and webpack.config.js. 
4. Enter the code in the assets folder.
5. Deploy client extension.

STEP 1: Create a client extension directory.Open the codebase and create a folder named client-extensions.

				
					assemble:
    - from: build/static
      into: static
liferay-custom-element:
    friendlyURLMapping: vanilla-counter
    htmlElementName: vanilla-counter
    instanceable: false
    name: Liferay Custom Element
    portletCategoryName: category.client-extensions
    type: customElement
    urls:
        - index.*.js
    useESM: false

				
			

				
					{
	"devDependencies": {
		"css-loader": "6.10.0",
		"style-loader": "3.3.4",
		"webpack": "5.90.1",
		"webpack-cli": "5.1.4"
	},
	"name": "@liferay/liferay-custom-element",
	"private": true,
	"scripts": {
		"build": "webpack"
	},
	"version": "0.0.0"
}




				
			

				
					webpack.config.js

const path = require('path');
const webpack = require('webpack');

const DEVELOPMENT = process.env.NODE_ENV === 'development';

module.exports = {
	devtool: DEVELOPMENT ? 'source-map' : false,
	entry: {
		index: './assets/index.js',
	},
	mode: DEVELOPMENT ? 'development' : 'production',
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: ['style-loader', 'css-loader'],
			},
		],
	},
	optimization: {
		minimize: !DEVELOPMENT,
	},
	output: {
		clean: true,
		filename: '[name].[contenthash].js',
		path: path.resolve('build', 'static'),
	},
	plugins: [
		new webpack.optimize.LimitChunkCountPlugin({
			maxChunks: 1,
		}),
	],
};


				
			

				
					index.js

import './style.css';
(function () {

	class VanillaCounter extends HTMLElement {
		constructor() {
			super();

			const shadow = this.attachShadow({ mode: 'open' });
            const message = document.createElement('div');
            message.textContent = 'Hello Liferay Users :)';
            shadow.appendChild(message);
		}
	}
	customElements.define('vanilla-counter', VanillaCounter);
})();




				
			

				
					style.css
vanilla-counter {
	background-color: #f3e5ab;
	display: block;
	padding: 10px;
}