Mastering Liferay Workspaces and Tooling

Course Overview

Creating a Client Extension for Clarity

Clarity wants to test out the client extension workflow as a proof of concept. They have decided to deploy one of the frontend client extensions provided in the Liferay sample workspace. In these exercises, you’ll add a CSS client extension to your local workspace and then deploy it to your Liferay DXP instance. For more information on specific client extensions, you can access the client extension reference here

Exercise: Creating a Client Extension

  1. Create a client-extensions folder inside your local Liferay workspace, if it doesn’t already exist.
  2. Navigate out of your workspace to a suitable root directory.
  3. Clone the Liferay Portal GitHub repository onto your machine through GitHub's user interface.
  4. In the cloned repository, navigate to the client extensions folder in the sample workspace: 
    liferay-portal/workspaces/sample-workspace/client-extensions
    
  5. Find the client extension project folder named liferay-sample-global-css.
  6. Copy this folder into your workspace’s client-extensions folder from Step 1.
  7. Inside the liferay-sample-global-css project folder, find the client-extension.yaml file. Open it in Liferay Developer Studio or an editor of your choice.
  8. Edit the name field to Clarity Sample Client Extension.
  9. Save and close the file.
  10. Go to the assets folder and open the global.css file in the editor of your choice.
  11. Append the following code to the end of the file:
    a {
        font-weight: bolder;
    }
  12. Save and close the file.

You have successfully created a CSS client extension in Clarity’s workspace.

Exercise: Deploying the Client Extension

  1. Navigate to the client-extensions/liferay-sample-global-css directory in your Liferay workspace.
  2. In your command line, run the command blade gw deploy to execute the build and deployment task for the client extension.
  3. Look for the following message in your console to confirm that deployment was successful:
    Files of project ':client-extensions:liferay-sample-global-css' deployed to [LIFERAY_BUNDLE_HOME]/osgi/client-extensions
    You can also verify that the client extension files have been created by navigating to [LIFERAY_BUNDLE_HOME]/osgi/client-extensions
  4. Start up your local Liferay server instance using what you learned in the previous modules.
  5. Go to localhost:8080 in your browser to verify that the text is bolder.

You have successfully deployed a CSS client extension to your local Liferay instance. 

Conclusion

Great! You've learned how to create and deploy a frontend client extension from the Liferay sample workspace. Next, you’ll review what you’ve learned before moving on to the next module.

Loading Knowledge

Capabilities

Product

Education

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy