Metanome Frontend - HPI-Information-Systems/Metanome GitHub Wiki

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/
│   ├──  <Files from Metanome-Frontend Repository>
│
├──  WEB-INF/
│	├── web.xml
├──  pom.xml

The Metanome-Frontend repository contains the actual frontend. It is structured according to the Best Practice Recommendations for Angular App Structure.

Using the Frontend

To ensure that users, who checkout Metanome, have all dependencies required by the Metanome Frontend maven-frontend-plugin is used. This will locally install all required dependencies when mvn clean install is executed.

The frontend is available under http://localhost:8080/.

Making changes to the Frontend

You either change the Frontend subfolder in the Metanome folder or clone the Frontend repository separately. Commit and push in the edited folder. You will now see a change in the Metanome folder, which updates the commit hash the subdirectory (the Frontend) points to. Commit and push that too.

Development Setup

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

To build the frontend manually following steps have to be executed:

  • npm install
  • bower install
  • gulp build

When the backend is running you can start the frontend by executing gulp serve. This launches a browser sync server on your source files in the src directory, where all changes made are reloaded automatically.

Define Backend Variables

The variables defined in src/app/scripts/config.js can be changed by:

1. Exporting variables as system environment variables

Currently to variables can be defined are APP_ENV,API_URL and API_TOKEN where if not defined the default API URL http://localhost:8081 which requires no API token.

To define an alternative value you have to export the new variable into the system environment export <Variable_Name> = <Variable_Value>. Before building the frontend.

2. Using an .env file to define the variables

The variables APP_ENV,API_URL and API_TOKEN can be also defined using an .env file.

  • Create an .env file in the root directory
  • Define the variables in the .envfile e.g.:
API_URL=http://test.com:8081
API_TOKEN=secret

System Environment Variables have higher priority than variables defined in an .env file.

Note: API_TOKEN is currently not completely implemented in the Frontend / Backend.