TIP: Sample application for delivering react.js from karaf

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

TIP: Sample application for delivering react.js from karaf

Steinar Bang
If someone wants to deliver a react.js application from a DS web
whiteboard servlet component in karaf, here's a little project to
copy/paste from:
 https://github.com/steinarb/frontend-karaf-demo

The react.js application in src/main/frontend/ is webpack'd into a
bundle.js that's included as a resource in the OSGi bundle.  Another
resource is an index.xhtml file that references the bundle.js file.

The servlet ReactServlet serves the index.xhtml and bundle.js files from
resources loaded from the classpath, from the path /frontend-karaf-demo

The react.js application is turned into a bundle.js file using the
frontend-maven-plugin (and requires no local node installation).

In addition, there's a servlet listening for HTTP POST requests on the
path /frontend-karaf-demo/api/increment and returning an incremented
version of the POSTed object (this tests both overlapping paths for
whiteboard servlets (which works!) and serves as a testbed for
redux-saga and axios).  No state in this servlet: it just increments
what it receives.

The react.js features the frontend application uses/demonstrates, are:
 - react.js to render the application's page
 - redux to hold the application's state
 - redux-saga and axios for REST API communication and asynchronous
   update of the application's state
 - react-router v4 to route between different pages (however this
   requires hardcoding the ReactServlet's path into the react app, and
   requires the ReactServlet to return the top level index.html from all
   routes)
 - react-bootstrap and bootstrap v3 to style the application in a
   responsive way

Enjoy! :-)

- Steinar