CI: build ts

Reviewed-on: #3

.forgejo/workflows/build.yaml

@@ -1,29 +0,0 @@
-on: [push]
-jobs:
-  build:
-    runs-on: container
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v4
-        name: Install pnpm
-        with:
-          run_install: false
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build package (transpile ts => js)
-        run: ng build
-
-      - name: Store build
-        uses: actions/upload-artifact@v3
-        with:
-          name: Package
-          path: dist/

.gitignore

@@ -44,3 +44,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+.npmrc

.woodpecker/build.yaml

@@ -0,0 +1,50 @@
+when:
+  - event: manual
+  - event: tag
+
+#depends_on:
+  #- test
+
+steps:
+  npm:
+    image: code.philo.ydns.eu/philorg/pnpm-deb
+    environment:
+      ORG: philorg
+      REGISTRY_TOKEN:
+        from_secret: registry_token
+    volumes:
+      - pnpm:/root/.local/share/pnpm
+    commands:
+      - pnpm install --frozen-lockfile
+      - pnpm set "//code.philo.ydns.eu/api/packages/$ORG/npm/:_authToken=$REGISTRY_TOKEN"
+      - pnpm publish --no-git-checks
+    failure: ignore
+
+  build:
+    image: code.philo.ydns.eu/philorg/pnpm-deb
+    commands:
+      - pnpm build
+
+  build_publish:
+    image: quay.io/podman/stable:latest
+    # Caution: This image is built daily. It might fill up your image store quickly.
+    #pull: true
+    volumes:
+      - containers:/var/lib/containers
+      - pnpm:/root/.local/share/pnpm
+    # Fill in the trusted checkbox in Woodpecker's settings as well
+    privileged: true
+    environment:
+      registry: code.philo.ydns.eu
+      org: philorg
+      container_name: treetrail-frontend
+      registry_token:
+        from_secret: registry_token
+    commands:
+      # Login at the registry
+      - podman login -u __token__ --password $registry_token $registry
+      # Build the container image
+      - podman build --volume=/var/lib/containers:/var/lib/containers --tag $registry/$org/$container_name:latest --tag $registry/$org/$container_name:$CI_COMMIT_TAG  .
+      # Push the image
+      - podman push $registry/$org/$container_name:latest
+      - podman push $registry/$org/$container_name:$CI_COMMIT_TAG

Containerfile

@@ -1,7 +1,6 @@
 FROM docker.io/library/nginx:alpine
-MAINTAINER philo email phil.dev@philome.mooo.com
 
 EXPOSE 80
 
 COPY nginx.conf /etc/nginx/nginx.conf
-COPY treetrail-app/dist/treetrail/browser /usr/share/nginx/html
+COPY dist/treetrail/browser /usr/share/nginx/html

README.md

@@ -1 +1,10 @@
-Front-end for *Tree Trail*, a fun and pedagogic tool to discover the trails and trees around.
+# Treetrail web front-end
+
+Front-end for *Tree Trail*, a fun and pedagogic tool
+to discover the trails and trees around.
+
+Home page (source, bugs, etc):
+<https://code.philo.ydns.eu/philorg/treetrail-frontend> .
+
+The main documentation for Tree Trail is:
+<https://code.philo.ydns.eu/philorg/treetrail-backend> .

build.yaml

@@ -0,0 +1,49 @@
+- name: Build container image
+  hosts: localhost
+  gather_facts: false
+  vars:
+    repository: tiptop:5000
+    force_rm: false
+    cache: false
+
+  tasks:
+    - name: Install dependencies
+      command: pnpm install
+      args:
+        chdir: "{{ playbook_dir }}"
+
+    - name: Build the Angular app
+      command: ng build
+      args:
+        chdir: "{{ playbook_dir }}"
+
+    - name: Get the version from git
+      command: git describe --dirty --tags
+      register: version
+      args:
+        chdir: "{{ playbook_dir }}"
+
+    - name: Update version.json
+      command: pnpm run version
+      args:
+        chdir: "{{ playbook_dir }}"
+
+    - name: Build frontend container
+      containers.podman.podman_image:
+        name: "treetrail-frontend:{{ version.stdout }}"
+        state: build
+        force: true
+        path: "{{ playbook_dir }}"
+        build:
+          format: oci
+          force_rm: "{{ force_rm }}"
+          cache: "{{ cache }}"
+          file: Containerfile
+          extra_args: "--build-arg APP_VERSION={{ version.stdout }}"
+        push: true
+        push_args:
+          dest: "{{ repository }}/treetrail-frontend:{{ version.stdout }}"
+        #quadlet_options:
+        #  - |
+        #    [Install]
+        #    WantedBy=default.target

