Serving a react.js frontend from a servlet registered with the Pax Web Whiteboard Extender and run in apache karaf
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.editorconfig
.gitignore
.travis.yml
LICENSE
README.org
pom.xml

README.org

Testing the frontend-maven-plugin

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

The maven 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
  • uses maven-bundle-plugin to create two DS OSGi components that expose the Servlet service that is plugged into an OSGi web whiteboard
    1. The DS component ReactServlet serves the static resources index.html and bundle.js on the path “/frontend-karaf-demo”
    2. 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-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)
  • react-bootstrap and bootstrap v3 to style the application in a responsive way

Status

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

SonarCloud

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

Installation on apache karaf

Installation steps:

  1. Clone this project and build it:
    mkdir -p ~/git
    cd ~/git/
    git clone https://github.com/steinarb/frontend-karaf-demo.git
    cd ~/git/frontend-karaf-demo/
    mvn clean install
        
  2. Install apache karaf (e.g. according to the karaf quick start guide), and start it
  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:
    feature:repo-add mvn:no.priv.bang.demos/frontend-karaf-demo/LATEST/xml/features
    feature:install frontend-karaf-demo
        
  4. Open a web browser on http://localhost:8181/frontend-karaf-demo/ and use the “+” and “-” buttons to increment and decrement the counter
    • 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
    • It’s also a good idea to visit the Chrome Web Store and install:
      1. React Developer Tools from Facebook
        • 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
      2. Redux DevTools from remotedevio
        • 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.