Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

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

Resources

License

Releases

No releases published

Packages

No packages published