nginx.conf

@@ -0,0 +1,66 @@
+events {
+  worker_connections  1024;  ## Default: 1024
+}
+
+http {
+
+  ## use mime types
+  include /etc/nginx/mime.types;
+
+  server {
+
+    listen 80 default_server;
+    listen [::]:80 default_server;
+    server_name _;
+    root /usr/share/nginx/html;
+
+    location = / {
+      ## Convevience redirect to redirect to the web root
+      return 301 /treetrail/;
+    }
+
+    location = /treetrail {
+      ## Convevience redirect to redirect to the web root
+      return 301 /treetrail/;
+    }
+
+    location /treetrail/ {
+      alias /usr/share/nginx/html/;
+      index index.html;
+      try_files $uri $uri/ /index.html;
+    }
+
+    location /treetrail/v1/ {
+      proxy_set_header Host $http_host;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection $connection_upgrade;
+      proxy_redirect off;
+      proxy_buffering off;
+      proxy_pass http://127.0.0.1:8081;
+    }
+  }
+
+  map $http_upgrade $connection_upgrade {
+    default upgrade;
+    '' close;
+  }
+
+  ## enable gzip compression
+  gzip on;
+  gzip_vary on;
+  gzip_min_length 256;
+  gzip_proxied any;
+
+  gzip_types
+    ## text/html is always compressed : https://nginx.org/en/docs/http/ngx_http_gzip_module.html
+    text/plain
+    text/css
+    text/javascript
+    application/javascript
+    application/x-javascript
+    application/xml
+    application/json
+    application/ld+json;
+}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "treetrail",
-  "version": "0.0.0",
+  "version": "0.4.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "treetrail",
-      "version": "0.0.0",
+      "version": "0.4.5",
       "dependencies": {
         "@angular/animations": "^18.2.6",
         "@angular/cdk": "^18.2.6",

package.json

@@ -1,15 +1,14 @@
 {
-  "name": "treetrail",
-  "version": "0.0.0",
+  "name": "treetrail-frontend",
+  "version": "0.4.5",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --proxy-config proxy.conf.json --port 4201",
+    "start": "ng serve --proxy-config proxy.conf.json --port 4201 --serve-path /treetrail --host 0.0.0.0",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "openapi-ts": "openapi-ts"
   },
-  "private": true,
   "dependencies": {
     "@angular/animations": "^18.2.6",
     "@angular/cdk": "^18.2.6",
@@ -61,5 +60,8 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "typescript": "~5.4.5"
   },
-  "packageManager": "pnpm@9.12.2"
+  "packageManager": "pnpm@9.12.2",
+  "publishConfig": {
+    "registry": "http://code.philo.ydns.eu/api/packages/philorg/npm/"
+  }
 }

proxy.conf.json

