Please file issues for this repository and Web site at the dockstore/dockstore repository!
This project was generated with Angular CLI version 1.0.0-rc.4.
- Java 8+
- Node and its included NPM (see .nvmrc for the correct version of node to install)
- wget
Install NPM and Node using nvm:
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
Close current terminal and open a new one or source ~/.bashrc
nvm install 10.13.0
Optionally, install a global Angular CLI in order to execute ng commands without prepending npx.
Otherwise, prepend npx to every command in this README if a global @angular/cli was not installed.
Before installing, follow https://docs.npmjs.com/getting-started/fixing-npm-permissions#option-two-change-npms-default-directory to fix permissions if needed.
$npm i -g @angular/[email protected]
After cloning the repo from GitHub, you can install the npm packages.
git clone https://github.com/dockstore/dockstore-ui2.git
cd dockstore-ui2
git checkout develop
git pull
npm ci
npm ci will install all npm dependencies including Prettier and the Husky Git hook.
Ensure CI=true is not set when using npm ci or else the Git hook will not work.
Prettier + Husky will automatically format changed files before each commit:
$ git commit -m "Test"
ghusky > pre-commit (node v10.13.0)
↓ Stashing changes... [skipped]
→ No partially staged files found...
✔ Running linters...
[feature/2130/prettier b6da3e7c] Test
Check to make sure Angular CLI has been properly set up
$ ng v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.3.1
node: 7.9.0
os: linux x64
@angular/animations: 4.3.6
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/flex-layout: 2.0.0-beta.9
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.3.1
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6
If you wish to serve the dist folder in a VM, make sure you have nginx and security rules set up properly. Nginx
The Dockstore class in src/app/shared/dockstore.model.ts is for integrating supported services.
In dockstore-webservice, the dockstore.yml being served must be edited to include the client IDs.
Run npm run start -- --host=<host> for a dev server. Navigate to http://<host>:4200/. The app will automatically reload if you change any of the source files.
Run npm update. This will automatically update package.json and package-lock.json.
When you update a dependency in the package.json, make sure to update the third party licenses file THIRD-PARTY-LICENSES.csv.
To update this file, run npm run license. Unfortunately, there is not a way to permanently say a certain dependency should be x license using this package.
So, once we manually update a dependency's license info and we continue to use it, running the above command will always result in it being unknown in the
updated file. Be sure to review the updated file (i.e. revert changes as needed and update any new unknown or unlicensed dependencies).
For more documentation on license-checker, visit here
Run ng g component component-name to generate a new component. You can also use ng generate directive/pipe/service/class/module. See https://github.com/datorama/akita-schematics#create-a-new-feature for how to generate Akita-related components.
Optionally override the webservice version using npm config set dockstore-ui2:webservice_version ${WEBSERVICE_VERSION}
Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.
For an Angular Production Build, you will need to install Nginx. Replace your nginx.conf file (location depends on your installation) with this template, filling in the two paths:
events {
}
http {
include /usr/local/etc/nginx/mime.types;
server {
listen 4200;
location = /swagger.json {
proxy_pass http://localhost:8080/swagger.json;
}
location /api/ {
rewrite ^ $request_uri;
rewrite ^/api/(.*) $1 break;
return 400;
proxy_pass http://localhost:8080/$uri;
}
location / {
root /<path to>/dockstore-ui2/dist; # FILL IN
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
server {
listen 5200;
location / {
root /<path to>/dockstore-ui2/dist; # FILL IN
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
}
}
}
Use npm run build.prod for an Angular Production Build and start it with nginx. localhost:4200 should be available immediately.
Run ng test to execute the unit tests via Karma.
Cypress is no longer specified in the package.json, check the .circleci/config.yml for the version and how to install it.
Run $(npm bin)/cypress open or $(npm bin)/cypress run to execute the end-to-end tests via Cypress.io.
Before running the tests make sure you:
- have a postgresql database
- serve the app via
ng serveor similar. - have the Dockstore webservice jar in the root directory and run it (see scripts/run-webservice-script.sh for guideline)
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.