[ Front-end Client Extension ] - How to automate deployments for Remote Apps in On-premises

You should be aware of the benefits of using client extension and maybe you already started using it (if don't, you should do it) your project is not an LXC (SaaS) and you would like to avoid the need to configure it from the UI manually for all environments, this blog post is for you!

Who is using remote apps in an On-premise environment, a proposed solution to automate the deployment.

When we think about using remote apps or any other client extension they should be hosted in a different server from your Liferay Portal; deploying in LXC any client extension, this happens totally transparent you don't need to worry about it, but when we bring this scenario to an On-premises installation, the external server with the remote application has different URL agreed on the remote environment like DEV, UAT, PROD … thinking on that I thought it would be helpful write this blog post with a possible solution:

1) Start creating an OSGi config file for each remote application with the following pattern: 

  • com.liferay.client.extension.type.configuration.CETConfiguration_[REMOTE_APP_NAME].config

The content of the config file must follow the pattern sample below, where the most important point out here is the baseURL="$[env:REMOTE_DOMAIN]"
 

Item

Description

baseURL

A variable indicating the base URL of the application, configured through the REMOTE_DOMAIN environment variable.

name

Name of the remote application.

type

As this sample is for Remote App, the type should be always configured as "customElement" 

typeSettings

Additional settings for the custom element type.

 

This file property comes from CETConfiguration plus CustomElementCET.

 

As a result, the file should look like this:

baseURL="$[env:APP_DOMAIN]"
dxp.lxc.liferay.com.virtualInstanceId="default"
name="Remote\ App\ New"
type="customElement"
typeSettings=[
  "friendlyURLMapping=null",
  "instanceable=false",
  "urls=/remote-app-new/index.js",
  "useESM=true",
  "htmlElementName=remote-app-new",
  "cssURLs=/remote-app-new/index.css\n/remote-app-new/css/fonts.css",
  "portletCategoryName=category.remote-apps"
]

 

For all remote environments running Liferay Portal, create the REMOTE_DOMAIN environment variable with the proper remote URL where your client extension is hosted (aka Remote Apps).

 

2) Save the new file in your Liferay Workspace in, the following folder:

  • configs  > configs > common

 

3) Once the deployment from Liferay Workspace is executed, the client extension configured in the OSGi config file will be deployed. Opening your Liferay Portal, you can validate on Control Panel Menu > Applications > Custom Apps > Client Extensions. 

The column configured will be shown as “Workspace” and from the UI you can’t edit to keep one source true, in this case, it will always be the OSGi config file coming from your Workspace.