FreshPlanner UI

This project was generated with Angular CLI version 13.3.0.

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

Purpose

This project has the purpose to get involved with Angular (TypeScript, NPM), Docker and GitHub (Actions, Packages, Projects).

Description

The application is an Angular Web UI to provide a user interface for the underlying backend. The UI acts like a REST Client and supports mobile and desktop browsers.

Architecture

Overview

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

Explanation

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

Dev Requirements

• Download and Install NodeJS v16.14.1+
• Install Angular CLI v13.3.0: npm install -g @angular/[email protected]
• Download and Install Docker
  • Build Image: docker build -t fresh-planner-ui .

Dependencies

• Angular Material:
  • ng add @angular/material
• Flex Layout:
  • npm i -s @angular/flex-layout @angular/cdk
  • Tool: Demo
• NGRX Store with DevTools:
  • ng add @ngrx/store@latest & ng add @ngrx/store-devtools@latest
  • Tool: Browser Plugin

GitHub Workflows

Continuous Integration

• Trigger: all pushes
• Executes npm install & npm run build --prod
• No tests yet

Docker Image for GitHub

• Trigger: manual or on published release
• Executes docker build
• Execute docker push to GitHub Packages

Docker Image

• Divided into Builder and Runner
• Image with Nginx Alpine and the distribution
• Exposes Port 4200
• Uses by default API at Port 8080
• Detailed configuration: environment.prod

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.