An old portlet with a new face!
- Javascript framework used: React framework
- Tool to build our javascript application: Yarn
- UI library used: Material UI
Yarn does not have to be installed locally on your system to build the application. Yarn and node will be downloaded and installed via the maven build process. This is all handled by the frontend maven plugin.
- maven 3+
- jdk 7+ (preferably 8)
mvn clean package
cd $UPORTAL_SOURCE
ant deployPortletApp -DportletApp=/path/to/portlet.warWe added the react code to the project using the tool create-react-app. After that we ejected from the create-react-app project. This allows us to change the transpilied javascript output file name. When you build a react application the output filenames have the file hash appended. An example would be something like index.abef34d.js. The filename changes every time the project is built. This makes it difficult for us to include the javascript file in our JSP file. We modified the file webpack.config.prod.js to remove '[hash]' from all output files.
If we take a look at main.jsp we can see that we are including the javascript file containing our react code. You will also see an empty div with the id of "app". If we have multiple react portlets on the same page, make sure that the id is unique per portlet. Otherwise react will render ALL portlets to the same div. Looking at index.js we can see where the react application figured out where it needs to render to.
The way this project is setup is for NO external CSS files. All CSS must be done essentially in-line. This will help prevent portlet's CSS bleeding into others on the page.
As stated before, you do not need to build the react side of the project by its self. The maven process will build and copy the generated artifacts to the correct location for you. But if you wish to build the react project by hand, go to the src/main/react/ directory and do either a npm run build or a yarn run build.