Uweheuerfrontend: Difference between revisions
| Line 6: | Line 6: | ||
* Git installation | * Git installation | ||
* Node.js [[RaspberryPi4B#Node.js|installation]] | * Node.js [[RaspberryPi4B#Node.js|installation]] | ||
* Angular [[RaspberryPi4B# | * Angular [[RaspberryPi4B#Angular|installation]] | ||
* Clone repositories | * Clone repositories | ||
uwe@raspberrypi4:~/SoftwareProjects/eclipse-workspace $ gh repo clone UweHeuer/uweheuer-frontend | uwe@raspberrypi4:~/SoftwareProjects/eclipse-workspace $ gh repo clone UweHeuer/uweheuer-frontend | ||
Revision as of 17:51, 5 February 2023
Documentation
- see
C:\Uwes\owncloud\documents\Software_Development\MyDevelopments\uweheuer.drawio
Installation
Raspberry
- Git installation
- Node.js installation
- Angular installation
- Clone repositories
uwe@raspberrypi4:~/SoftwareProjects/eclipse-workspace $ gh repo clone UweHeuer/uweheuer-frontend
API
Build
Development Laptop
- see
angular.json
ng build --configuration=local_docker
Docker
docker build --tag uweheuerfrontend .
nginx.conf
- copy a standard nginx.conf from a running container to get a start
docker cp uweheuer-backend-frontend-1:/etc/nginx/nginx.conf nginx.conf copy nginx.conf uweheuer-frontend-nginx.conf del nginx.conf docker cp uweheuer-backend-frontend-1:/etc/nginx/conf.d/default.conf default.conf
Run
Local
- see
angular.json
ng serve --configuration local_docker ng serve --configuration local_dev
Docker
docker run --name uweheuerfrontendcontainer -d -p 82:80 uweheuerfrontend
Docker Compose
- see UweHeuer Backend
Application State
/services/application-state.ts- manages the application state as BehaviorSubject, a sub-type of Observable and expose the state as Observable
/services/application-state.service.ts- in ctor:
- subscribe to Angular SWUpdate service
- setup regular SW version check
- in ctor:
- for communication with the side area and content there is a dedicated service in
sidenav.service.ts:- offers a toggle method for the side area which is called in the header burger menu
- definition in
app.component.html - in corresponding ts code:
- set the DOM object '#mysidenav' side area in the sidenav service