frontend-karaf-demo

Testing the frontend-maven-plugin

This is a maven project that is a testbed for delivering react.js frontends from apache karaf.

The [[https://github.com/steinarb/frontend-karaf-demo/blob/master/pom.xml#L138][maven plugin config]]:
• uses frontend-maven-plugin to webpack a react.js application into a self-contained bundle.js file that can be served as a static resource. Note that this doesn't need a node.js installed when building, nor will it use any node.js/npm installed locally on the build machine.
The [[https://github.com/eirslett/frontend-maven-plugin][frontend-maven-plugin]] will download and upack its own node.js, and use this node.js to download the npm dependencies and create the bundle.js
• uses maven-bundle-plugin to create two DS OSGi components that expose the Servlet service that is plugged into an OSGi web whiteboard
• The DS component ReactServlet serves the static resources index.html and bundle.js on the path "/frontend-karaf-demo"
• The DS component IncrementerServlet receives POST requests on the path "/frontend-karaf-demo/api/increment", parses the POSTed JSON into a bean, increments the value property of the bean, and returns the bean as a JSON object (ie. the servlet is stateless and just increments the value of the POSTed object)
• uses karaf-maven-plugin to create an apache karaf feature repository that loads the servlets and ensures that all runtime requirements are in place (the pax web whiteboard extender, the jackson JSON parser). The feature repository is attached to the maven bundle artifact

The react application uses the following features:
• react.js to render the application's page
• redux to hold the application's state
• Redux Toolkit to create redux actions and reducers (if a reducer is longer than a single line per action your redux state is probably organized wrong)
• redux-saga and axios for REST API communication and asynchronous update of the application's state
• 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)

The react application follows the structure I've found clear and easy to work with:
• Avoid embedding binaries like images or fonts in the bundle.js, it's better to load them from a web resource
• Avoid embedding large CSS files like e.g. bootstrap in bundle.js, again: it's better to load them from a web resource
• The build script and package.json in the top directory with the application in a subdirectory named src/
• Inside src/
• On the top, index.js that enters the application and sets up and starts redux and saga
• actiontypes.js containing all of the redux actions in the applcation, created using redux toolkit's "createAction()"
• Subdirectory components/ containing all of the visible UI components of the frontend app
• Note in particular Counter.js which demonstrates both displaying data from redux and dispatching actions with redux
• Subdirectory reducers/ containing all of the reducers (created with redux toolkit "createReducer() using the map notation, and using "computed syntax" (i.e. square brackets on property identifiers), to be able to use the createAction() actions directly
• Subdirectory sagas/ containing the sagas that handle asynchronous REST API communication (a REST operation is triggered by dispatching a redux action that is picked up by the saga, and both successful and failed REST responses results in redux actions, that in turn are picked up by reducers and stored in the reduc state

Status

file:https://travis-ci.org/steinarb/frontend-karaf-demo.svg?branch=master file:https://coveralls.io/repos/steinarb/frontend-karaf-demo/badge.svg file:https://sonarcloud.io/api/project_badges/measure?project=no.priv.bang.demos%3Afrontend-karaf-demo&metric=alert_status#.svg file:https://maven-badges.herokuapp.com/maven-central/no.priv.bang.demos/frontend-karaf-demo/badge.svg

SonarCloud

file:https://sonarcloud.io/api/project_badges/measure?project=no.priv.bang.demos%3Afrontend-karaf-demo&metric=ncloc#.svg file:https://sonarcloud.io/api/project_badges/measure?project=no.priv.bang.demos%3Afrontend-karaf-demo&metric=bugs#.svg file:https://sonarcloud.io/api/project_badges/measure?project=no.priv.bang.demos%3Afrontend-karaf-demo&metric=vulnerabilities#.svg file:https://sonarcloud.io/api/project_badges/measure?project=no.priv.bang.demos%3Afrontend-karaf-demo&metric=code_smells#.svg file:https://sonarcloud.io/api/project_badges/measure?project=no.priv.bang.demos%3Afrontend-karaf-demo&metric=coverage#.svg

Branches

branch	karaf version	snapshot version	OSGi version
master	4.3.x	2.0.0-SNAPSHOT	OSGi 7
release/1.1.0	4.2.11	1.1.0-SNAPSHOT	OSGi 6

Installation on apache karaf

Installation steps:
1. Clone this project and build it:
#+BEGIN_EXAMPLE mkdir -p ~/git cd ~/git/ git clone https://github.com/steinarb/frontend-karaf-demo.git cd ~/git/frontend-karaf-demo/ mvn clean install #+END_EXAMPLE
2. Install apache karaf (e.g. according to the karaf quick start guide or by installing the .deb package on debian/ubuntu/raspbian), and start karaf
3. From the karaf console (either from the karaf started above, or from an SSH session into a running karaf), install the application with the following commands:
#+BEGIN_EXAMPLE feature:repo-add mvn:no.priv.bang.demos/frontend-karaf-demo/LATEST/xml/features feature:install frontend-karaf-demo #+END_EXAMPLE
4. Open a web browser on http://localhost:8181/frontend-karaf-demo/ and use the "+" and "-" buttons to increment and decrement the counter
5. If using Chrome or Chromium it's a good idea to press Ctrl-Shift-i to open the developer tools, where it is possible to watch error messages in the console, and set breakpoints and debug the JavaScript code
6. It's also a good idea to visit the Chrome Web Store and install:
7. [https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi][React Developer Tools]] from Facebook
8. The "React" tab in chrome devtools gives a view of the react application tree, rather than the DOM, where it is possible to examine the react components' props and state, it's also possible to click on a part of the application and navigate to the corret place in the react application tree
9. [https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd][Redux DevTools]] from remotedevio
10. The "Redux" tab in chrome devtools lets you examine the redux store of the application

LICENSE

This maven project is licensed under Apache v2.0.

See the file LICENSE for details.