Metanome Frontend

Metanome Frontend

The frontend of Metanome is build with AngularJS and based on the Google Material Design guidelines.

The frontend is structured the following way:

├──  src/
│   ├──  main/
│   │   ├──  java/
│   │   ├──  resources/
│   │   ├──  webapp/
├──  pom.xml

The webapp folder contains the actual frontend. It is structured according to the Best Practice Recommendations for Angular App Structure.

Development setup

For local development you first have to install node, bower and gulp.

To ensure that users, who check out Metanome, have all these dependencies we use the maven-frontend-plugin. This will locally install the dependencies when calling mvn clean install, so that the user does not have to install anything by himself.

To start the backend jetty-server do the following:

1. Run mvn clean install for packaging the the frontend.
2. Start the jetty-server with mvn jetty:run-war. This will first packages your webapp as a WAR file and then deploys it to Jetty

Each time you make changes to the backend you have to run these steps again. To debug the fronend, just call mvn jetty:run-war in debug mode via IntelliJ or eclipse.

When you do not need to run any algorithm while testing the frontend, it is sufficient to run mvn jetty:run. This is faster than mvn jetty:run-war, because the webapp is deplyed from its sources to Jetty.

When the backend is running you can start the frontend by executing gulp serve in the src/main/webapp directory. This launches a browser sync server on your source files, so you do not have to start the frontend again while making changes to your webapp. You can then open the frontend under http://localhost:3000/.

For building an optimized version of the metanome application you have to execute gulp of gulp build in src/main/webapp. The optimized version can then be found in /src/main/webapp/metanome.