@@ -1,17 +1,17 @@
 {
-  "/static": {
+  "/treetrail/static": {
     "target": "http://127.0.0.1:5002",
     "secure": false
   },
-  "/v1": {
+  "/treetrail/v1": {
     "target": "http://127.0.0.1:5002",
     "secure": false
   },
-  "/attachment": {
+  "/treetrail/attachment": {
     "target": "http://127.0.0.1:5002",
     "secure": false
   },
-  "/tiles": {
+  "/treetrail/tiles": {
     "target": "http://127.0.0.1:5002",
     "secure": false
   }

src/app/about/about.component.html

@@ -4,7 +4,7 @@
   </mat-card-title>
   <mat-card-content>
     <h2>Version</h2>
-      <p><span class='h'>Client: </span>{{ (configService.conf | async).bootstrap.client.version }}></p>
+      <p><span class='h'>Client: </span>{{ version }}></p>
       <p><span class='h'>Server: </span>{{ (configService.conf | async).bootstrap.server.version }}</p>
   </mat-card-content>
 </mat-card>

src/app/about/about.component.ts

@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core'
 
 import { ConfigService } from '../config.service'
+import packageJson from '../../../package.json'
 
 @Component({
   selector: 'app-about',
@@ -12,6 +13,8 @@ export class AboutComponent implements OnInit {
     public configService: ConfigService,
   ) { }
 
+  public version: string = packageJson.version
+
   ngOnInit(): void {
   }
 }

src/app/app.component.ts

@@ -1,5 +1,7 @@
-import { Component, OnInit,
-  ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core'
+import {
+  Component, OnInit,
+  ChangeDetectorRef, ChangeDetectionStrategy
+} from '@angular/core'
 import { DataService } from './data.service'
 
 import { ActionService } from './action.service'
@@ -10,7 +12,6 @@ import { combineLatest } from 'rxjs'
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {
@@ -20,7 +21,7 @@ export class AppComponent implements OnInit {
     public actionService: ActionService,
     public appUpdateService: AppUpdateService,
     public cdr: ChangeDetectorRef,
-  ) {}
+  ) { }
   title = 'treetrail'
 
   ngOnInit(): void {

src/app/map/map.component.ts

@@ -80,7 +80,7 @@ export class MapComponent implements AfterContentInit, OnInit {
     let conf = this.configService.conf.value
     let bms = conf.background
     if (conf.bootstrap.baseMapStyles.embedded.indexOf(bms) >= 0) {
-      this.styleUrl = `/tiles/style/${bms}`
+      this.styleUrl = `tiles/style/${bms}`
     }
     else {
       this.styleUrl = conf.bootstrap.baseMapStyles.external[bms]

src/app/profile/profile.component.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss']
 })
 export class ProfileComponent {
 

src/app/settings/settings.component.html

@@ -40,7 +40,7 @@
     <div>
       <mat-button-toggle-group #background="matButtonToggleGroup"
         [value]="conf.background || conf.map?.background"
-        (change)="configService.setUserPref('background', background.value)"
+        (change)="configService.setUserPref('background', background.value) ; router.navigate(['/map'])"
       >
         <mat-button-toggle
           *ngFor="let bms of conf.bootstrap.baseMapStyles.embedded"
@@ -55,7 +55,7 @@
     <mat-label>Types of zones displayed on the map</mat-label>
     <div class="settings">
       <mat-checkbox *ngFor="let item of conf.showZones | keyvalue" [checked]="item.value"
-        (change)="configService.setUserPrefValue('showZones', item.key, $event.checked)">
+        (change)="configService.setUserPrefValue('showZones', item.key, $event.checked) ; router.navigate(['/map'])">
         {{ item.key }}
       </mat-checkbox>
     </div>
@@ -108,7 +108,7 @@
     <li><span class='h'>Dave Storey</span>: communication</li>
   </ul>
   <p><span class='h'>Contact</span>: phil.treetrail at philome.mooo.com</p>
-  <p><span class='h'>Version</span>: {{conf.bootstrap?.client.version }}</p>
+  <p><span class='h'>Version</span>: {{conf.bootstrap?.client.version }}, frontend: {{ version }}</p>
 </mat-expansion-panel>
 
 <mat-expansion-panel>

src/app/settings/settings.component.ts

@@ -3,6 +3,7 @@ import { Router } from '@angular/router'
 
 import { ActionService } from '../action.service'
 import { ConfigService, Config } from '../config.service'
+import packageJson from '../../../package.json'
 
 @Component({
   selector: 'app-settings',
@@ -17,6 +18,8 @@ export class SettingsComponent implements OnInit {
     public router: Router,
   ) { }
 
+  public version: string = packageJson.version
+
   ngOnInit(): void {
     this.configService.conf.subscribe(
       conf => this.conf = conf

tsconfig.json

@@ -15,6 +15,8 @@
     "importHelpers": true,
     "target": "ES2022",
     "module": "es2020",
+    //"allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
     "lib": [
       "es2019",
       "dom"