How do I use webjars in a Liferay portlet

Question

I have been trying to include shufflejs in a Liferay (6.2) portlet.

I have added the following dependency to my pom.xml file:

<dependency>
  <groupId>org.webjars.bower</groupId>
  <artifactId>shufflejs</artifactId>
  <version>4.0.0</version>
  <scope>compile</scope>
</dependency>

I have confirmed that on my tomcat server, the webapps/my-portlet/WEB-INF/lib/shufflejs-4.0.0.jar is present and contains, within it, the META-INF/resources/webjars/shufflejs/4.0.0/dist/shuffle.js

I have included the following line in my liferay-portlet.xml file:

<header-portlet-javascript>
  /webjars/shufflejs/4.0.0/dist/shuffle.js
</header-portlet-javascript>

When I load my portlet's page with my browser, I get everything except I get a '404 Not Found' error for http://localhost:20080/my-portlet/webjars/shufflejs/4.0.0/dist/shuffle.js?browserId=other&minifierType=js&languageId=en_US&b=6210&t=1465296591338

What am I missing?

Thank you

score 1 · Answer 1 · answered Jun 07 '16 at 16:53

1

Assuming you are using a Servlet 3.0 container, you have the wrong URL. You need to use:

<header-portlet-javascript>
  /webjars/shufflejs/4.0.0/dist/shuffle.js
</header-portlet-javascript>

According to the webjars documentation:

Instructions for Servlet 3

With any Servlet 3 compatible container, the WebJars that are in the WEB-INF/lib directory are automatically made available as static resources. This works because anything in a META-INF/resources directory in a JAR in WEB-INF/lib is automatically exposed as a static resource.

Note, this documentation would indicate that you should be using webjars/shufflejs/4.0.0/dist/shuffle.js, but a little experimentation with the Liferay <header-portlet-javascript> config leads to the necessity of the preceding / as Liferay will concatenate this URL onto the end of the portlet name to form the full Liferay resource URL.

answered Jun 07 '16 at 16:53

Lucas

14,227
9
74
124

I tried this before, and to make sure, I tried it again and it did not work. First of all the `liferay-portlet.xml` likes it's documents sourced from the `webapp` root directory and for other items (`webapp/resources/css/*` and `webapp/resources/js/*` must be referenced starting with `/resource/...`) – Yoshiya Jun 07 '16 at 19:08
This comment is simply not true... Liferay does not require any sort of folder structure inside of your webapp. Perhaps you are confusing this with the JSF convention for `/resources`? Also, webjars uses the servlet 3.0 feature in that any jar in its lib folder will expose all resources contained in its `META-INF/resources` directory. – Lucas Jun 09 '16 at 14:58
Your information above is correct, yet it did not solve my problem - since my problem persisted even when following your information above. I have updated my question and have answered it below with information about the root cause of my problem. – Yoshiya Jun 10 '16 at 11:45

score 0 · Accepted Answer · edited May 23 '17 at 11:51

I found the cause of my troubles. I have deployed my portlet and run the portal in Eclipse with JRebel. When I deploy/run my portlet standalone without JRebel, this resource is found. Moreover, I am able to then bring the portal down and then bring it back up in Eclipse/JRebel - now the resource can be found.

I have encountered similar problems when running with Eclipse/JRebel before (see Liferay: perform an action when a -LocalServiceUtil is available). All in all Eclipse/JRebel is great, but sometimes a little wonkiness occurs when deploying portlets.

How do I use webjars in a Liferay portlet

2 Answers2