Web component inside Liferay DXP

Message Boards

Nikola Radojicic, modified 3 Years ago.

Web component inside Liferay DXP

New Member Posts: 3 Join Date: 12/17/20 Recent Posts

Does someone have experience with web components inside Liferay DXP (how can be embedded)?

Christoph Rabel, modified 3 Years ago.

RE: Web component inside Liferay DXP

Liferay Legend Posts: 1554 Join Date: 9/24/09 Recent Posts

We fiddled a bit with them. I wrote a blog post a while ago and the code there used them.

https://liferay.dev/blogs/-/blogs/developing-javascript-frontends-with-webpack

https://github.com/dccs-liferay/webpack-example/blob/master/modules/dccs-frontend-demo/webpack/js/app.js

But in the end, we went with the alternative approach in that code example, it proved simpler to handle.

Nikola Radojicic, modified 3 Years ago.

RE: RE: Web component inside Liferay DXP

New Member Posts: 3 Join Date: 12/17/20 Recent Posts

Hi Christoph, i have tried this solution with dccs-frontend-demo. As result of build i have dccs-frontend-demo.jar in bundles/osgi/modules folder. I am using liferay dxp localy on my machine (version 7.3), and i have copied this jar into this folder C:\liferay-dxp-tomcat-7.3.10-ga1-20200930160533946\liferay-dxp-7.3.10-ga1\osgi\modules, but when i run Liferay dxp application i cannot find this app in search. I don't know what to do to make this jar app to be visible in this widgets search ?

Christoph Rabel, modified 3 Years ago.

RE: Web component inside Liferay DXP

Liferay Legend Posts: 1554 Join Date: 9/24/09 Recent Posts

That's because it isn't an app, it just adds the infrastructure js code. If it works correctly, it just registers a loader in the theme. When you check the source code of the page, you should find something like this in the footer:

<link href='<PATH>/app.css?<HASH>' rel='stylesheet'/>
<script src='<PATH>/runtime.js?<HASH>'></script>
<script src='<PATH>/vendor.js?<HASH>'></script>
<script src='<PATH>/app.js?<HASH>'></script>

When you put a webcomponent now on the page, the code is triggered. You can do this using webcontent, a fragment, inside of a portlet, ...

To test it, add a webcontent or fragment to the page with these tags:

<hello-world/>
<app-today />
<app-shuffle />

The tags should be picked up by the module and replaced.

Note: It is quite possible that the module isn't deployed correctly at all, you probably need to fix the kernel version in build.gradle.