Deploying a Custom Application

You can use a custom element client extension to render a JavaScript application as a widget on a Liferay site page. The application is served by Liferay and interacts with Liferay through headless APIs.

Deploy the liferay-ticket-custom-element client extension.

Run the following command:

./gradlew :client-extensions:liferay-ticket-custom-element:deploy

In Liferay, select the Product Menu () and navigate to Site Builder → Pages.
Click Add () and select Page.
Select the Blank type page. Give the page a name (e.g. ticketing system). Click Add.
In the left navigation under fragments and widgets, click the Widgets tab.
Scroll down to the client extension type widget. Drag the Liferay Ticket Custom Element widget to the page.
Click Publish.

The custom ticketing system application is now running on the site page.

The custom ticketing system application is now running.

Note, clicking the Generate a New Ticket button generates additional random ticket entries. You can also create your own ticket object entries from Control Panel → Tickets.

Examine the Custom Element Code

The assemble block section of the client-extension.yaml file looks like this:

assemble:
    - from: build/assets
      into: static

Note, the .js and .css build files of the JavaScript application are copied from the build/assets folder and placed into the deployable client extension .zip file.

This liferay-ticket-custom-element is a custom element type client extension. It is defined as follows in the client-extension.yaml file:

liferay-ticket-custom-element:
   cssURLs:
      - "*.css"
   friendlyURLMapping: current-tickets-custom-element
   htmlElementName: current-tickets-custom-element
   instanceable: false
   name: Current Tickets Custom Element
   portletCategoryName: category.client-extensions
   type: customElement
   urls:
      - "*.js"
   useESM: true

See Custom Element YAML Configuration Reference for an explanation of each property.

The relevant JavaScript files for the application are contained in the /src folder. A full explanation of the JavaScript code is beyond the scope of this tutorial, but there are a few things to note:

The /src/pages/TicketApp.tsx file defines the overall layout of the ticketing system page.
In the /src/services/tickets.ts file, tickets are created and fetched through the use of the j3y7ticket object that was created when the data schema was defined. Note the generateNewTicket() function in the /src/ticket.js file generates additional ticket entries with random field entries.
In the /src/services/tickets.ts file, the object’s headless API calls are authorized with the Liferay.authToken object. This object is available when a web component is running on Liferay and simplifies OAuth2 authorization.
The package.json file includes a scripts{ build: } element that handles the initializing and building of the JavaScript application.