Edit: delivering react.js has been made simpler, see Simplified delivery of react.js from apache karaf for details.

A small barebones demo application/testbed, delivering a single-page web application from apache karaf, can be found at https://github.com/steinarb/frontend-karaf-demo

The JavaScript framework used to write the application is react.js

The frontend application is webpack‘d into a single bundle.js file. The packing is done by the frontend-maven-plugin (i.e. no local node.js installation required).

The bundle.js and its wrapping index.xhtml page, are served as static resources from the OSGi bundle’s classpath by a DS component that registers a Servlet service with the web whiteboard extender on the path /frontend-karaf-demo

The react.js features featured in this application, 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 (the REST service used by axios, is provided by an OSGi DS whiteboard Servlet)
• react-router 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 (I haven’t made any effort to make it look good. I just include the boostrap style and activate the responsive formatting in a meta header tag in the index.html page)

To try out the application:

1. Clone this project and build it:

   git clone https://github.com/steinarb/frontend-karaf-demo.git
   cd frontend-karaf-demo/
   git checkout release/1.0.0
   mvn clean install

2. Install apache karaf and start it  according to the karaf quick start guide (alternatively, see Develop OSGi applications using karaf)
3. At the karaf command line give the following commands

   feature:repo-add mvn:no.priv.bang.demos/frontend-karaf-demo/LATEST/xml/features
   feature:install frontend-karaf-demo

4. Open http://localhost:8181/frontend-karaf-demo in a web browser and try it out
   • If using chrome:
     • Press Ctrl-Shift-i to open the developer tools
     • Visit the Chrome Web Store and install some tools that will seriously simplify debugging react/redux applications:
       • React Developer Tools from Facebook
       • Redux DevTools from remotedevio