home-planner-group/dynamic-query-ui

Angular Application that provides a Web UI to use the JDBC API.

Dynamic Query UI

This project was generated with Angular CLI version 13.3.0.

The application starts on http://localhost:4200.

Docker Image

• Dockerfile: Multistage Dockerfile with Nginx
• Settings: nginx.conf
  • Exposes Port 4200
  • Uses API at Port 8088
• Pull Image:
  • docker pull ghcr.io/home-planner-group/dynamic-query-ui:latest
• Run Container:
  • docker run -d -p 4202:4200 --name query-ui ghcr.io/home-planner-group/dynamic-query-ui:latest

Docker Compose

To start the independent application stack of the Dynamic-Query-Service, run docker-compose up with its configuration.

Architecture

    Browser
       |
    Routing
       |
    Components  ----
       |           |
    Services --> Models
       |
    REST API

Explanation

• Browser = localhost:4200
• Routing = routing module
• Components = component-package
• Services = service-package
• Models = model-package
• REST API = localhost:8080

Dev Requirements

• Download and Install NodeJS v16.14.1+
• Install Angular CLI v13.3.0: npm install -g @angular/cli@13.3.0
• Download and Install Docker
  • Build Image: docker build -t dynamic-query-ui .

Dependencies

• Angular Material:
  • ng add @angular/material
• Flex Layout:
  • npm i -s @angular/flex-layout @angular/cdk
  • Tool: Demo

GitHub Workflows

Docker Image Delivery Workflow

• .github/workflows/docker-image.yml
  • Trigger: manual or on published release
  • Executes docker build
  • Execute docker push to GitHub Packages

Angular Commands

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

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.

Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

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 a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.