Home Explore Help
Sign In
steinarb
/
frontend-karaf-demo
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki

Serving a react.js frontend from a servlet registered with the Pax Web Whiteboard Extender and run in apache karaf

Branch: release/1.0.0
Branches Tags
frontend-kar...
ZIP TAR.GZ
Steinar Bang 470efd55ab Use jackson-databind version 2.9.10.1 to fix github security warning 5 years ago
src 5201627b29 Use version 0.18.1 of npm package axios 6 years ago
.editorconfig 1cdbe80c29 Initial commit. 7 years ago
.gitignore 511b986727 Make git ignore yarn-error.log and all other .log files. 7 years ago
.travis.yml f2d712d198 Set "dist: trusty" in .travis.yml to fix broken travis-ci build 5 years ago
LICENSE 9b53684ee3 Use the Apache v 2.0 license for this project. 7 years ago
README.org 91fbe41765 Style the application with react-bootstrap and bootstrap v3 7 years ago
pom.xml 470efd55ab Use jackson-databind version 2.9.10.1 to fix github security warning 5 years ago

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
  • 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-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

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

Installation on apache karaf

    Installation steps:
  1. Clone this project and build it:
    2. #+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), 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:
    4. #+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.