Uweheuerfrontend: Difference between revisions
| (18 intermediate revisions by the same user not shown) | |||
| Line 12: | Line 12: | ||
uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ npm audit fix | uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ npm audit fix | ||
===API=== | ==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/ | * http://localhost/ | ||
| Line 18: | Line 29: | ||
===Development Laptop=== | ===Development Laptop=== | ||
* via npm | * via npm | ||
npm run build: | npm run build:local_dev // see package.json | ||
** calls | ** calls | ||
ng build --configuration= | ng build --configuration=local_dev // see angular.json | ||
===Raspberry=== | ===Raspberry=== | ||
uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ git pull | uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ git pull | ||
uwe@raspberrypi4:~/SoftwareProjects/uweheuer-frontend $ | 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=== | ===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 . | docker build --tag uweheuerfrontend . | ||
| Line 50: | Line 64: | ||
===Docker Compose=== | ===Docker Compose=== | ||
* see [[Uweheuerbackend#Docker_Compose|UweHeuer Backend]] | * 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=== | ===Application State=== | ||
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]
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
- in ctor:
[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