Uweheuerfrontend: Difference between revisions

Latest revision as of 08:55, 20 November 2023

Documentation[edit]

see C:\Uwes\owncloud\documents\Software_Development\MyDevelopments\uweheuer.drawio

Installation[edit]

Raspberry[edit]

Git installation
Node.js installation
Angular installation
Clone repositories

uwe@raspberrypi4:~/SoftwareProjects/eclipse-workspace $ gh repo clone UweHeuer/uweheuer-frontend
uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ npm install
uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ npm audit fix

Source Control[edit]

git add .
// eventually open powershell as admin
Get-Item -Path "C:\Uwes\Programme\Git\bin\*.exe" | %{ Set-ProcessMitigation -Name $_.Name -Disable ForceRelocateImages }
git commit -m "Save"
git push

API[edit]

Local Dev[edit]

Frontend http://localhost:4200/

Local Docker[edit]

http://localhost/

Build[edit]

Development Laptop[edit]

via npm

npm run build:local_dev // see package.json

- calls

ng build --configuration=local_dev // see angular.json

Raspberry[edit]

uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ git pull
uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ npm run build:raspberry // base-ref is needed for running behind the Raspberry 3B proxy, see on Raspberry 3B /etc/apache2/sites-available/000-default-le-ssl.conf

Docker[edit]

build artefacts

npm run build:local_docker // see package.json

- calls

ng build --configuration=local_docker // see angular.json

build image

docker build --tag uweheuerfrontend .

nginx.conf[edit]

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[edit]

Local[edit]

see angular.json

ng serve --configuration local_docker
ng serve --configuration local_dev

Docker[edit]

docker run --name uweheuerfrontendcontainer -d -p 82:80 uweheuerfrontend

Docker Compose[edit]

see UweHeuer Backend

Implementation[edit]

Look and Feel[edit]

Angular Material theme in style.css
Hammmerjs

PS C:\Uwes\SoftwareProjects\uweheuer-frontend>npm install hammerjs
// main.ts 
import 'hammerjs';

Material Icons

// index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
// <COMPONENT>.ts
urlColor: string = 'Chocolate';
// <COMPONENT>.html
<mat-icon matListIcon  [ngStyle]="{ 'color' : urlColor }"> ...

Flex Layout module

Application State[edit]

/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

Sidenav[edit]

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

@@ Line 1: / Line 1: @@
+==Documentation==
+* see <code>C:\Uwes\owncloud\documents\Software_Development\MyDevelopments\uweheuer.drawio</code>
+==Installation==
+===Raspberry===
+* Git installation
+* Node.js [[RaspberryPi4B#Node.js|installation]]
+* Angular [[RaspberryPi4B#Angular|installation]]
+* Clone repositories
+ uwe@raspberrypi4:~/SoftwareProjects/eclipse-workspace $ gh repo clone UweHeuer/uweheuer-frontend
+ uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ npm install
+ uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ npm audit fix
+==Source Control==
+ git add .
+ // eventually open powershell as admin
+ Get-Item -Path "C:\Uwes\Programme\Git\bin\*.exe" | %{ Set-ProcessMitigation -Name $_.Name -Disable ForceRelocateImages }
+ git commit -m "Save"
+ git push
+==API==
+===Local Dev===
+* Frontend http://localhost:4200/
+===Local Docker===
+* http://localhost/
+==Build==
+===Development Laptop===
+* via npm
+ npm run build:local_dev // see package.json
+** calls
+ ng build --configuration=local_dev // see angular.json
+===Raspberry===
+ uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ git pull
+ uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ npm run build:raspberry // base-ref is needed for running behind the Raspberry 3B proxy, see on Raspberry 3B /etc/apache2/sites-available/000-default-le-ssl.conf
+===Docker===
+* build artefacts
+ npm run build:local_docker // see package.json
+** calls
+ ng build --configuration=local_docker // see angular.json
+* build image
+ 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 <code>angular.json</code>
+ ng serve --configuration local_docker
+ ng serve --configuration local_dev
+===Docker===
+ docker run --name uweheuerfrontendcontainer -d -p 82:80 uweheuerfrontend
+===Docker Compose===
+* see [[Uweheuerbackend#Docker_Compose|UweHeuer Backend]]
+==Implementation==
+===Look and Feel===
+* Angular Material theme in <code>style.css</code>
+* Hammmerjs
+ PS C:\Uwes\SoftwareProjects\uweheuer-frontend>npm install hammerjs
+ // main.ts
+ import 'hammerjs';
+* Material Icons
+ // index.html
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ // <COMPONENT>.ts
+ urlColor: string = 'Chocolate';
+ // <COMPONENT>.html
+ <mat-icon matListIcon  [ngStyle]="{ 'color' : urlColor }"> ...
+* Flex Layout module
 ===Application State===
 * <code>/services/application-state.ts</code>
@@ Line 9: / Line 92: @@
 ===Sidenav===
 * for communication with the side area and content there is a dedicated service in <code>sidenav.service.ts</code>:
-** offers a toggle method for the side area
+** offers a toggle method for the side area which is called in the header burger menu
 * definition in <code>app.component.html</code>
 * in corresponding ts code:
 ** set the DOM object '#mysidenav' side area in the sidenav service