SearchUI

ASF's Angular search web application

Deployments

Maturity	Deployment
Devel	https://search-dev.asf.alaska.edu/
Test	https://search-test.asf.alaska.edu/
Prod	https://search.asf.alaska.edu/

Personal Deployment (deployment.py)

• To run install the aws cli (docs)
• Then create id credentials for the Discovery-NonProd account (docs)
• Set the credentials locally using aws configure, set the default region to us-east-1 and the output format to json, and use the credentials generated previously.

Example:

 python deployment.py will --branch devel

Initialize after downloading

After you first download the repo, set up your instance by doing npm install from the project root directory. If you don't have npm installed go here for installation instructions.

Development server

The app is run locally using the Angular CLI. Installation instructions can be found here.

After angular is installed, 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. You can optionally supply a port number, for example ng serve --port 4444

Custom Domain

In order to get certain services to work, it's necessary to set up a .asf.alaska.edu domain pointing to your local server in your host file. This process varies on the OS you are using.

Add the following line via the methods below to set up local.asf.alaska.edu to point towards your local development server.

127.0.0.1   local.asf.alaska.edu

OS	Method
Mac/Linux	modify the /etc/hosts file
Windows	Modify c:\windows\system32\drivers\etc\hosts as Administrator

ng serve --port 4444 --host local.asf.alaska.edu
ng serve --port 4445 --ssl true --host local.asf.alaska.edu

Setting up HTTPS

Some services of Vertex require HTTPS to work. Angular supports running with ssl, though some browsers may not be happy with the self-signed certs and not let you access the page through HTTPS. To get around this mkcert can act as a Certificate Authority to verify the certs it generates.

1. Follow the instruction to install mkcert on their README
2. Run mkcert -install (May need to be run as administrator)
3. To generate the certs to give to Angular run mkcert local.asf.alaska.edu. If you want to specify the location to generate the certs (recommended) you can pass the parameters -cert-file and -key-file ex: mkcert -cert-file ~/mkcert/cert.pem -key-file ~/mkcert/key.pem local.asf.alaska.edu
4. Run angular with the following flags to specify to use SSL and where the SSL key and cert are.

ng serve --host=local.asf.alaska.edu --ssl true --ssl-cert ~/mkcert/cert.pem --ssl-key ~/mkcert/key.pem 

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.

Install NPM Packages

Run npm install --save package_name to install a package.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Translating Text

The package ngx-translate is use enable multilingual support. Any text a user can view on the UI, excluding possibly metadata values and brand names, should be displayed using a translate pipe.

Here is an example:

<button
  [matMenuTriggerFor]="helpMenu"
  matTooltip="{{ 'HELP_AND_INFORMATION' | translate }}"
  class="spacing nav-icon-buttons" color="basic" mat-button>
  <mat-icon class="large-icon">help_outline</mat-icon>
  <div class="text-under faint-text">{{ 'HELP' | translate }}</div>
</button>

You can see both text in the Tool Tip and the button text itself are both run through the 'translate' pipe: {{ 'HELP_AND_INFORMATION' | translate }}. The translate pipe will translate the key e.g. 'HELP_AND_INFORMATION' and replace it with the value from the current language json file in use, e.g. 'assets/i18n/en.json'. Add key/value pairs to the json files using BabelEdit.

The 'assets/i18n/vertex.babel' file is the project file to open with BabelEdit to access all json translation files. Use BabelEdit to add, change, and delete key/value pairs.

Testing

Testing run via Ghost Inspector.

Further help

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

More information about the app is available on the wiki

This project was generated with Angular CLI version 6.2.4.