Single Page App using Jetty for API server and Angular 2 for the front end framework

Apache Maven: https://maven.apache.org/ npm: https://www.npmjs.com/

cd <project-root-directory>

mvn clean install

cd webapp-server

mvn exec:java

cd webapp-client

npm install (only needed for the first build to get all required packages)

npm start

Let us try to separate the concerns of Backend and Frontend. The Frontend should handle all issues related to showing client information and Backend should handle issues with application level logic. The Frontend is written in Angular2 and handles generating all of the HTML and routing on the client side. The Backend is a simple rest server which does not worry about generating dynamic pages or serving static content. It handles application level logic like what to do with the data from the Frontend.

We use Gulp to create a server to serve the Frontend files. There is only one root HTML file index.html in webapp-client (hence single page application). The rest of the "pages" are generated by Angular's routing capabilities.

The gulp server has a proxy set up so that all requests that start with /api get routed to the Backend server. So for example, the default Frontend server runs at http://localhost:9000 and the default Backend server runs at http://localhost:8080. So if we make a call to http://localhost:9000/api/health/ping, that call gets proxied to http://localhost:8080/api/health/ping.

We use embedded Jetty 9 to run the Backend server. The Backend code also tries to separate out concerns by splitting relevant work into the various submodules of this project. While the modules are very small, they serve as an example of how to set up a multi module project using Maven, and can definitely grow larger based on code needs.