Web component inside Liferay DXPWeb component inside Liferay DXPhttps://liferay.dev/c/message_boards/find_thread?p_l_id=119785294&threadId=1205073522026-04-05T17:29:43Z2026-04-05T17:29:43ZRE: Web component inside Liferay DXPChristoph Rabelhttps://liferay.dev/c/message_boards/find_message?p_l_id=119785294&messageId=1205079562020-12-18T15:55:15Z2020-12-18T15:55:15Z<p>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:</p>
<div class="highlight highlight-source-js">
<pre><span class="pl-c1"><</span><span
class="pl-ent">link</span> <span class="pl-c1">href</span><span
class="pl-c1">=</span><span
class="pl-s">'<PATH>/app.css?<HASH>'</span> <span
class="pl-c1">rel</span><span class="pl-c1">=</span><span
class="pl-s">'stylesheet'</span>/<span
class="pl-c1">></span>
<span class="pl-c1"><</span><span
class="pl-s1">script</span> <span class="pl-s1">src</span><span
class="pl-c1">=</span><span
class="pl-s">'<PATH>/runtime.js?<HASH>'</span><span
class="pl-c1">></span><span class="pl-c1"><</span>/<span
class="pl-ent">script</span><span class="pl-c1">></span>
<span
class="pl-c1"><</span><span class="pl-ent">script</span> <span
class="pl-c1">src</span><span class="pl-c1">=</span><span
class="pl-s">'<PATH>/vendor.js?<HASH>'</span><span
class="pl-c1">></span><span class="pl-c1"><</span>/<span
class="pl-ent">script</span><span class="pl-c1">></span>
<span
class="pl-c1"><</span><span class="pl-ent">script</span> <span
class="pl-c1">src</span><span class="pl-c1">=</span><span
class="pl-s">'<PATH>/app.js?<HASH>'</span><span
class="pl-c1">></span><span class="pl-c1"><</span>/<span
class="pl-ent">script</span><span class="pl-c1">></span></pre>
<p>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, ...</p>
<p>To test it, add a webcontent or fragment to the page with these tags:</p>
<pre><span class="pl-kos"><</span><span
class="pl-ent">hello-world</span>/>
<span
class="pl-kos"><</span><span
class="pl-ent">app-today</span> />
<span
class="pl-kos"><</span><span class="pl-ent">app-shuffle</span> /></pre>
<p>The tags should be picked up by the module and replaced.</p>
<p>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.</p></div>Christoph Rabel2020-12-18T15:55:15ZRE: RE: Web component inside Liferay DXPNikola Radojicichttps://liferay.dev/c/message_boards/find_message?p_l_id=119785294&messageId=1205094992020-12-18T12:15:11Z2020-12-18T11:29:21Z<p>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 ?<img src="/documents/14/0/liferay+dxp.png/c6572ff7-7d78-efcc-12fc-a87db16c1892?t=1608290877707&imagePreview=1" /></p>
<p> </p>Nikola Radojicic2020-12-18T11:29:21ZRE: Web component inside Liferay DXPChristoph Rabelhttps://liferay.dev/c/message_boards/find_message?p_l_id=119785294&messageId=1205075632020-12-17T18:52:18Z2020-12-17T18:52:18Z<p>We fiddled a bit with them. I wrote a blog post a while ago and the
code there used them.</p>
<p>https://liferay.dev/blogs/-/blogs/developing-javascript-frontends-with-webpack</p>
<p>https://github.com/dccs-liferay/webpack-example/blob/master/modules/dccs-frontend-demo/webpack/js/app.js</p>
<p>But in the end, we went with the alternative approach in that code
example, it proved simpler to handle.</p>Christoph Rabel2020-12-17T18:52:18ZWeb component inside Liferay DXPNikola Radojicichttps://liferay.dev/c/message_boards/find_message?p_l_id=119785294&messageId=1205073512020-12-17T17:40:20Z2020-12-17T11:37:27Z<p>Does someone have experience with web components inside Liferay DXP
(how can be embedded)?</p>Nikola Radojicic2020-12-17T11:37:27Z