Lampros Smyrnaios a13fb2eb40 | ||
---|---|---|
e2e | ||
src | ||
.browserslistrc | ||
.editorconfig | ||
.gitignore | ||
LICENSE.txt | ||
README.md | ||
angular.json | ||
package-lock.json | ||
package.json | ||
proxy.conf.json | ||
tsconfig.json | ||
tslint.json |
README.md
UOA Repository Manager UI
Introduction
Architecture
Building
The frontend has been developed and tested using Angular 12.
Manual build
Requirements:
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.
- 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
- Install Angular dependencies
npm install
- 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:
- Make sure that you have successfully built and installed the application on Nginx (or another Web Server).
- Start or reload the Web Server service.
e.g.systemctl start nginx
orsystemctl 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.