This app provides access to the Portal-API and to the Perun API.
You can run the webapp using docker:
docker run -e ANGULAR_MODE=prod -p 80:80 denbicloud/cloud-portal-webapp:RELEASEYou can find current releases on GitHub.
Note: The cloud-api server must also be running.
- Clone the cloud-portal-webapp repository.
git clone -b dev git@github.com:deNBI/cloud-portal-webapp.git
cd cloud-portal-webapp-
Install nodejs virtual environment as described here.
-
Run the Makefile
makeThe default target checks if steps 1 - 3 were executed and then creates a node-environment, followed by installing all needed npm packages and angular cli (by running npm install and npm install -g @angular/cli). For more makefile targets run help.
make help- Start the angular server with make or by yourself
make serveor
. env/bin/activate
ng servethe dev server should run now on localhost:8001. The app will automatically reload if you update any of the source files.
You must first setup and start the project as described in the Project Setup section.
Enable Javascript debugging by choosing JavaScript Debug in your Run/Debug configurations
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class/module.
Run ng test to execute the unit tests via Karma.
Playwright is used to run end-to-end tests.
As Playwright is part of the packages from the repository's package.json it is available when sourcing your virtual
environment also used for serving the web-app locally. In case you encounter any problems, install it by hand as described
here.
There is an environment template, which can be found under tests/environment_template.json. This template needs to be adjusted and saved as environment.json to define user logins and the location of the portal for testing. A suitable environment.json can be found on our CeBiTec volume, using the path /prj/denbi_cloud_portal_dev/environment.json.
Before running the tests make sure you are serving the app via ng serve.
Run npx playwright test in the projects root directory to execute all end-to-end tests.
By default, the tests run in the background, use the --headed flag to observe the tests in your browser.
To run single test files or a set of tests files, just add the corresponding file-paths to the command, e.g. npx playwright test tests/simple_vm_application_spec.ts.
For writing tests the documentation provided by Playwright is helpful, especially the guides on selectors and locators.
After the tests finished, a test summary is shown in your web browser.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.
We are using Compodoc to visualize the code written in TypeScript-files.
- You can install Compodoc with npm:
npm install- Comment your code written in TypeScript-files. Comment-syntax is equivalent to Javascript.
Example:
/**
* Uses the data from the application form to fill the confirmation-modal with information.
* @param f the application form with corresponding data
*/
filterEnteredData(f: NgForm) {
...- Use the following commands to let Compodoc analyze the written code and comments.
npm run compodoc- To view the created documentation, use your favorite webbrowser (e.g. firefox)
firefox documentation/overview.htmlWe currently use the ESLint tool for linting the web app. The current configuration is based on the standard ESLint rules combined with the Airbnb Style Guide. This style guide is designed for plain javascript, so some adjustments have been made due to the use of TypeScript, as well as project-specific circumstances. The adapted rules can be found in the configuration file.