uoa-repository-manager-ui/README.md

UOA Repository Manager UI

Introduction

Architecture

Building

The frontend has been developed and tested using Angular 12.

Manual build

Requirements:

• Node.js version 16

Build Instructions:

Follow the instructions below to download the source code and build the application. For more information about building an Angular app you can refer to the official documentation: Building and serving Angular apps.

1. Clone the repository and move inside the directory
   git clone https://code-repo.d4science.org/MaDgIK/uoa-repository-manager-ui.git && cd uoa-repository-manager-ui
2. Install Angular dependencies
   npm install
3. Build Angular app
   ng build --configuration production
   Produces the directory "dist/uoa-repository-manager-ui" which contains the compiled files.
   
   

Deployment

Prerequisites

• Nginx

Instructions

To deploy the Frontend app:

1. Make sure that you have successfully built and installed the application on Nginx (or another Web Server).
2. Start or reload the Web Server service.
   e.g. systemctl start nginx or systemctl reload nginx

Installation

Prerequisites

• Nginx (or another Web Server like Apache HTTP Server)

Dependencies

[...]

Installation

Nginx Configuration

You have to create a Server Block configuration that will point to the directory "dist/uoa-repository-manager-ui" created by building manually the webapp. It must also be configured as a reverse proxy for the Backend Application (to serve it under the path '/api') and for the list of Dependencies of the project.

See the example below:

server {
    server_name                 ...
    access_log                  ...
    root                        /path/to/uoa-repository-manager-ui;  # the directory of the application

    location / {
        try_files $uri$args $uri$args/ /index.html /index.php;
    }

    location ~* \.(eot|ttf|woff)$ {
        add_header Access-Control-Allow-Origin *;
    }

    # reverse proxy configuration for the backend application
    location /api {
        proxy_set_header        Host $host;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        X-Forwarded-Proto $scheme;
        proxy_pass              <?>;
        proxy_read_timeout      3600;
        proxy_send_timeout      3600;
    }

    [...]
}

Lastly, we would advice to validate the configuration of the Nginx to make sure it does not contain errors.
Execute nginx -t with elevated permissions to perform a validation. If the test is successful you can move on to deploying the application.

Configuration

Security

Maintenance

Recovery

References

---

These we auto-generated many years back and may not be correct (for example the Angular-version)

This project was generated with Angular CLI version 6.0.8 (Angular version 6.1.10).

Minimum requirements for installing and building the project

Node.js version 8.x or 10.x.
npm client command line interface (it is installed with Node.js by default).

Installing the project

After checking out (or updating) the repository enter the created folder and run npm ci. This will install the exact versions of the dependencies as mentioned in the package-lock.json file (inside the root folder).

Build for production

Run npm run build (equivalent of ng build --prod) to build the project. The build artifacts will be stored in the dist/uoa-repository-manager-ui directory.

Deploy project to nginx server

Run tar -czvf dist.tar.gz dist/ to generate a compressed .gz file containing the built angular folder
Run scp dist.tar.gz path/to/server/ to copy the compressed file to the server.
Connect to server (ssh user@server.ip.address).
Uncompress dist.tar.gz file.
Navigate to the root folder of the server. Copy the contents of the uncompressed dist/uoa-repository-manager-ui folder into the uoa-repository-manager-dashboard folder (superuser privileges are normally required for this action).

Other topics

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run npm run start:proxy (equivalent of ng serve --proxy-config proxy.conf.json) instead, to run the project using a development proxy. To configure the proxy modify the proxy.conf.json file (inside the root folder).

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.