Dashboard

Libraries

• Angular CLI
• Angular Material
• Prettier

Initialization

Init submodules

git submodule init
git submodule update

Configuring npm for use with GitHub Packages

• Authenticating with a personal access token

Install packages

npm ci

Generate Angular modules from swags (java runtime required)

npm run codegen

Development server

• API (Production API default)

  • With mocks:

    Change ./src/appConfig.json API endpoints

1. Start

   • Real Keycloak: npm start

   • Stub Keycloak

     1. Change ./src/authConfig.json / "auth-server-url":

     2. npm run stub

2. Navigate to http://localhost:8000/

Production build

1. Run npm run build
2. The build artifacts will be stored in the dist/ directory.

Add API

1. Add submodule

   git submodule add -b <SCHEME_BRANCH> <SCHEME_REPO> schemes/<SCHEME_NAME>/<VER:VX>
   

2. Add schemes/<SCHEME_NAME>/<VER:VX> to Makefile SWAGGER_SCHEMES_PATH property

3. Add "<SCHEME_NAME>": "schemes/<SCHEME_NAME>/<VER:VX>" to openapi-codegen-config.json schemes property

4. Regenerate Angular modules from swags

5. (*) Add "<SCHEME_NAME>Endpoint": "<URL>" to src/assets/appConfig.json api property

6. Add in src/api-codegen/<SCHEME_NAME> files:

   • index.ts
   • <SCHEME_NAME>.module.ts
   • <SCHEME_NAME>-config.service.ts

7. Add <SCHEME_NAME>.module.ts to src/app/api/api.module.ts imports

8. Create src/api/<SCHEME_NAME> module

Tests

• Run npm run test to execute the unit tests via Karma.

Utils

Analyze bundle size

npm run build -- --prod --stats-json --extraWebpackConfig webpack.extra.js
npx webpack-bundle-analyzer dist/stats.json

Guides

• Using typography
• Theming your components

Chrome page auto-reloading problem

Need to open Chrome without SameSiteByDefaultCookies and CookiesWithoutSameSiteMustBeSecure features.

MacOS example:

open -a /Applications/Google\ Chrome.app --args --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure